/* Définition des variables CSS pour une meilleure réutilisation et maintenance */
:root {
--main-bg-color: #5AE4A8;
--main-font: sans-serif;
--main-font-color: #000000;
--input-bg-color: #303245;
--input-font-color: #eee;
--submit-bg-color: #363636;
--submit-font-color: #eee;
--link-color: blue;
}

    /* Styles pour le formulaire */
    .form {
        height: 2000px; 
        width: 80%; 
    }

    
    /* Styles spécifiques pour le titre */
    .title {
        font-size: 55px;
        padding-top: 25px;
        padding-bottom: 10px;
    }
    
    /* Styles spécifiques pour le sous-titre */
    .subtitle {
    font-size: 40px;
    }
    
    
    .input-container 
    {
        margin-top: 1em; 
    }
    
    .input
    {
        height: 100px;
        margin-left: auto;
        margin-right: 25px;
    }
        
    .input-container select {
        width: 95%; 
        height: 140px; 
        padding: 10px; 
    
    }
    
    .placeholder_form {
        padding-left: 10px;
    }
@media screen and (min-width: 1024px) {
    
    /* Définition des variables CSS pour une meilleure réutilisation et maintenance */
    :root {
    --main-bg-color: #5AE4A8;
    --main-font: sans-serif;
    --main-font-color: #000000;
    --input-bg-color: #303245;
    --input-font-color: #eee;
    --submit-bg-color: #363636;
    --submit-font-color: #eee;
    --link-color: blue;
    }
    
        /* Styles pour le formulaire */
        .form {
        height: 1200px; 
        }
    
        
        /* Styles spécifiques pour le titre */
        .title {
        font-size: 25px;
        padding-top: 25px;
        }
        
        /* Styles spécifiques pour le sous-titre */
        .subtitle {
        font-size: 15px;
        }
        
        .input
        {
            height: 30px;
        }
            
        .input-container select {
            width: 350px; 
            height: 70px; 
            padding: 10px;
        
        }
        .placeholder_form {
            padding-left: 0px;
        }
    
}
    /*
    @media only screen and (max-device-width: 375px) and (max-device-height: 667px) {
        
        body {
          height: 150vh;
        }
        
        .creation-title {
          margin-top: 90%; 
        }
        
        .form {
          margin-bottom: 1%;
          height: 70%;
        }
    
        .title, .subtitle {
          margin-top: 1%;
        }
    }
    
      @media only screen and (max-device-width: 412px) and (max-device-height: 915px) {
        .body {
          height: 100vh;
        }
    
        .creation-title {
          margin-top: 40%;
        }
        .form{
          margin-bottom: 1%;
          height: 70%;
    
        }
    
        .title, .subtitle {
          margin-top: 1%;
        }
      }
      
      @media only screen and (max-device-width: 430px) and (max-device-height: 932px) {
        .body {
          height: 100vh;
        }
        
        .creation-title {
          margin-top: 20%;
        }
        .form{
          margin-top: 2%;
          margin-bottom: 11%;
          height: 80%;
        }
    
        .title, .subtitle {
          margin-top: 1%;
        }
    
        .input-container {
          margin-top: 10px;
        }
         
        .ic2, .ic1 {
        margin-top: 8%;
      }
      .submit {
          margin-top: 10%;
        }
      }
      
      @media only screen and (max-device-width: 360px) and (max-device-height: 740px) {
        .body {
          height: 100vh;
        }
        
        .creation-title {
          margin-top: 30%;
        }
        .form{
          margin-top: 2%;
          margin-bottom: 11%;
          height: 80%;
        }
    
        .title, .subtitle {
          margin-top: 1%;
        }
    
        .input-container {
          margin-top: 10px;
        }
         .ic2, .ic1 {
        margin-top: 8%;
        }
      }
       
    */