h1{
    text-align: center;
    color: #406346;
    font-family: inter;
}
/*div contenant le formulaire*/
#div-form{
    display:flex;
    justify-content: center;
    align-items: center;
}
form{  
    display:flex;
    flex-direction:column;
    justify-content: space-around;
    align-items: center;
    margin:auto;
    width:40%;
    margin: 2% 0 8% 0; 
    box-shadow: rgb(0 0 0 / 20%) 0px 60px 40px -7px;
    background-color: #B9CCA6;
    border-radius: 8px;
    padding: 2% 0 3% 0;
}
.success-password{
    color:green;
    font-size: 1em;
    font-style: italic;
}
.span{
    font-size: 1em;
    font-style: italic;
    color: rgba(128, 0, 0, 0.801);
    
}
label{
    color: #406346;
    font-weight: 600;
    text-align: center;
    font-family: inter;
}
input{
    width: 50%;
    padding: 15px;
    border:1px solid black;
    outline: none;
    border-radius: 4px;    
}

 /* début des yeux sur input*/
#eyeshow  {
    float: right;
    margin-left: 43%;
    margin-top: -32px;
    position: relative;
    z-index: 2;
    font-size:1em;
    margin-bottom:2.6%;
  
  }
 
  #eyeshow:hover{
    text-shadow: none;
  }
  .toggle-password {
    cursor: pointer;
  }

  #eyehide  {
    float: right;
    margin-left: 43%;
    margin-top: -32px;
    position: relative;
    z-index: 2;
    font-size:1em;
    margin-bottom:2.6%;
   
  }
  #eyehide:hover{
    text-shadow: none;
  }
  #eyeshow2  {
    float: right;
    margin-left: 43%;
    margin-top: -32px;
    position: relative;
    z-index: 2;
    font-size:1em;
    margin-bottom:2.6%;
   
  }
  #eyeshow2:hover{
    text-shadow: none;
  }
  .toggle-password {
    cursor: pointer;
  }

  #eyehide2  {
    float: right;
    margin-left: 43%;
    margin-top: -32px;
    position: relative;
    z-index: 2;
    font-size:1em;
    margin-bottom:2.6%;
 
  }
  #eyehide2:hover{
    text-shadow: none;
  }
  /* Fin des yeux sur input*/
  
  /*message php d'erreur*/
#red{
    font-size: 1em;
    font-style: italic;
    color: rgba(128, 0, 0, 0.801);
    display:none;
}
button{
    color: white;
    background-color: #406346;
    margin-top:4%;
    font-size: 1em;
    border-radius:15px;
    font-weight: 600;
    width:30%;
    padding:11px 5px 11px 5px;
    border: #406346;
}
button:hover{
    background-color:#D2B876;
    box-shadow: rgb(0, 0, 0) 0px 10px 20px -7px;
    border: #D2B876;
}
#bouton-envoyer{
        text-align: center;
        width:100%;
    }

/*message de confirmation de compte*/
.confirm-compte{
 color:yellow;   
}

  
  

 

  /*Media Queries*/
  
  
  @media (max-width:900px) {   
    
    
  form{
    width:60%;
  }
    
  }
  
  
  @media (max-width:665px){
  
 
  #red{
    font-size:0.8em
  }
   
  form{
    width:90%;
    margin-bottom:18%;
    padding:7% 0 7% 0 ;
  }
  h1{
    margin-top:7%;
    margin-bottom:5%;
    font-size: 1.5em;
  }
  button{
    width:38%;
  }
  input{
    width: 70%;
    padding: 10px;
  
  }
   #eyehide  {
    margin-top: -26px;
      margin-left: 63%;
      margin-bottom:2.2%;
    }
    #eyeshow  {
      margin-top: -26px;
      margin-left: 63%;
      margin-bottom:2.2%;
    }
    #eyehide2  {
      margin-top: -26px;
      margin-left: 63%;
      margin-bottom:2.2%;
    }
    #eyeshow2  {
      margin-top: -26px;
      margin-left: 63%;
      margin-bottom:2.2%;
    } 
  
  }
 @media (max-width:365px){
     
      #eyehide  {
    margin-top: -26px;
      margin-left: 60%;
      margin-bottom:2.2%;
    }
    #eyeshow  {
      margin-top: -26px;
      margin-left: 60%;
      margin-bottom:2.2%;
    }
    #eyehide2  {
      margin-top: -26px;
      margin-left: 60%;
      margin-bottom:2.2%;
    }
    #eyeshow2  {
      margin-top: -26px;
      margin-left: 60%;
      margin-bottom:2.2%;
    } 
 }
  
  @media (max-width:321px){

  button{
    width:40%;
  }
  }
  
 
  /*hauteur*/
    
  
  @media (max-height:391px){
    #eyehide  {
    margin-top: -26px;
      margin-left: 62%;
      margin-bottom:2.4%;
    }
    #eyeshow  {
      margin-top: -26px;
      margin-left: 60%;
      margin-bottom:2.4%;
    }
      #eyehide2  {
      margin-top: -26px;
      margin-left: 60%;
      margin-bottom:2.2%;
    }
    #eyeshow2  {
      margin-top: -26px;
      margin-left: 62%;
      margin-bottom:2.2%;
    } 
  }
  
  
  @media(max-height:321px){
    
   
  }
  @media(max-height:310px){
     #eyehide  {
    margin-top: -26px;
      margin-left: 57%;
      margin-bottom:2.4%;
    }
    #eyeshow  {
      margin-top: -26px;
      margin-left: 57%;
      margin-bottom:2.4%;
    }
      #eyehide2  {
      margin-top: -26px;
      margin-left: 57%;
      margin-bottom:2.2%;
    }
    #eyeshow2  {
      margin-top: -26px;
      margin-left: 57%;
      margin-bottom:2.2%;
    } 
   
  }