/** LOGIN FORM **/

main:has(#login-form-container) {
  display:flex;
  width: 100vw;
  height: 80vh;
  justify-content: center;
  align-items: center;
}

#login-form-container {
  display: flex;
  flex-direction: column;
  width: 50ch;
  height: auto;
  border: 1px solid var(--project-color-input-border-nofocus);
  background: var(--project-color-input-background);
  justify-content: space-between;
  overflow: hidden;
}

.login-hero-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: var(--project-login-hero-sidebar);
  background-color: gray;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 200px;
  width: 100%;
}

#login-form-container :is(input, button) {
  width:100%;
  box-sizing: border-box;
}

modal-box#login-modal {
  height: 30vh;
  width: 40vw;
}

modal-box#login-modal>section {
  margin: 0
}

.login-form-container :is(form-request, login-form-request) {
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.login-form-container :is(h1, p) {
  text-align: center;
  padding: 0 1rem;
}

#login-form-container fieldset {
  padding: 0;
  border: none;
}

#login-form-container h1 {
  font-size: 1.45em;
  margin-bottom: 0.5em;
}

#login-form-container input[type="username"], #login-form-container input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  /* font-family: var(--project-head-family); */
  padding: .35rem;
  margin-bottom: 1rem;
  font-size: 1.15rem;
}

#login-form-container input {
  margin-bottom: 1rem;
}

#login-form-container .error{
  flex-grow: 1;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#login-form-container hr{
  width:100%;
}

#login-form-container button {
  width: 100%;
  padding: .35rem;
  font-size: 1.15rem;
  font-family: var(--project-head-family);
  margin-top: 1em;
}

#login-form-container label:has(input-switch) {
  display: flex;
  justify-content: center;
  align-items: center;
}

#login-form-container input-switch {
  margin-right: 1ch;
}

@media only screen and (max-width: 35em) {
  #login-form-container {
    width: 100vw;
  }
}