html {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 20px;
  text-align: center;

  &.unsaved::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 10px 2px currentColor;
    animation: rainbow-glow 6s infinite linear;
    background-image: linear-gradient(-20deg, transparent 5%, currentColor 10%, transparent 15%);
    opacity: 0.5;
  }
}

@keyframes rainbow-glow {
  0% { color: hsl(0, 100%, 50%); }
  8.333% { color: hsl(30, 100%, 50%); }
  16.666% { color: hsl(60, 100%, 50%); }
  25% { color: hsl(90, 100%, 50%); }
  33.333% { color: hsl(120, 100%, 50%); }
  41.666% { color: hsl(150, 100%, 50%); }
  50% { color: hsl(180, 100%, 50%); }
  58.333% { color: hsl(210, 100%, 50%); }
  66.666% { color: hsl(240, 100%, 50%); }
  75% { color: hsl(270, 100%, 50%); }
  83.333% { color: hsl(300, 100%, 50%); }
  91.666% { color: hsl(330, 100%, 50%); }
  100% { color: hsl(360, 100%, 50%); }
}

button, input, select, textarea {
  font-family: inherit;
  font-size: 18px;
  text-align: center;
  padding: 5px 10px;
}

ul {
  padding: 0;
  list-style: none;
}

body>:first-child {
  width: 90%;
  max-width: 1000px;
  margin: 5vh auto;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}