body, main {
 position: relative;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-height: 100vh;
  max-height: fit-content;
  font-family: "Lucida Sans Unicode";

}
/*<<<< IMAGEN DE FONDO>>>>*/
body.crear-cuenta-img {
 background: url(../../img/users/crear_cuenta.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  
}

div,
nav,
ul,
i,
h1,
img {
box-sizing: border-box;
}


/*<<<< BASES SESSION REGISTER / STYLES >>>>*/


  
/*<<<< FORMULARIO DE REGISTRO>>>>*/
 .crear-cuenta-form {
position: relative;
display: flex;
flex-direction:column;
justify-content:space-evenly;
height: fit-content;
gap: 30px;
align-self: center;
margin-top: 10%;
margin-bottom: 10%;
width: 87%;
padding: 25px 18px;
background-image: linear-gradient(#000d1dea,#243332e7);
border-radius: 12px;
text-decoration-color: #000000;
box-shadow: -1px 1px 5px rgba(172, 252, 255, 0.938);
font-weight: lighter !important;
font-family: "Lucida Sans Unicode";
text-align: center;
animation: aparecer both;
animation-timeline: view();
animation-range: cover 20% contain 40%;
 }


 .crear-cuenta-tittle{
     font-family: inherit;
     font-size: clamp(1.2rem, 2vw, 2rem) !important;
     color: #ffffff !important;
     text-shadow: -1px 1px 1px black,-1px 1px 1px black;
     font-weight: lighter !important;
 }

.input-container{
color: #ffe876;
 font-size: clamp(1rem, 2vw, 1rem);
padding: 0;
font-weight: lighter;
text-shadow: -1px 1px 1px black,-1px 1px 1px black;
margin-bottom: 0%;
 }

 input {
display: flex;
 flex-direction: column;
 margin: auto;
 width: 89%;
 margin-top: 10px;
 margin-bottom: 10px;

background: linear-gradient( #c9ffffd3,#f7feffde) !important;
border-radius: 8px;
color: rgb(5, 1, 37);


font-size: 16px !important;
padding: 6px  8px;
 font-weight:lighter !important;
}

/*<<<< OJOS DE LOS INPUT >>>> */
.password-wrapper-register {
 position: relative; 
}

.toggle-password-signUp {
  position: absolute;
  right: 22px;
  bottom: 17px; 
  cursor: pointer;
  display: flex;
  align-items: center;
color: #007e2a; 
  transition: color 0.2s ease;
}


.toggle-password-signUp:hover {
color: #7a0014; 
}

/*<<<< BOTONES DEL FORMULARIO  >>>>*/

.btn__section__register{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 15px;
  align-items: center;
width:max-content ;
align-self: center;

}
.crear-cuenta-button-cc{
  background-color: #00f94fc5;
  color: rgba(255, 255, 255, 0.888);
  outline: 1px solid rgba(255, 255, 255, 0.809);
  text-shadow: -1px 1px 1px #000000;
  font-weight:lighter;
  text-decoration: none;
  padding: 7px 50px;
  margin: auto;
  border-radius: 10px;
  transition: background-color 1s, border-radius 0.8s, outline 0.7s,
  outline-offset 0.5s;
  outline: 0;
  outline-offset: 0;
  font-size: 16px;
 

}

.crear-cuenta-button-cc:hover  {
   background-color: rgba(0, 0, 0, 0.242);
  outline: 2px solid rgba(0, 255, 94, 0.596);
  color: rgb(22, 255, 119);
  text-shadow: -1px 1px 1px #000000;
  border-radius: 25px;
  box-shadow: 0px 0px  20px rgb(84, 250, 134);
}

.iniciar-sesion-button-cc {
  background-color: #06bfcce7;
   color: rgba(255, 255, 255, 0.888);
  outline: 1px solid rgba(0, 0, 0, 0.809);
  text-shadow: -1px 1px 1px #000000;
  font-weight: lighter;
  text-decoration: none;
  padding: 4px 39px;
  margin:auto;
 border-radius: 10px;
  transition: background-color 1s, border-radius 0.8s, outline 0.7s,
  outline-offset 0.5s;
  outline: 3;
  outline-offset: 0;
  font-size: 16px;
}
.iniciar-sesion-button-cc:hover {
  background-color: rgba(0, 0, 0, 0.242);
  outline: 2px solid rgba(0, 255, 251, 0.596);
  color: rgb(207, 248, 255);
  text-shadow: -1px 1px 1px #000000;
  box-shadow: 0px 0px  20px rgb(84, 153, 250);
 
 border-radius: 25px;
 

} 
/*<<<< BASES SESSION REGISTER / STYLES / END >>>>*/
/*___________________________________________________*/




/*----------> <<<< REGISTERS STYLES QUERIES >>>> <-----------*/
/* ___________________________________________________________*/


@media screen and (min-width: 600px) {

/*<<<< FORMULARIO >>>>*/
 .crear-cuenta-form {
gap: 30px;
margin-top: 5%;
margin-bottom: 5%;
width: 28%;
padding: 25px 8px;
 }

 .crear-cuenta-tittle{
     font-size: clamp(1.2rem, 2vw, 1.8rem) !important;
     margin-top: 30px;
   
 }

.input-container{
 font-size: clamp(1rem, 2vw, 1.2rem);
 }

 input {
 margin: auto;
 width: 70%;
font-size: 18px !important;
padding: 7px  10px;

}

/* <<<<  INPUT >>>>*/

.toggle-password-signUp {
    right: 75px;             
  top: 67%;
}



/*------------------>  <<<< FORM REGISTER BUTTONS >>>> <------------------*/

.btn__section__register{
  gap: 10px;
}

.crear-cuenta-button-cc{
  padding: 8px 60px;
  font-size: 17px;
}

.iniciar-sesion-button-cc {
  padding: 4px 48px;
  font-size: 17px;
}

 /*----------> <<<<  FORM REGISTER BUTTONS / ENDS >>>  <-----------*/

}