.login-background {
  background-attachment: fixed;
  background-color: var(--background-dark);
  background-image: url(../img/background.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  transform: scale(1.1);
  width: 100vw;
  height: 100vh;
  z-index: 2000;
}

.login {
  color: white;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
}
@media (min-width: 33.75em) {
  .login {
    width: 33.75em;
  }
}

.login__form {
  align-self: center;
  position: relative;
  min-width: 80%;
}
.login__form > form {
  background-color: transparent;
  margin: 1.5em;
  position: relative;
  z-index: 20000;
}
.login__form > form legend {
  color: var(--background-light);
}
.login__form > form [type="submit"] {
  align-self: center;
  font-family: 'Franklin Paragraph', sans-serif;
  margin-top: 2.4em;
  padding: .5em;
  width: 50%;
}
.login__form .std-button {
  align-self: center;
  padding: .5em;
  text-align: center;
  width: 50%;
}

.login-registration {
  align-items: center;
  color: var(--background-light);
  display: flex;
  flex-direction: column;
  font-size: .9rem;
  margin-top: 2.4em;
}
.login-registration * + * {
  margin-top: .6em;
}
.login-registration a {
  color: var(--foreground);
}

.close {
  border: 2px solid #724C7C;
  border-radius: 50%;
  position: fixed;
  top: 1.5em;
  right: 1.5em;
  width: 2.5em;
  height: 2.5em;
  z-index: 10000;
}
.close:hover {
  border-color: var(--background-light);
}
.close::after {
  color: #724C7C;
  content: "\00D7";
  font-size: 3.5rem;
  line-height: .55;
  position: absolute;
  top: .03em;
  left: .01em;
  visibility: visible;
}
.close:hover::after {
  color: var(--background-light);
}
.close--small {
  top: .75em;
  right: .75em;
  width: 1.5em;
  height: 1.5em;
}
.close--small::after {
  color: #724C7C;
  content: "\00D7";
  font-size: 1.75rem;
  line-height: .55;
  position: absolute;
  top: .07em;
  left: .05em;
  visibility: visible;
}
