html,
body {
  background-color: #252323;
  opacity: 1;
  background-size: 48px 48px;
  background-position:
    0 0,
    24px 24px;

  color: #dad2bc;
  font-family: "Fantasque Sans Mono", sans-serif;
  width: 100%;
  height: 100%;
  padding: min(1vw, 1em);
  font-size: min(3vw, 1.2em);
  overflow: hidden;
}

h1 {
  color: #b7a55f;
  font-size: min(5vw, 1.4em);
}

a {
  color: #dad2bc;
  text-decoration: none;
}

li:hover {
  animation: glitch 0.6s infinite;
  color: #9999a1;
}

ul,
ol {
  list-style-type: "✱ ";
  margin-left: min(1vw, 1em);
}

li {
  color: #dad2bc;
}

.banner {
  font-size: min(10vw, 120px);
}

div.banner:hover {
  animation: glitch 0.6s infinite;
}

/* section:hover h1 { */
/*   animation: glitch 0.6s infinite; */
/* } */

.copyable {
  color: #1f7a8c;
}

@keyframes glitch {
  0% {
    text-shadow:
      2px 2px #b7a55f,
      -2px 2px #1f7a8c;
  }
  10% {
    text-shadow:
      3px 3px #b7a55f,
      -3px 1px #1f7a8c;
  }
  20% {
    text-shadow:
      -2px 0 #b7a55f,
      2px 0 #1f7a8c;
  }
  30% {
    text-shadow:
      1px -1px #b7a55f,
      -1px 1px #1f7a8c;
  }
  40% {
    text-shadow:
      2px -2px #b7a55f,
      -2px 2px #1f7a8c;
  }
  50% {
    text-shadow:
      2px 0 #b7a55f,
      -3px 0 #1f7a8c;
  }
  60% {
    text-shadow:
      -1px -1px #b7a55f,
      1px 1px #1f7a8c;
  }
  70% {
    text-shadow:
      3px 1px #b7a55f,
      -1px -3px #1f7a8c;
  }
  80% {
    text-shadow:
      0px 2px #b7a55f,
      2px -2px #1f7a8c;
  }
  90% {
    text-shadow:
      -2px 2px #b7a55f,
      2px 2px #1f7a8c;
  }
  100% {
    text-shadow:
      2px 0 #b7a55f,
      -2px 0 #1f7a8c;
  }
}