main {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: var(--primary-background);
  padding: 1em;
}

main.loading::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.25;
}

main.loading::after {
  box-sizing: border-box;
  content: '';
  display: inline-block;
  margin-left: 1em;
  position: absolute;
  bottom: calc(50% - 5em);
  left: calc((50% - 5em));
  width: 10em;
  height: 10em;
  border-radius: 50%;
  border: 20px solid transparent;
  border-top: 20px solid white;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

section {
  background-color: var(--secondary-background);
  padding: 2em;
  border-radius: 0.5em;
  color: black;
  max-width: 500px;
  flex: 1;
}

section h1 {
  text-align: center;
  font-size: 2em;
}

input {
  margin-bottom: 1em;
  width: 100%;
}

button {
  display: block;
  width: 100%;
  font-size: 1em;
  padding: 0.5em 2em;
  border: none;
  border-radius: 0.5em;
  background-color: var(--action-color);
  color: white;
}

button:hover {
  transform: scale(1.05);
}

#error {
  color: red;
}