@media (prefers-color-scheme: dark) {
  html { color-scheme: dark }
  body { background: #111 }
}



body {
  margin: 0;
}

nav {
  display: flex;
  justify-content: center;
  position: fixed;
  z-index: 1000;
  bottom: 1rem;
  width: 100%;
  height: 0;
}
nav div {
  box-sizing: border-box;
  margin-top: -3.5rem;
  padding: 0 1rem;
  height: 3.5rem;
  border-radius: 999px;
  border-top: .125rem solid #444;
  border-bottom: .125rem solid #111;
  background: linear-gradient(#333, #222);
}
nav div * {
  display: inline-block;
}
nav input {
  margin: .625rem .25rem;
  width: 2rem;
  height: 2rem;
}
nav:has(input:checked) {
  transition: opacity .5s;
}
nav:has(input:checked):not(:hover) {
  transition: opacity 5s;
  opacity: 0;
}
nav a,
nav span {
  padding: .875rem .5rem;
  vertical-align: top;
  text-decoration: none;
  font-weight: bold;
}
nav a {
  color: #fff9;
}
nav a.a {
  color: #fff;
}
nav span {
  color: #fff3;
}



wrap,
logo,
clock {
  display: flex;
  justify-content: center;
  align-items: center;
}
wrap {
  position: fixed;
  inset: 0;
}
logo,
clock {
  position: relative;
  width: 80vmin;
  max-width: calc(100vh - 15rem);
  aspect-ratio: 1;
  overflow: hidden;
}

logo::before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  inset: 4%;
  border-radius: 50%;
  transform: rotate(-45deg);
  opacity: .1;
}
@media (prefers-color-scheme: light) {
  logo::before {
    background:
      100% 0 / 50% 100%
      no-repeat
      linear-gradient(
        #0000 50%,
        #ffff 50%,
        #ffff 60%,
        #0000 60%
      ),
      0 0 / 100% 50%
      no-repeat
      linear-gradient(
        -90deg,
        #0000 50%,
        #ffff 50%,
        #ffff 60%,
        #0000 60%
      ),
      100% 0 / 50% 50%
      no-repeat
      linear-gradient(
        #0000 40%,
        #000f 40%,
        #000f 60%,
        #0000 60%,
        #0000 80%,
        #000f 80%,
        #000f 100%,
        #0000 100%
      ),
      radial-gradient(
        #0000 56.5%,
        #000f 56.6%
      )
    ;
  }
}
@media (prefers-color-scheme: dark) {
  logo::before {
    background:
      100% 0 / 50% 100%
      no-repeat
      linear-gradient(
        #0000 50%,
        #111f 50%,
        #111f 60%,
        #0000 60%
      ),
      0 0 / 100% 50%
      no-repeat
      linear-gradient(
        -90deg,
        #0000 50%,
        #111f 50%,
        #111f 60%,
        #0000 60%
      ),
      100% 0 / 50% 50%
      no-repeat
      linear-gradient(
        #0000 40%,
        #ffff 40%,
        #ffff 60%,
        #0000 60%,
        #0000 80%,
        #ffff 80%,
        #ffff 100%,
        #0000 100%
      ),
      radial-gradient(
        #0000 56.5%,
        #ffff 56.6%
      )
    ;
  }
}

doc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 3rem 2rem 6rem;
  max-width: 640px;
  min-height: calc(100vh - 10rem);
  line-height: 160%;
}

clock clock- {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}