body {
  background-color: aqua;
  font-family: "Nunito", sans-serif;
}

*:focus {
  outline: none;
}

header h1 {
  text-align: center;
  font-family: "Alfa Slab One", cursive;
  font-weight: normal;
  font-size: 8em;
  margin: 5vh 0;
}

section {
  text-align: center;
  margin: 0;
}
section .instructions {
  font-size: 2em;
}
section .field {
  margin: 0.5em 0 3em;
}
section .field input {
  background-color: transparent;
  font-size: 3em;
  width: 80%;
  border: 2px solid #000;
  text-align: center;
}
section .field input.code {
  text-transform: uppercase;
}
section .field input.error {
  animation: shake 0.2s ease-in-out 0s 5;
}
section .button button {
  font-family: "Nunito", sans-serif;
  width: 20vw;
  height: 20vw;
  max-width: 85px;
  max-height: 85px;
  border: none;
  border-radius: 50%;
  background-color: #c00;
  color: white;
}

@keyframes shake {
  0% {
    margin-left: 0rem;
  }
  25% {
    margin-left: 1rem;
  }
  75% {
    margin-left: -1rem;
  }
  100% {
    margin-left: 0rem;
  }
}

/*# sourceMappingURL=join.css.map */