body {
  margin: 0 auto;
  padding: 10vw;
  color: #000;
  font-family: "Space Grotesk", serif;
  font-feature-settings: 'pnum' on, 'onum' on, 'zero' on;
  font-weight: 500;
  font-size: clamp(.75rem, 2vw + .75rem, 2.5rem); 
}
body::after {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30vh;
  background: linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 1));
  user-select: none;
}
h1,h2 {
  font-size: inherit;
  font-weight: inherit;
}
body > * {
  margin-bottom: 2em;
}
#local-time-1, #local-time-2, #minutes-left {
  font-size: .875em;
}
.tooltip {
  position: relative;
  cursor: help;
  outline: none;
}
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 0;
  left: 100%;
  background: #fff;
  border: solid 1px #ccc;
  padding: 8px;
  display: none;
  font-size: .5em;
  white-space: nowrap;
}
.tooltip:hover::after,.tooltip:focus::after {
  display: block;
}
small {
  font-size: .5em;
  display: block;
}
#legend {
  width: 30vw;
  filter: brightness(0);
}
#watch {
  margin-top: 10vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 700px;
  overflow: hidden;
}
.image {
  position: absolute;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: opacity 1s ease-in-out;
}
.second {
  opacity: 0;
}
#logo {
  width: 18vw;
  cursor: none;
  outline: none;
}
#logo .letter {
  opacity: 1;
  transition: all .1s ease-in-out;
  transform-origin: left center;
}
#logo .letter:nth-child(1) {
  transition-delay: .1s;
}
#logo .letter:nth-child(2) {
  transition-delay: .15s;
}
#logo .letter:nth-child(3) {
  transition-delay: .20s;
}
#logo .letter:nth-child(4) {
  transition-delay: .25s;
}
#logo .letter:nth-child(5) {
  transition-delay: .30s;
}
#logo:hover .letter:nth-child(2),#logo:focus .letter:nth-child(2) {
  transform: translateX(50px);
}
#logo:hover .letter:nth-child(3),#logo:focus .letter:nth-child(3) {
  transform: translateX(100px);
}
#logo:hover .letter:nth-child(4),#logo:focus .letter:nth-child(4) {
  transform: translateX(150px);
}
#logo:hover .letter:nth-child(5),#logo:focus .letter:nth-child(5) {
  transform: translateX(150px);
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
    color: #fff;
    font-weight: 400;
  }
  body::after {
    background: linear-gradient(to bottom, rgba(0,0,0, 0), rgba(0,0,0, 1));
  }
  .tooltip::after {
    background: #000;
    border: solid 1px #666;
  }
  #legend {
    filter: invert(100%);
  }
}