html {
  background: url(/img/login-background.jpg) no-repeat center center fixed;
  background-size: cover;
}

body {
  background: none;
}

#login {
  height: 22em;
  width: 30.8em;
  position: absolute;
  top: calc(50% - 11em);
  left: calc(50% - 15.4em);
  border-radius: 0.5em;
  background-color: #4E57A4;
  opacity: 0.75;
  align-self: center;
  text-align: center;
  color: white;
}

#login a {
  color: white;
  font-size: 0.8em;
  text-decoration: underline;
}

#login h1 {
  margin: 2rem 0;
  font-size: 1.8em;
}

#login label {
  font-size: 0.8em;
  cursor: pointer;
}

#login input[type=text],
#login input[type=password] {
  border-radius: 0.8em;
  overflow: hidden;
}

#login-submit {
  font-size: 1.15em;
  font-family: ArialAmuBold;
  background-color: #00c484;
  padding: 0 1em;
  border-radius: 1em;
  color: white;
  margin-bottom: 1em;
}

#login-submit:hover {
  background-color: #00c484cc;
}

.form-check-input {
  top: 0.3em;
}

#login form .invalid-feedback {
  font-size: 1rem;
  color: red;
}

#login .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #00c484;
  border-color: #00c484;
}