body {
    background: rgb(246,255,220);
    background: radial-gradient(circle, rgba(255,244,228,1) 55%, rgba(240,246,238,1) 100%); 
    text-align: justify;
    font-family:trebuchet MS, sans-serif;
}

#page-box {
    min-height:95vh; 
    display:flex; 
    flex-direction:column; 
}

#content-box {
    flex-grow:1; 
}

#nav-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#footer-box{
    margin:auto;
}


header, header a {
    color: mediumseagreen;
    font-family: sans-serif;
    font-size:3vw;
    text-align: center;
    margin:.5em;
    text-decoration:none;
}

nav, nav a {
    width: 50%;
    margin:auto;
    font-size: 2vw;
    text-decoration : none;
}

.Projets, .Projets a {
    color: forestgreen;
}

.Projets a:hover {
    color: yellowgreen;

}

.Services, .Services a {
    color: teal;
}

.Services a:hover {
    color: lightseagreen;
}

.Articles, .Articles a {
    color: goldenrod;
}

.Articles a:hover {
    color: gold;
}

.Contact, .Contact a {
    color: coral;
}

.Contact a:hover {
    color: lightsalmon;
}

main {
    width:60%;
    margin : auto;
}

section {
    margin:1em;
}

img {
    width:100%;
    border-radius: 5px;
}

p, ul, ol {
    color:#03192a;
}

footer {
    font-size:.75em;
}

section a, footer a {
    color: mediumseagreen;
}

@media all and (orientation: portrait) {
    
    header, header a {
        font-size:5vw;
        text-align: left;
        margin:.5em;
        text-decoration:none;
    }

    nav, nav a {
        width: 80%;
        margin:auto;
        font-size: 4vw;
        text-decoration : none;
    }

    main {
    width:90%;
    margin : auto;
    }
}