body{
    background-color: rgb(227, 235, 240);
    font-family: "Roboto", Arial, sans-serif;
     color:hsl(50, 16%, 45%);
}


/*==================================start creation compte3=================================*/
#mere_creation_compte3 {
            display: flex;
            justify-content: space-between;
           margin: 5% 10%;
            margin-top:100px;
            margin-bottom:200px;
}
#fille1_creation_compte3{
    text-align:center;
    
    
}

#id_menue_creer3{
    font-size:60px;
    color:hsl(51, 87%, 37%); 
}
#fille2_creation_compte3{
    background-color:rgb(248, 255, 255);
    text-align:center;
    width: 80%;
    max-width: 430px;
    margin: 0 auto;
    height:200px;
    border-radius: 5%;
}

#form_creat_compt3{
   margin-top:10px; 
   text-align:center;
   margin-bottom:10px;
    
}

#form_creat_compt3 input[type="password"],
#form_creat_compt3 input[type="date"],
#id_select_sex3,
#form_creat_compt input[type="password"] {
  width:350px;
  height:40px;
  margin-top:5px;
  margin-bottom:5px;
  background-color: white;
  font-size:18px;
  color:hsl(50, 16%, 45%);
  border-radius: 5%;
}
#form_creat_compt3 input[type="submit"] {
  width:350px;
  height:50px;
  margin-top:5px;
  margin-bottom:20px;
  background-color:hsl(51, 87%, 37%);
  font-size:25px;
  color:hsl(50, 16%, 45%);
  border-radius: 15%;
}
#form_creat_compt3 input[type="submit"]:hover {
  
  background-color:hsl(51, 89%, 42%);
  color:white;
  
}
/*==============================end creation compt3=====================================*/

/*==================================start creation compte2=================================*/
#mere_creation_compte2 {
            display: flex;
            justify-content: space-between;
           margin: 5% 10%;
            margin-top:100px;
            margin-bottom:200px;
}
#fille1_creation_compte2{
    text-align:center;
    
    
}

#id_menue_creer2{  
    font-size:50px;
    color:hsl(51, 87%, 37%); 
}
#fille2_creation_compte2{
    background-color:rgb(248, 255, 255);
    text-align:center;
    width: 80%;
    max-width: 430px;
    margin: 0 auto;
    height:140px;
    border-radius: 5%;
}

#form_creat_compt2{
   margin-top:10px; 
   text-align:center;
   margin-bottom:10px;
    
}

#form_creat_compt2 input[type="text"],
#form_creat_compt2 input[type="date"],
#id_select_sex2,
#form_creat_compt input[type="password"] {
  width:350px;
  height:40px;
  margin-top:5px;
  margin-bottom:5px;
  background-color: white;
  font-size:18px;
  color:hsl(50, 16%, 45%);
  border-radius: 5%;
}
#form_creat_compt2 input[type="submit"] {
  width:350px;
  height:50px;
  margin-top:5px;
  margin-bottom:20px;
  background-color:hsl(51, 87%, 37%);
  font-size:25px;
  color:hsl(50, 16%, 45%);
  border-radius: 15%;
}
#form_creat_compt2 input[type="submit"]:hover {
  
  background-color:hsl(51, 89%, 42%);
  color:white;
  
}
/*==============================end creation compt2=====================================*/


/*==================================start creation compte1=================================*/
#mere_creation_compte {
            display: flex;
            justify-content: space-between;
           margin: 5% 10%;
            margin-top:100px;
            margin-bottom:200px;
}
#fille1_creation_compte{
    text-align:center;
    
    
}
#id_menue_creer{
    font-size:60px;
    color:hsl(51, 87%, 37%); 
}
#fille2_creation_compte{
    background-color:rgb(248, 255, 255);
    text-align:center;
    width: 80%;
    max-width: 430px;
    margin: 0 auto;
    height:340px;
    border-radius: 5%;
}

#form_creat_compt{
   margin-top:10px; 
   text-align:center;
   margin-bottom:10px;
    
}

