/*ajuster la taille selon l'écran*/
@media(max-width : 600px){
    html{
        font-size:8px;
    }
}
@media(max-width : 800px){
    html{
        font-size:12px;
    }
    #graph{
        margin: 0em 0em 0em 1em;
    }
    main{
        margin:2em auto 0;
    }
}
/*Grand titre*/
header{
    font-family:"Potta One";
    width:90%;
    margin:0 auto;
    color:#867979;
    color:#e63946;
}
header h1{
    font-size:4rem;
}
header h3{
    font-size:1.75rem;
}
/*contenu principal*/
main{
    display:flex;
    width:95%;
    margin:4em auto 0;
    align-items:baseline;
}
#scores{
    font: 1.5rem "Potta One";
    /*color:#D62B2B;*/
    color:#1d3557;
    width:50%;
    margin: 0.5em 1em 0em 2em;
}
#scores div{
    margin-bottom:1em;
}
/*graphique à bandes*/
#graph{
    display:flex;
    flex-direction:column;
    width:45%;
    background:#f1faee;
    margin: 0em 4em 0em 1em;
}
#diagrammes{
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    align-items:flex-end;
    margin-top:auto;
}
.bande{
    background:#867979;
    width:15%;
}
.bande span{
    display:block;
    margin:50% auto;
    text-align:center;
    font:1.25rem "Trebuchet MS";
    color:#f1faee;
}
#etiquettes{
    display:flex;
    flex-direction:row;
    justify-content:space-around;
    border-top:3px solid #e63946;
}
.etiquette{
    width:15%;
    font:1.25rem "Trebuchet MS";
    text-align:center;
}