.auth {
  display: flex;
  justify-content: center;
  align-items: center;
}

.auth-card {
  border: 1px solid;
  border-radius: 5px;
  color: var(--secondary-color);
  width: 80%;
  height: auto;
  margin: 2rem 1rem;
  padding-bottom: 2rem;
}

.email-field,
.password-field,
.username-field {
  margin: 0 auto;
  width: 85%;
}

.password-field {
  margin-bottom: 0.5rem;
}

#login-error,
#auth-error {
  margin: 0;
}
.success-message {
  color: #1b5e03;
}
.error-message {
  color: red;
}

.auth-switch {
  text-align: center;
  margin: 1rem 0 2rem 0;
}

.auth-switch a {
  color: #1b5e03;
  text-decoration: none;
  font-weight: 500;
}

.field-control {
  position: relative;
  width: 100%;
}

.field-icon {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
}

.field-control input {
  padding: 0.8rem 0 0.8rem 2.2rem;
  width: 100%;
  border: none;
  border-bottom: solid #999 1px;
}

@media (min-width: 768px) {
  .auth-card {
    margin: 5.2rem 0;
    width: 60%;
  }
  .email-field,
  .password-field,
  .username-field {
    width: 75%;
  }
  .field-control {
    font-size: 1.125;
  }
}

@media (min-width: 992px) {
  .auth-card h1 {
    font-size: 2.25rem;
  }
  .auth-card {
    width: 50%;
  }
}

@media (min-width: 1400px) {
  .auth-card {
    width: 45%;
  }
}

@media (min-width: 1600px) {
  .auth-card {
    width: 35%;
  }
}