#form_creat_compt input[type="text"],
#form_creat_compt input[type="date"],
#id_select_sex,
#form_creat_compt input[type="password"] {
  width:350px;
  height:40px;
  margin-top:5px;
  margin-bottom:5px;
  background-color: white;
  font-size:18px;
  color:hsl(50, 16%, 45%);
  border-radius: 5%;
}
#form_creat_compt input[type="submit"] {
  width:350px;
  height:50px;
  margin-top:5px;
  margin-bottom:20px;
  background-color:hsl(51, 87%, 37%);
  font-size:25px;
  color:hsl(50, 16%, 45%);
  border-radius: 15%;
}
#form_creat_compt input[type="submit"]:hover {
  
  background-color:hsl(51, 89%, 42%);
  color:white;
  
}
#id_code-teleph{
    position:inline;
}
#code-pays{
    width:175px;
    height:50px;
}
#telephone{
    width:175px;
    height:50px; 
}
/*==============================end creation comptr 1=====================================*/

/*==*=============================index start=========================================*/
#id_message_erreur{
    color:red;
}
#id_div_header{  
  text-align:center;
}
#id_p_footer{
    text-align:center;
    color:white;
    font-size:15px;
    background-color: rgba(18, 19, 19, 0.233);
    margin-bottom:0px;
}
#id_image_footer{
    width:55px;height:55px;border-radius:50%;
}
#div_index_mere {
            display: flex;
            justify-content: space-between;
           margin: 5% 10%;
            margin-top:150px;
            margin-bottom:200px;
}
#div_index_fille1{
    text-align:center;
    
}
#div_index_fille2{
    background-color:rgb(248, 255, 255);
    text-align:center;
    width: 80%;
    max-width: 400px;
    margin: 0 auto;
    height:315px;
    border-radius: 5%;
}

#id_form_log{
   margin-top:10px; 
   text-align:center;
   margin-bottom:10px;
    
}
#id_form_log input[type="text"],
#id_form_log input[type="password"] {
  width:350px;
  height:50px;
  margin-top:5px;
  margin-bottom:5px;
  background-color: white;
  font-size:18px;
  color:hsl(50, 16%, 45%);
  border-radius: 5%;
}
#id_form_log input[type="submit"] {
  width:350px;
  height:50px;
  margin-top:5px;
  margin-bottom:20px;
  background-color:hsl(51, 87%, 37%);
  font-size:25px;
  color:hsl(50, 16%, 45%);
  border-radius: 15%;
}
#id_form_log input[type="submit"]:hover {
  
  background-color:hsl(51, 89%, 42%);
  color:white;
  
}
#id_img_logo {
width:150px;height:150px;border-radius:50%;
 border: 5px solid hsl(51, 89%, 42%);
 text-align:center;
}
#id_rulugram_index{
    font-size:60px;
    color:hsl(51, 87%, 37%);
}
#id_text_index{
    font-size:25px;
   
}
#id_mod_depss_oublie{
    color:hsl(51, 87%, 37%);
    text-decoration:none;
    margin-top:0px;
    margin-bottom:20px;
    display:inline-block;
    
}

#id_mod_depss_oublie:hover{

    text-decoration:underline;
    
}
#id_creer_compter{
  width:300px;
  height:40px;
  margin-top:10px;
  background-color:hsl(135, 65%, 43%);
  font-size:23px;
   color:hsl(50, 16%, 45%);
   border-radius: 15%;
   text-decoration:none;
    
  
}

#id_creer_compter:hover{
  background-color:hsl(135, 86%, 47%);
  color:white;
   font-size:23px;
  
}
#id_crer_page{
    margin-top:70px;
}
#id_A_crer_pgage{
    text-decoration:none;
    color:hsl(135, 86%, 47%);
}
#id_A_crer_pgage:hover{
    text-decoration:underline;
}
/*==*=============================index end=========================================*/
/*===========================Smartphones (portrait and landscape) rgb(227, 235, 240);========================*/

@media screen and (min-device-width : 320px) and (max-device-width : 480px),
       screen and (min-width: 540px) and (max-width: 720px) {
 /*==*=============================creation compte 3 @madia screer start=========================================*/ 
    #mere_creation_compte3 {
                display: inline;
                text-align:center;
                margin-bottom:400px;
                
                

    }
    #id_menue_creer2{
        font-size:40px;
    }
