:root {
  --size: 1.5vw;
  --bx-zero: inset 0 0 0 var(--size) white, 0px var(--size) white,
    0px calc(var(--size) * 2) white, 0px calc(var(--size) * 3) white,
    0px calc(var(--size) * 4) white, var(--size) 0 white,
    calc(var(--size) * 2) 0 white, calc(var(--size) * 3) 0 white,
    calc(var(--size) * 3) var(--size) white,
    calc(var(--size) * 3) calc(var(--size) * 2) white,
    calc(var(--size) * 3) calc(var(--size) * 3) white,
    calc(var(--size) * 3) calc(var(--size) * 4) white,
    var(--size) calc(var(--size) * 4) white,
    calc(var(--size) * 2) calc(var(--size) * 4) white;

  /* Remove hue and saturation variables, use only lightness */
  --base-color: hsl(0, 0%, 40%);  /* Mid gray */
  --transition: none;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 1em;
  color: white;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
  font-family: sans-serif;
  z-index: 3;
  backdrop-filter: blur(4px);
}

nav div {
  display: flex;
  grid-gap: 8px;
  flex-direction: column;
}

nav span {
  width: 100%;
  flex-direction: column;
}

nav div input {
  width: 100%;
}

.clock {
  --theme: hsl(0, 0%, 40%);  /* Mid gray */
  --outline-color: hsl(0, 0%, 30%);  /* Gray for outline */
  --outer-border: var(--size) / 4;
  --transition-easing: ease;
  --transition-timing: 0.2s;

  position: relative;
  width: 100%;
  height: calc(var(--size) * 10);
  border: calc(var(--outer-border)) solid var(--theme);
  background-image: conic-gradient(
    from 90deg at calc(var(--size) / 15) calc(var(--size) / 15),
    #000 90deg,
    rgb(255 255 255 / 10%) 0
  );
  background-blend-mode: multiply;
  background-repeat: repeat;
  background-position: 0 0;
  background-size: var(--size) var(--size);
  background-color: var(--theme);
  box-shadow: inset 0 0 50px rgb(0 0 0 / 1), inset 0 0 30px rgb(0 0 0 / 1),
    inset 0 0 10px rgb(0 0 0 / 1), 0 calc(var(--size) / 4) var(--bottom-shadow);
  outline: calc(var(--size) / 4) dashed var(--outline-color);
  outline-offset: calc(var(--size) * -0.52);

}

.clock:nth-of-type(1) {
  --theme: hsl(0, 0%, 45%);  /* Lighter gray */
}

.clock:nth-of-type(2) {
  --theme: hsl(0, 0%, 50%);  /* Even lighter gray */
  --bottom-shadow: hsl(0, 0%, 25%);
  --transition: 0;
}

.clock:nth-of-type(3) {
  --theme: hsl(0, 0%, 55%);  /* Lightest gray */
  --bottom-shadow: hsl(0, 0%, 30%);
  --transition: 0;
  --transition-timing: 1s;
  --transition-easing: ease-in-out;
}

.clock:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgb(255 255 255 / 60%),
    transparent
  );
  top: calc(calc(var(--outer-border)) * -1);
  border-radius: calc(var(--size) / 1.5);
}

.clock:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--theme);
  z-index: 0;
  mix-blend-mode: multiply;  /* Changed from hue to multiply for grayscale */
}

.clock span {
  --color: var(--theme);
  position: absolute;
  width: var(--size);
  height: var(--size);
  top: calc(var(--size) * 2);
  left: calc(var(--size) * 2);
  border-radius: calc(var(--size));
  box-shadow: var(--bx-zero);
  transition: box-shadow var(--transition-timing) var(--transition-easing);
  transition-property: var(--transition);
}

.clock .light span {
  --color: rgb(255 255 255 / 100%);
  z-index: 2;
  opacity: 0.65;
  filter: blur(3px);
}

/* Position spans */
.clock span:nth-child(2) { left: calc(var(--size) * 7); }
.clock span:nth-child(3) { left: calc(var(--size) * 12); }
.clock span:nth-child(4) { left: calc(var(--size) * 17); }
.clock span:nth-child(5) { left: calc(var(--size) * 22); }
.clock span:nth-child(6) { left: calc(var(--size) * 27); }