:root {
  color-scheme: only dark;
}

html {
  background-color: #0a0f1a;
  color: #adb3cb;
}

body {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

::backdrop {
  background-color: black;
  opacity: 0.5;
}

h1, h2, h3, p, button, a {
  /* color does not apply to h2 by unknown reason */
  color: #adb3cb;
  text-align: center;
  font-family: "Poppins", sans-serif;
}

footer {
  text-align: center;
}

a, a > span {
  color: #3273eb;
  text-decoration: none;
  font-family: 'Sen', sans-serif;

  animation: variable-loop 2.5s infinite both;
  animation-delay: var(--delay);
  text-align: center;

  --delay: calc((var(--variable-index) + 1) * 0.15s);
}

button {
  margin: 10px auto;
  display: block;

  width: 15rem;
  height: 4rem;
  font-size: 1.5rem;
  font-weight: 700;

  border-radius: 5rem;

  background-color: #3273eb;
  color: #0a0f1a;
  text-decoration: none;
  justify-content: center;
  border: 0;
  cursor: pointer;
  user-select: none;

  transition: background-color 0.15s ease-out;
}

button:disabled {
  background-color: #6b6f7f;
  color: #0a0f1a;
  cursor: default;
}

button:hover:enabled {
  animation: button-hover 0.5s linear;
  background-color: #fff;
}

dialog {
  width: 20rem;
  padding-bottom: 2rem;
  border-radius: 2rem;
  border-color: #767a8a;
}

#asdf-box {
  width: 25rem;
}

#key-box {
  width: 23rem;
}

#key, #key > span {
  margin: 0 auto;
  font-family: "Sen", sans-serif;
}

#key > span {
  animation: variable-loop 3s infinite both;
  animation-delay: var(--delay);
  text-align: center;

  --delay: calc((var(--variable-index) + 1) * 0.15s);
}

/* I want more weights */
@keyframes variable-loop {
  0% {
    font-weight: 400;
  }
  50% {
    font-weight: 800;
  }
  100% {
    font-weight: 400;
  }
}