/*
colors:
    first :  #e5e7e6
    second : #EEE6D8
    third :  #daca3a             #DAAB3A
    fourth : #b66d32             #B67332
    fifth :  #93441A
text:
    light : #e9d7b7
    dark : #696154
*/
:root{
    --main-link :  #ff8000;
    --main-link-hover : rgb(0, 0, 179);
    --main-link-visited : #c48900;
    --main-link-footer : rgb(79, 0, 182);

    --main-background : #EEE6D8;
    --main-third :  #daca3a;
    --main-fourth : #b66d32;
    --main-fifth :  #93441A;

    --text-light : #e9d7b7;
    --text-dark : #2c2a2a;
}
body{
    background-color: var(--main-background);
    font-size: medium;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color: var(--text-dark);
}
/*------------------------Menu-----------------------------------------------------*/
nav>a{
    display: inline-block;
    width: 19%;
    text-align: center;
    padding: 1em 0;
    margin:0;
    background-color: var(--main-fourth) !important;
    color: var(--text-light) !important;
    font-weight: bold;
    border-right: 10px solid var(--text-dark) !important;
    box-sizing: border-box;
    border: 5px dashed var(--main-fifth) !important; /* contour sombre */
    border-style:dashed dotted dashed dotted ;
}
nav>a:hover{
    background-color: var(--main-third) !important;
    border-color: var(--main-fourth) !important;
    color: var(--text-dark) !important;
}
.separation{
    padding: 3em;
}

/*--------------------------contents-------------------------------*/ 
#notesBrevet, #notesBac{
    border: none;
    background-color: var(--text-light);
}
#notesBrevet>button, #notesBac>button{
    margin-left: 2.5%;
    max-width: 95%;
    max-height: 50%;
}
#notesBrevet>img, #notesBac>img{
    margin-left: 2.5%;
    max-width: 95%;
    max-height: 50%;
}
pre{
    background-color: var(--main-background) !important;
    border: 3px solid var(--main-fifth);
    width: fit-content;
    box-shadow: inset 2px 2px 5px var(--main-fifth), inset -2px -2px 5px var(--main-fifth);
}
a{
    text-decoration: none;
    color: var(--main-link);
}
a:hover, a:visited:hover{
    color: var(--main-link-hover);
}
a:visited{
    color: var(--main-link-visited);
}


/*---------------------footer-------------------------*/
footer{
    background-color: var(--main-fourth);
    display: flex;
    margin-top: 3em;
}
footer a, footer a:visited{
    color: var(--main-link-footer);
}
footer>.contact{
    flex: 1;
}
footer>.contact>a{
    display: block;
    width: fit-content;
}
footer>.contact>a:hover{
    color: var(--main-background);
    +p{
        display: contents;
        color: var(--main-third);
    }
}
footer>.param{
    flex: 1;
}
footer>.param>a{
    display: block;
    width: fit-content;
}
footer>.param>a:hover{
    color: var(--main-background);
}

/*-----------------------------Animations-------------------------------------*/
.animRGB{
    animation: AnimRGB 5s linear infinite;
    a, a:hover{
        animation: AnimRGB 5s linear infinite;
    }
    a:visited, a:visited:hover{
        animation: AnimRGB 5s linear infinite reverse;
    }
    
}
@keyframes AnimRGB {
    0%{color: #ff0000;}
    7.7%{color: #ff9100;}
    15.4%{color: #fffb00;}
    23.1%{color: #d9ff00;}
    30.8%{color: #a6ff00;}
    38.5%{color: #33ff00;}
    46.2%{color: #00ffaa;}
    53.9%{color: #00e1ff;}
    61.6%{color: #0077ff;}
    69.3%{color: #0026ff;}
    77%{color: #2600ff;}
    84.7%{color: #7700ff;}
    92.4%{color: #ca00fd;}
    100%{color: #ff0077;}
}