body {
  font-family: "Times New Roman", sans-serif;
  margin: 0;
}

.idiot {
  position: absolute;

  width: 100%;
  height: 100%;

  z-index: -69;

  display: flex;
  flex-direction: column;

  justify-content: center;
  align-items: center;
}

.hidden {
  display: none;
}

/* Could have used a background image, but I chose not to for better performance. */
.idiot > svg {
  position: fixed;

  top: 50%;
  left: 50%;

  width: 100%;
  height: 100%;

  -webkit-user-select: none;
  user-select: none;

  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@keyframes key-black {
  from,
  to {
    visibility: visible;
  }

  50% {
    visibility: hidden;
  }
}

@keyframes key-white {
  from,
  to {
    visibility: hidden;
  }

  50% {
    visibility: visible;
  }
}

.frame-black {
  /* 10 frames @ 15fps on 60fps = 666ms */
  animation: key-black step-end 666ms infinite;
}

.frame-white {
  /* 10 frames @ 15fps on 60fps = 666ms */
  animation: key-white step-end 666ms infinite;
}