body {
  /* background: linear-gradient(135deg, rgb(31 72 104 / 90%), rgb(236 243 249 / 90%)); */
  background: linear-gradient(
    135deg,
    var(--login-gradient-1),
    var(--login-gradient-2)
  );
}

#loginscreen_container {
  width: 45em;
  height: 35vh;
  margin: auto;
  border-top: var(--nav-bg) solid 5px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

#loginscreen_title {
  width: 80%;
  margin: 0;
  align-items: center;
  justify-content: center;
  background: var(--nav-bg);
  color: var(--font-light-color);
  border-bottom-left-radius: 10px;
}

#loginscreen_form {
  margin: 0;
  align-items: center;
  padding-left: 10px;
  background: var(--light-bg-background);
  border-bottom-right-radius: 10px;
}

@media only screen and (max-device-width: 768px) {
  #loginscreen_container {
    flex-direction: column;
    width: 90vw;
    height: auto;
    border-top: none;
    /* box-shadow: none; */
  }

  #loginscreen_title {
    width: 100%;
    padding: 10px 0px;
    border-bottom-left-radius: 0px;
  }

  #loginscreen_title h3,
  #loginscreen_title h5 {
    margin: 3px 0px;
  }

  #loginscreen_form {
    width: auto;
    border-bottom-left-radius: 10px;
  }

  #loginscreen_form h4,
  #loginscreen_form p {
    margin: 3px 0px;
  }
}