body{
    background-color: rgb(32, 32, 32);
    background-image:  linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(img/2020-Koenigsegg-Jesko-005-1440w.jpg);
}

.marge{
    padding: 3em;
}

main{
    text-align: center;
    color: rgb(255, 255, 255);
    font-family: 'Jockey One', sans-serif ;
    
   .hero{
        text-align: center;
        padding: 4rem 1.5rem 2rem;

        .label {
            font-size: 0.72rem;
            letter-spacing: 0.25em;
            margin: 0;
            color: rgb(245, 179, 57);
        }
        
        h1{
            font-size: 80px;
            letter-spacing: 1px;
            margin: 0;
        }

        .sub{
            max-width: 360px;
            margin-inline: auto;
            color: rgb(129, 129, 129);
        }
   }

.message{
    background-color:  rgba(66, 66, 66, 0.897);
    margin-left: 34%;
    margin-right: 34%;
    padding: 3em;
    border-radius: 1em;  
    margin-bottom: 6em;
    align-items: center;
    #mess{
        padding:0.8em ;
       
        #message-id{
            height: 8em;
            padding-right: 70%;
            margin: auto ;
       }
    }
}

.messouge{
    margin-left:3%;
}

}
.row-2{
    padding: 0.5em;
    display: flex;
    justify-content: space-around; 
}

.field{
    display: flex;
    flex-direction: column;
    align-items: start;    
    
    label{
        padding-left: 15px;
        margin-bottom: 5px;
    }     
}

input,textarea{
    background-color: rgb(32, 32, 32);
    border: none;
    border: solid 0.1px rgb(75, 75, 75);
    border-radius: 0.8em;
    font-size: 1em;
    padding: 1em;
    margin-right: 1em;
    outline-color:rgb(245, 179, 57);
    color: white;
}

.divider{
    background-color: rgb(85, 85, 85);
    padding: 0.5px;
    margin: 3%;

}

.submit-row {
    display: flex;
    align-items: center;
    padding-left: 0.6em;
    justify-content: space-between;
}

.btn-submit {
    background: rgb(245, 179, 57);
    color: #0e0e0e;
    border-radius: 1em;
    padding: 0.8em;
    font-size: 1.1em;
    font-family: 'Jockey One', sans-serif ;
    transition: background-color 0.2s;
}

.btn-submit:hover {
    background-color: rgb(136, 100, 33);
}


/* responsive pour la partie contact */


@media (max-width:400px ){

body{
    background-size: 300%;
}

.marge{
    padding: 0em;
}

main{
   .hero{
        .label {
            font-size: 10px;
        }
        h1{
            font-size: 50px;
        }
   }

.message{
    background-color:  rgba(66, 66, 66, 0.589);
    margin-left: 6%;
    margin-right: 6%;
    padding: 0em;
    border-radius: 1em;  
    margin-bottom: 3em;
    align-items: center;
    #mess{
        padding:0.8em ;
       
        #message-id{
            font-size: 10px;
            height: 3em;
            padding-right: 56%;
            margin-left: auto;
            margin-right: auto;
       }
    }
}

}
.row-2{
    padding: 0.5em;
    display: flex;
    justify-content: space-around; 
}

.field{
    display: flex;
    flex-direction: column;
    align-items: start;   
    padding-left:0.3% ;
    
    label{
        padding-left: 8px;
        font-size: 15px; 
        margin-bottom: 5px;
    }     
}

input,textarea{
    background-color: rgb(32, 32, 32);
    border: none;
    border: solid 0.1px rgb(75, 75, 75);
    border-radius: 0.8em;
    font-size: 0.57em;
    padding: 0.8em;
    padding-right: 0.1%;
    margin-right: 1em;
    outline-color:rgb(245, 179, 57);
    color: white;
}

.divider{
    background-color: rgb(85, 85, 85);
    padding: 0.5px;
    margin-top: 1em ;
    margin-bottom: 0em;
    margin-left: 1em;
    margin-right: 1em;
}

.submit-row {
    display: flex;
    align-items: center;
    padding-left: 0.6em;
    justify-content: space-between;
}

.btn-submit {
    background: rgb(245, 179, 57);
    color: #0e0e0e;
    border-radius: 1em;
    padding: 0.8em;
    font-size: 0.8em;
    font-family: 'Jockey One', sans-serif ;
    transition: background-color 0.2s;
}

.btn-submit:hover {
    background-color: rgb(136, 100, 33);
}
.hint{
    font-size: 12px;
}


}