@import url(../css/reset.css);
body {
    font-family: 'Tahoma', Segoe UI, Geneva, Verdana, sans-serif;
    /* font-size: 16px;    */
}
* {    
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
/*Personalisez les font-size*/
h1 {
    font-size: 1.8rem;
    /* line-height: 2rem; */
}
h2 {
    font-size: 1.6rem;
    /* line-height: 1.6rem; */
}
p {
    font-size: 1.4rem;
    /* line-height: 1.2rem; */
}
.wrapper {
    max-width: 1024px;
    padding-top: 295px;/*364-368 -(ok 294)*/
    margin: 0 auto 0;/*20px H, auto G&D, zéro en bas*/
}

/* HEADEDER*/
.entete {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgb(24, 24, 24);     
}
.header {      
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;       
    text-transform: uppercase;   
    font-style: italic;
    color: #fafafa;
    /* border-radius: 50%; */
    text-align: center;
    margin: 10px 0;
    padding: 25px 20px;       
}

/*NAVIGATION*/
.navbar {   
    display: flex;
    flex-flow: column;
    font-size: 1.4rem;
    padding: 10px 0;
    background-color: #6e65f198;
    border-top-right-radius: 35px;    
    border-top-left-radius: 35px;
    /* border-bottom-right-radius: 35px;
    border-bottom-left-radius: 35px; */
}
li {
    margin: 5px 0;
}
.active {
    border-radius: 15px;
    background-color: hsl(41, 70%, 48%);
}
a {
    color: #fafafa;
    padding: 5px 20px;
    font-weight: 400;
}
a:hover {
    color: #8d7e7e;
}
/*---MAIN----*/
.container1 {
    background-color: #ccc;
    padding: 20px 0;
    border-top-left-radius: 5%;
    border-top-right-radius: 5%;   
}
.container1 .form {
    width: 60%;
   /* height: auto; */
    margin: 0px auto;
    background-color: rgb(24, 24, 24);
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;    
    /* overflow: hidden; */
}
.container1 .form h2 {    
    color: #a6be46;
    font-size: 35px;
    font-weight: 700;
    font-size: 16px;    
}

form input, form textarea {    
    margin-top: 20px;
    padding: 5px 0;
    width: 95%;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    padding-left: 8px;
}

form input[type=submit] {
    background-color: #a9cfa0;
    font-weight: 700;
}
form input[type=reset] {
    background-color: #cfa0a0;
    font-weight: 700;
}
.container1 h3 {
    text-align: center;
    margin: 10px 0;
}
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    padding: 15px 0;
    min-height: 30px;
    color: #fafafa;
    background-color: rgb(24, 24, 24);
    text-align: center;
}
.footer p {
    color: #fafafa; 
    margin-top: 10px;
}

@media screen and (min-width: 768px) {
    :root {
        font-size: 12px;
    }
    .wrapper {
        padding-top: 190px;/*139*/
    }
    .nav {
        margin: 0 auto;        
        max-width: 1024px;
    }
    .container1 {
        border-top-left-radius: 5%;
        border-top-right-radius: 5%;
        /* border-radius: 25px; */
    }   
    .container1 .form {
        width: 60%;
        height: auto;       
        background-color: rgba(24, 24, 24, 0.8);       
        padding: 10px 0;
        text-align: center;
     }   
    .navbar {
        display: flex;
        flex-direction: row;
        justify-content: center;        
        align-items: center;        
    }     
}