#form_creat_compt3 input[type="text"],
#form_creat_compt3 input[type="date"], 
#id_select_sex3,
#form_creat_compt3 input[type="password"] {
  width:300px;
  height:40px;
  margin-top:5px;
  margin-bottom:5px;
  background-color: white;
  font-size:18px;
  color:hsl(50, 16%, 45%);
  border-radius: 5%;
  border: 2px solid hsl(50, 16%, 45%);
}


#form_creat_compt3 input[type="submit"] {
  width:300px;
  height:50px;
  margin-top:5px;
  margin-bottom:20px;
  background-color:hsl(51, 87%, 37%);
  font-size:25px;
  color:hsl(50, 16%, 45%);
  border-radius: 15%;
}
#fille2_creation_compte3{
   
    height:170px;
   
}
/*==*=============================cretion compte 2 @madia screer end=========================================*/    
               
 /*==*=============================creation compte 2 @madia screer start=========================================*/ 
    #mere_creation_compte2 {
                display: inline;
                text-align:center;
                margin-bottom:400px;
                
                

    }
    #id_menue_creer2{
        font-size:33px;
    }
#form_creat_compt2 input[type="text"],
#form_creat_compt2 input[type="date"], 
#id_select_sex2,
#form_creat_compt2 input[type="password"] {
  width:300px;
  height:40px;
  margin-top:5px;
  margin-bottom:5px;
  background-color: white;
  font-size:18px;
  color:hsl(50, 16%, 45%);
  border-radius: 5%;
  border: 2px solid hsl(50, 16%, 45%);
}


#form_creat_compt2 input[type="submit"] {
  width:300px;
  height:50px;
  margin-top:5px;
  margin-bottom:20px;
  background-color:hsl(51, 87%, 37%);
  font-size:25px;
  color:hsl(50, 16%, 45%);
  border-radius: 15%;
}
#fille2_creation_compte2{
   
    height:120px;
   
}
/*==*=============================cretion compte 2 @madia screer end=========================================*/    
    
/*==*=============================creation compte 1 @madia screer start=========================================*/ 
    #mere_creation_compte {
                display: inline;
                text-align:center;
                margin-bottom:400px;
                
                

    }
    #id_menue_creer{
        font-size:40px;
    }
#form_creat_compt input[type="text"],
#form_creat_compt input[type="date"], 
#id_select_sex,
#form_creat_compt input[type="password"] {
  width:300px;
  height:40px;
  margin-top:5px;
  margin-bottom:5px;
  background-color: white;
  font-size:18px;
  color:hsl(50, 16%, 45%);
  border-radius: 5%;
  border: 2px solid hsl(50, 16%, 45%);
}


#form_creat_compt input[type="submit"] {
  width:300px;
  height:50px;
  margin-top:5px;
  margin-bottom:20px;
  background-color:hsl(51, 87%, 37%);
  font-size:25px;
  color:hsl(50, 16%, 45%);
  border-radius: 15%;
}

#code-pays{
    width:150px;
    height:50px;
}
#telephone{
    width:150px;
    height:50px; 
}
/*==*=============================cretion compte 1 @madia screer end=========================================*/ 
 /*==*=============================index @madia screer start  =========================================*/   
    

    #id_text_index{
        display:none;
 
    } 
   
    #div_index_mere {
                display: inline;
                text-align:center;
                margin-bottom:400px;
                
                

    }
    #div_index_fille2{
    height:295px;
    margin-bottom:200px;
    width:90%;
    
    
    text-align:center;
    }

    #id_img_logo {
    width:100px;height:100px;border-radius:50%;
    }
    #id_rulugram_index{
        font-size:40px;
    }
    #id_creer_compter{
      font-size:19px;
      width:100px;
    
    }
     #id_creer_compter:hover{
      font-size:19px;
      width:100px;
    
    }
        
#id_form_log input[type="text"],
#id_form_log input[type="password"] {
  width:300px;
  height:45px;
  
  
}
#id_form_log input[type="submit"] {
  width:200px;
  height:45px;

  background-color:hsl(51, 87%, 37%);
  font-size:18px;
  
}
#id_form_log{
   margin-top:10px; 
   text-align:center;
   margin-bottom:10px;
    
}
/*==*=============================index @madia screer end=========================================*/      
    
}

	/*------------------------------------------------------------*/