@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Merriweather+Sans:ital,wght@0,300..800;1,300..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Varta:wght@300..700&display=swap');


*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* :root {
  font-size: 10px;

  --color-primary: rgb(248, 250, 252);
  --color-septenary: rgb(59, 130, 246);

  --color-quaternary-m-l: hsla(192, 40%, 42%, 0.1);
  --color-quaternary-m-d: hsla(192, 40%, 42%, 0.8);

  --color-quinary: rgb(53, 54, 56);

  --padding-xl-h: calc(1.5rem + 1vw);
  --padding-xl-v: calc(0.1rem + 3vh);

  --padding-s-h: calc(1rem + 2vw);

  --padding-l-h: calc(3rem + 3vw);
  --padding-l-v: calc(3rem + 3vh);

  --font-size-st-l: 3rem;
  --font-size-st-m: 2rem;
  --font-size-st-s: 1.5rem;
  --font-size-st-xs: 1rem;

  --font-family-sub: "Varta", sans-serif;
} */

body {
  background-color: #000;
}

h2{
  font-family: 'Montserrat';
  font-size: 24px;
}
h3{
  font-family: 'Montserrat';
  font-size: 20px;
}
h4{
  font-family: 'Montserrat';
  font-size: 16px;
}
div, p, span{
  font-family: 'Roboto';
  font-size: 15px;
}
form{
  font-family: 'Varta';
  font-size: 15px;
}

button, a, input[type="submit"]{
  font-family: 'Lato';
  font-size: 16px;
  font-weight: bold;
}
a{
  text-decoration: none;
  color: inherit;
}

@media screen and (max-width: 600px) {
  h2{
    font-size: 20px;
  }
  h3{
    font-size: 18px;
  }
  h4{
    font-size: 15px;
  }
  div, p, span{
    font-size: 13px;
  }
  form{
    font-size: 13px;
  }
  
  button, a, input[type="submit"]{
    font-size: 14px;
  }
}

/* ----------------------------------  generality ends here ------------------------------------- */




#sign-in-container {
  padding: 3.5rem 6rem;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}


/* main signup starts here */
.sign-in{
  flex-basis: 55%;
}

.all_signup{
  background: #fff;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.signup_image{
  width: 60px;
  height: 70px;
  margin-bottom: 3rem;
}
.signup_image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sign-in__form{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  font-family: 'Varta';
  width: 100%;
}
.form_unit{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
.form_unit label{
  color: #536479;
  width: 100%;
}
.form_unit input{
  width: 100%;
}
.form_unit input, .dual_unit select, .dual_unit select, .dual_unit select>option, input[type="number"]{
  border: none;
  outline: none;
  background: none;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.7);
  color: rgba(0,0,0,0.8);
  font-family: 'Roboto';
}
.dual_unit{
  margin: 1rem 0;
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 10px;
}
.dual_unit select, .dual_unit input{
  width: 100%;
}
.dual_unit select{
  cursor: pointer;
}
.sign-in__form input[type="submit"]{
  margin: 1rem 0;
  padding: 10px 0;
  /* background: #bf5c39; */
  background: linear-gradient(to bottom right, chocolate, #bf5c39, #853734);
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
}
.other_option{
  background: none;
  border: none;
  outline: none;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.other_option a{
  color: #853734;
  transition: all ease-in-out 0.4s;
}
.other_option a:hover{
  color: chocolate;
}

.signup_msg{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
}
.msg_para{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.signup-icon{
  width: 60px;
  height: 80px;
}
.signup-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.signup_sidetext{
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.signup_sidetext h4{
  letter-spacing: 2px;
  word-spacing: 2px;
  color: chocolate;
}
.home{
  color: chocolate;
  text-align: center;
  background: none;
  outline: none;
  border: solid 1.5px chocolate;
  width: 50%;
  padding: 10px 0;
  margin-top: 2.2rem;
  border-radius: 5px;
  cursor: pointer;
}





@media screen and (max-width: 600px) {
  #sign-in-container{
    padding: 2rem 1rem;
    flex-direction: column-reverse;
    gap: 2rem;
  }
 .home{
    display: none;
  }
  .signup_image{
    width: 40px;
    height: 50px;
    margin-bottom: 1.5rem;
  }
  .sign-in{
    flex-basis: 100%;
  }
  .all_signup{
    padding: 1.5rem 1rem;
  }
  .dual_unit select option{
    font-size: 10px;
  }
  .signup_msg{
    justify-content: center;
    align-items: center;
  }
  .msg_para{
    align-items: center;
  }
  .signup-icon{
    width: 40px;
    height: 60px;
  }
  .signup_sidetext{
    text-align: center;
  }
  /* this is for login alone */
  .login_alone{
    width: 360px;
  }
}