/* This container centers the contents in monitor viewport😎 
horizontally and vertically gotta think 
screen sizes yo!
*/
.monitor-container{
  min-height: 100vh;
  display: grid;
  place-items: center;
  
}



/* container being centered by monitor-container */
.container{
   width: 100%;
   max-width: 1300px;
   padding: 1em;
   align-items: center;
   position: relative;
  
}



h1{
    font-size: clamp(1.2rem, 3vw, 1.8rem); /* Between 19px and 28px */
}

main{
  width: 40%;
  padding: .5em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

aside{
  width: 50%;
    border-radius: 2rem;
    padding: 4em 3em;
    background-color: var(--lighter-blue);
    display: grid;
    place-items: center;
    background-image: url(/images/auth-background.jpg);
}

.form-container{
 width: 100%;
 padding: .5em;
 display: flex;
 justify-content: center;
 overflow: hidden;
 position: relative;
}

form {
  opacity: 1;
  width: 100%;
  max-width: 400px;
  transform: translateY(0);
  transition: all 0.5s ease;

}

form.hidden{
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  /* transform: translateX(-100%); */
  opacity: 0;
}

form.hidden-left{
   position: absolute;
  visibility: hidden;
  pointer-events: none;
  /* transform: translateX(200%); */
  opacity: 0;
}




form input {
   display: block;
   width: 100%;
   padding: .75em 1.2em;
   border-radius: .2rem;
   border: 1px solid var(--steel-blue);
   outline: none;
   transition: all 550ms ease;
   background-color: var(--white);
   position: relative;
   z-index: 2;
   margin: 0 ;
}

form input:focus{
  outline: none;
  border: 1px solid var(--primary-blue);
}

form  small{
 margin-left: 0em;
 color: var(--crimson-red);
 font-weight: 300;
 height: 20px;
 display: inline-block;
 transform: translateY(-20px); 
 transition: all 550ms ease;
 width: 100%;
 opacity: 0;
 visibility: hidden;
}


form button{
  width: 100%;
  margin: 1em;
}

form p{
  margin: 0;
}

.password-container{
  position: relative;
    display: grid;
}


.password-container button{
   position: absolute;
   z-index: 5;
   width: 22px;
   padding: 0;
   aspect-ratio: 1;
   place-self: end;
   margin: 0 1em;
   margin-bottom: 2.2em;
   background-image: url(/icons/eye=icon.png);
}

.sign-up-password-container{
  position: relative;
    display: grid;
}

.sign-up-password-container button{
   position: absolute;
   z-index: 5;
   width: 22px;
   padding: 0;
   aspect-ratio: 1;
   place-self: end;
   margin: 0 1em;
   margin-bottom: .6em;
   background-image: url(/icons/eye=icon.png);
}

.show-hide-password-icon-btn.visible{
  background-image: url(/icons/visibility-eye-icon.png);
}

.sign-up-show-hide-password-icon-btn.visible{
   background-image: url(/icons/visibility-eye-icon.png);
}


.sign-up-img-container{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 1em 0;
  margin-top: 1.5em;
}

.sign-up-password-error{
  height: 0px;
  overflow: hidden;
  transform: translateY(-20px);
  transition: all 300ms ease ;
}





#sign-in-form {
  z-index: 2;
}

#sign-up-form {
  z-index: 1;
}




aside div{
  max-width: 400px;
  box-shadow: 3px 3px 5px var(--light-grey);
  border-radius: 2rem;
  padding: 1em 1.5em;
  background-color: var(--white);
}

aside div p{
  color: var(--light-grey);
}

.check-box-container input{
  width: fit-content;
  margin-right: 1em;
}
.check-box-container{
  justify-content: start;
  width: 100%;
  margin: 0;
}





/* class lists   for javascript*/
.show-input-error{
  opacity: 1;
  visibility: visible;
transform: translateY(0px); 
}
.error-border{
  border: 1px solid var(--crimson-red);
}

.sign-up-password-error.show{
  height: auto;
  overflow:visible;
  transform: translateY(0px);
}


@media(max-width: 1050px){
   aside{
      display: none;
   }
   main{
    width: 100%;
    min-height: 100svh;
    justify-content: space-evenly;
   }
}