/*grammaire*/
body{
    background-color:#555D5E;
    font-family: 'Roboto', sans-serif;
    margin:0;
}

a{
    text-decoration: none;
    color:#b5c8ca;
}
.blanc{
    color: #fff;
}
.italic{
    font-style: italic;
}
.center{
    text-align: center;
}
.maj{
    text-transform: uppercase;
}
a:hover{
    color: whitesmoke; 
    text-shadow: grey 0.1em 0.1em 0.1em; /*crée une ombre*/
}

img{
    width:100%;
    height:100%;
}




/*haut de page*/
#header{
    position: relative;
    top:0;left:0;
    display:flex;
    width: 100%;
    height: 280px;
    background-color: #677273;
}
#centrerv{
    margin: auto;
    text-align: center;
    color: #fff;
}
.name{
    margin:0;
    font-weight: 600;
    font-size: 200%;
}
.undername{
    border-top: 1px solid #fff;
    margin:0;
    font-weight: 300;
    font-size:150%;
}

    
/*navigation*/
#navigation a{ /* lien dans navigation*/
    text-decoration: none;
    margin-left:10px;
    transition-property: color;
    transition-duration: 0.5s;
    transition-timing-function: linear;
}
#navigation{
    width:100%;
    height:50px;
    position:sticky;
    top:0px; 
    text-align:center;
    background-color: #555d5e;
    color:#677273;
    padding-top: 15px;
    z-index:1;
}
/*a propos*/
#a-propos{
    position: relative;
    top:0px; left:0;
    background-color: #f8f8f8;
    width: 100%;
    height: 500px;  
    padding-top:15px;
    color:#677273;
}
.textap{
    width: 60%;
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
}
.corpstexte{
    width:75%;
    float:left;
    margin-left:10%;
    text-align: left;
    height: auto;
}
.moi{
    width: 15%;
    float:left;
    margin-top:16px;
    align-items: center;
}


/*competences*/
#competences{
    position: relative;
    top:0px; left:0;
    background-color: #f4f4f4;
    width: 100%;
    height: 500px;  
    padding-top:35px;
    color:#677273;
}

.backend,
.frontend,
.logiciel{
    width:20%;
    height: auto;
    border: 2px solid black;
    float:left;
    margin-left: 10%;
    margin-top: 5%;
}


/*formation*/
#formation{
    position: relative;
    top:0; left:0;
    background-color: #f0f0f0;
    width: 100%;
    height: 600px;  
    padding-top:35px;
    color:#677273;
}
.containerformtitle{
    margin-bottom:5%;
}
.containerdiplome{
    width: 50%;
    margin-left: 20%;
    height: auto;
    margin-bottom: 2%;
    float:left;
}
.annee{
    background-color: rgb(141, 242, 255);
    text-align: center;
    width:15%;
    height:auto;
    float:left;
    margin-right: 2.5%;
}
.nomdiplome{
    margin-left: 5%;
    float:left;
    width:auto;
}

/*contact*/
#contact{
    position: relative;
    top:0px; left:0;
    width: 100%;
    height: auto;  
    padding-top:35px;
    display:flex;
    background-color: #677273;
}

.containerformulaire{
    height:auto;
    width:70%;
    margin-left:auto;
    margin-right:auto;
    padding-left: 50px;
    
}
.formulaire{
    height:50%;
}
#nom,
#mail,
#txt,
button{
    font-family: 'Roboto', sans-serif;
    font-size: smaller;
    background-color: rgb(188, 201, 201);
    padding-left: 1%;
    color: #677273;
}

#nom{
    margin-right:2%;
    
}
#nom,
#mail{
    width:43.5%;
    height:20%;
    border-style: none;

}
#txt{
    width:90%;
    height:20%;
}
.coordonnee{
    margin-left: auto;
    margin-right: auto;
    width:30%;
}
.soustitre{
    font-style: italic ;
    font-size: x-small;
    padding-left: 5px;
    padding-bottom: 10px;
}
/*bas de page*/
#footer{
    position: relative;
    top:0px; left:0;
    
    width: 100%;
    height: 50px;  
    padding-top:35px;
}

/**/
.cadre1,
.cadre3{
    border:1px solid black;
    background-color: rgba(50, 53, 50, 0.479);
}
.cadre2{
    width:850px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    background-color: whitesmoke;
}
.cadre3{
    width: 400px;
    height: 400px;
    float: left;  
}



.carre{
    height:300px;
    width:300px;
    border: 5px solid rgba(50, 53, 50, 0.479);
    background-color: whitesmoke;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
}
/*footer*/
.cadricon{
    height:70px;
    padding-top:10px;
}
.iconreseau{
    font-size: 30px;
    color: #fff;
    padding-right: 30px;
}

/*responsive*/
@media (max-width: 640px)
{
    #navigation{
        width:100%;
        height:30px;
        position:relative; 
        text-align:center;
        font-size: x-small;
        margin-left: auto;
        margin-right: auto;
    }
    .undername{
        font-size: small;
    }
    .moi{
        display:none;
    }
    #a-propos{
        height:660px;
    }
    #competences{
        height:300px;
    }
    .backend,
    .frontend,
    .logiciel{
    width:20%;
    height: 15%;
    margin-left: 5%;
    margin-right:5%;
    margin-top: 5%;
    font-size:small;
    list-style-position: outside;
    }

    .containerdiplome
    {
        height: auto;
    
    }
    
}