index.css

/* Hello text */
.hi {
  /* Big enough to fit the header on one line */
  max-width: 30em;
  text-align: center;
  /* Make sure it covers the moon if they overlap */
  z-index: 1;
}

/* Spinning hand */

/* A sprightly spin, and then a wave */
@keyframes wave {
  from {
    transform: rotate(0turn);
  }
  15% {
    transform: rotate(1turn);
  }
  30% {
    transform: rotate(1.07turn);
  }
  55% {
    transform: rotate(.93turn);
  }
  80% {
    transform: rotate(1.06turn);
  }
  to {
    transform: rotate(1turn);
  }
}
.spinny-hand {
  /* To enable rotating and wiggling about */
  display: inline-block;
  position: relative;
}
.spinny-hand:hover,
.spinny-hand:focus {
  animation: wave 2s linear;
}

/* Sound Toggle */
.sound-toggle {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.sound-toggle-label {
  align-items: center;
  display: flex;
  justify-content: center;
 
  background-color: #80000030;
  border-radius: 100%;
  cursor: pointer;
  flex-shrink: 0;
  height: 2rem;
  width: 2rem;
  margin-left: 1em;
}

#sound-toggle-button {
  appearance: none;
  display: none;
}
#sound-toggle-button + .sound-toggle-icon:before {
  content: "🔊";
}
#sound-toggle-button:checked + .sound-toggle-icon:before {
  content: "🔈";
}

/* Cross the screen at a consistent speed regardless of screen size
 *
 * Rather than travel a distance relative to the screen width, the cross
 * is always 2000px (wayyyy  off to left field on small devices). For a given
 * `animation-duration` this gives a consistent pixel/second speed. The cross
 * can be sped up by decreasing the `animation-duration`, and slowed down by
 * increasing the `animation-duration`.
 *
 * `calc` doesn't handle time values well, so we can't change the speed
 * by calculating the `animation-duration` based on the view width.
 */
@keyframes cross {
  from {
    transform: translateX(var(--owl-size));
  }

  to {
    /* Choose a relatively large screen size as our constant so it handles large screens well. */
    transform: translateX(-2000px);
  }
}

/* Hiding it from within a nested div, instead of the body, avoids expanding the screen on mobile
 *
 * TODO: Specifying "overflow-y: visible" doesn't show owl. I have to make a div large enough to
 * actually display the owl for it to appear.
 */
.owl-sprite-hider {
  height: calc(var(--owl-size) + var(--main-padding));
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100vw;
}
.owl-sprite {
  position: absolute;
  right: 0;
  top: var(--main-padding);
  /* 2000px/13s = ~150px/second */
  animation: cross 13s linear;
  /* The first owl screech is exactly at around 5s.
   * With the time it takes to enter the frame the owl shows up right when the screech happens.
   */
  animation-delay: 4s;
}
.owl-sprite .frame {
  position: absolute;
  top: 0;
  left: 0;
  height: var(--owl-size);
  width: var(--owl-size);
}

@keyframes blink1 {
  from {
    visibility: visible;
  }

  to {
    visibility: hidden;
  }
}
@keyframes blink2 {
  from {
    visibility: hidden;
  }

  to {
    visibility: visible;
  }
}

.owl-sprite .frame:nth-child(1) {
  animation: blink1 .75s infinite steps(2, jump-none);
  top: -37.5px;
}
.owl-sprite .frame:nth-child(2) {
  animation: blink2 .75s infinite steps(2, jump-none);
}