@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,400;1,500&display=swap");
/*color variables*/

* {
  font-family: "Ubuntu", sans-serif;
}
.login_container {
  margin: 0 auto;
  width: 100vw;
  height: 100dvh;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, minmax(80px, auto));
}

.Login {
  background-color: #fcfbfb;
  grid-column: 1/4;
  grid-row: 1/7;
  display: grid;
  /*grid-template-columns: repeat(6, auto);
  grid-template-rows: repeat(6, 1fr);*/
  justify-content: center;
  align-content: center;
}

.Illustration {
  background-color: #fcfbfb;
  grid-column: 4/7;
  grid-row: 1/7;
}

.Illustration > embed {
  align-self: end;
  position: relative;
  left: -20%;
}

footer {
  grid-column: 1/7;
}

.form-container {
  /*grid-column: 3/5;
  grid-row: 3/5;
  background: rgba(255, 225, 255, 0.2);
  border-radius: 5px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);*/
  border: 1px solid rgba(255, 255, 255, 0.32);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.brand-login {
  max-width: 200px;
  height: auto;
  margin-bottom: 24px;
}

.formGroup {
  padding: 8px;
  padding-bottom: 8px;
}
.formGroup > label {
  margin-bottom: 8px;
  font-weight: 600;
}

.formGroup > input {
  height: 32px;
  min-width: 350px;
  margin-top: 8px;
  padding-left: 8px;
  transition: all 0.5s ease;
}

.formGroup > input:focus {
  border: 1px solid #f29124;
  box-shadow: rgba(119, 67, 7, 0.3) 0px 7px 29px 0px;
  height: 35px;
}

.primary {
  text-align: center;
  height: 40px;
  background-color: #f29124;
  border: 1px solid #e27c09;
  min-width: 355px;
  border-radius: 5px;
  color: white;
  font-weight: 600;
  margin-top: 8px;
  box-shadow: rgba(119, 67, 7, 0.3) 0px 7px 29px 0px;
  transition: box-shadow 0.75s ease-out;
}
.primary:hover {
  background-color: #dd831c;
  box-shadow: rgba(120, 67, 8, 0.2) 0px 2px 8px 0px;
}

.secondary {
  height: 40px;
  background-color: transparent;
  color: #f29124;
  border: 1px solid #f29124;
  font-weight: 600;
  text-align: center;
  min-width: 355px;
  padding-left: 8px;
  border-radius: 5px;
}

.borderless {
  border: none;
}
@media screen and (max-width: 760px) {
  .login_container {
    margin: 0 auto;
    max-width: 760px;
    height: 100dvh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "login login login login"
      "login login login login"
      "login login login login"
      "login login login login"
      "login login login login"
      "login login login login"
      "login login login login"
      "art art art art"
      "art art art art"
      "art art art art"
      "art art art art"
      "art art art art"
      "art art art art"
      "footer footer footer footer";
    grid-auto-rows: minmax(100px, auto);
  }

  .Login {
    grid-area: login;
    background-color: #fcfbfb;
    display: grid;
    justify-content: center;
    align-content: center;
  }

  .form-container {
    margin-top: 50px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 16px;
  }

  .Illustration {
    grid-area: art;
    background-color: #fcfbfb;
  }

  .Illustration > embed {
    align-self: end;
    justify-self: center;
    width: 100%;
    overflow: hidden;
    position: relative;
    left: 10px;
  }

  footer {
    grid-area: footer;
  }

  .formGroup > input {
    height: 32px;
    width: 80%;
    margin-top: 8px;
    padding-left: 8px;
    transition: all 0.5s ease;
  }
}