:root {
  --Rotkehlchen-gray: #e7ecf2;
  --Rotkehlchen-brown-light: #a28d7a;
  --Rotkehlchen-orange-default: #e79a0e;
  --Rotkehlchen-gray-default: #e7ecf2;
  --Rotkehlchen-brown-middle: #7f6d6d;
  --Rotkehlchen-yellow-default: #fed640;
  --Rotkehlchen-yellow-hover: #eac22a;
  --Rotkehlchen-brown-dark: #4c4141;
}

.login-display {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Full viewport height */
  width: 100vw; /* Full viewport width */
  position: absolute;
  background: var(
    --gradient-blue-backround-mobile,
    linear-gradient(
      270deg,
      rgba(20, 15, 86, 0.27) 0%,
      rgba(20, 15, 86, 0.58) 24%,
      rgba(20, 15, 86, 0.74) 43%,
      rgba(17, 13, 71, 0.82) 56%,
      rgba(13, 10, 56, 0.9) 68%
    ),
    url("../public/assets/images/BirdsSky.jpg") lightgray 50% / cover no-repeat
  );
  align-items: center;
  justify-content: center;
  z-index: -1;
}

.login-text {
  display: flex;
  padding: 8px 40px 40px 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  color: var(--Rotkehlchen-gray-default);
  text-align: center;

  /* Body-L */
  font-family: Inter;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px; /* 166.667% */
}

.login-icon {
  height: 32px;
  width: 32px;
  aspect-ratio: 1/1;
  align-self: center;
}

.login-div-input {
  display: flex;
  flex-direction: row;
  border-radius: 4px;
  border: 3px solid var(--Rotkehlchen-brown-dark);
  background: #fff;
  width: 100%;
  height: 44px;
  align-items: center;
  justify-content: flex-start;
}

.login-div-input:hover {
  border: 3px solid var(--Rotkehlchen-brown-middle);
}

.login-div-input:focus-within {
  border: 3px solid var(--Rotkehlchen-orange-default);
}

.login-input {
  width: 100%;
  height: 40px;
  border: none;
  color: var(--Rotkehlchen-brown-middle);
  outline: 0 !important;

  /* M3/body/large */
  font-family: var(--Static-Body-Large-Font, Roboto);
  font-size: var(--Static-Body-Large-Size, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--Static-Body-Large-Line-Height, 24px); /* 150% */
  letter-spacing: var(--Static-Body-Large-Tracking, 0.5px);
}
.login-here {
  color: var(--Rotkehlchen-orange-default, #e79a0e);
  background-color: transparent;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  /* Body-M */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 0.8px;
}

.login-signup {
  color: #fff;
  text-align: center;
  cursor: pointer;

  /* Body-M */
  font-family: Inter;
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: 17px; /* 106.25% */
  letter-spacing: 0.8px;
}

.login-part {
  display: flex;
  padding: 8px 40px 40px 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

/* Desktop view*/
@media only screen and (min-width: 768px) {
  .login-display {
    min-width: 850px;
    min-height: 800px;
  }
  .login-login {
    display: flex;
    flex-direction: row;
    border-radius: 4px;
    background: rgba(13, 10, 56, 0.71);
    box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25);
    align-items: center;
    justify-content: start;
    width: 50vw;
    height: 60vh;
    min-height: 400px;
    min-width: 500px;
  }

  .login-image {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-radius: 8px;
    border: 5px solid var(--Rotkehlchen-gray-default);
    background-image: url("../public/assets/images/IceBirdLogin.jpg");
    background-size: cover;
    background-position: 75%;
  }

  .signup-image {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-radius: 8px;
    border: 5px solid var(--Rotkehlchen-gray-default);
    background-image: url("../public/assets/images/SummerOwlSignup.jpg");
    background-size: cover;
    /*background-position: 75%;*/
  }

  .login-part {
    width: 45%;
    height: 90%;
    padding: 3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
  }
}