/* général */
/*les fonts sont great vibes, oswald et lato*/
html, body, h1, h2, div, header, footer{ /*Retrait des espaces de bases superflux*/
    margin: 0;
    padding: 0;
}

nav, section, footer p{ /*taille du contenu*/
    width: 1120px;
    margin: auto;
}

header{
    height: 150px;
    padding-top: 40px;
}

footer{
    padding: 20px;
    text-align: center;
}

header, footer{ /*bande noir transparente pour mettre en evidence le header et footer*/
    background: rgba(0, 0, 0, 0.400);
}

a{ /*remaniage des liens hypertextes*/
    text-decoration: none;
    color: black;
}

/*distribution des fonts et taille des titres*/

section, footer{
    font-family: "lato", sans-serif;
}

h1, h2, h3, nav{ 
    font-family: "great vibes", sans-serif;
}

h1, h2{
    text-align: center;
}

h2{
    font-size: 50px;
}

h3{
    font-size: 30px;
}

/*background des différentes pages*/

body{
    background-repeat: no-repeat;
}

.rainbow{
    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

.blueback{
    background: linear-gradient(217deg, rgba(75, 0, 150, 0.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,75,75,.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

.yellowback{
    background: linear-gradient(217deg, rgba(150,150,75,.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(200,230,0,.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(255,255,0,.8), rgba(0,0,255,0) 70.71%);
}

.redback{
    background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(150,75,0,.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(75,0,75,.8), rgba(0,0,255,0) 70.71%);
}

.greenback{
    background: linear-gradient(217deg, rgba(50,75,0,.8), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,150,75,.8), rgba(0,0,255,0) 70.71%);
}

/* header */
/*effet de couleur correspondant lorsqu'on survole les liens de navigations et couleur maintenu dans la page actif*/
.current.white a, .white a:hover{
    color: #ffffff;
}

.current.blue a, .blue a:hover{
    color: blue;
}

.current.yellow a, .yellow a:hover{
    color: yellow;
}

.current.red a, .red a:hover{
    color: #d90000;
}

.current.green a, .green a:hover{
    color: green;
}

nav{
    text-align: center;
}

nav ul{
    list-style: none;
}

nav ul li{
    display: inline;
    font-size: 50px;
}

.border{ /*cadres "argentés pour les liens importants*/
    border: #e7e7e7d7 groove;
    padding: 10px;
}

/* logo */

h1, h1 a, h1 a:hover{
    position: relative;
    color: #d90000;
    font-size: 74px;
    font-weight: 100;
}

.logo h2, h2 a, h2 a:hover{
    font-family: "oswald", sans-serif;
    color: black;
    text-transform: uppercase;
    font-size: 64px;
    font-weight: 800;
    margin-top: -40px;
}

/*configuration des colonnes*/

.col{
    float: left;
    margin-right: 20px;
    margin-top: 20px;
}

.col-3-12{
    width: 265px;
}

.col-4-12{
    width: 360px;
}

.col-6-12{
    width: 550px;
}

.col-8-12{
    width: 740px;
}

.col-9-12{
    width: 835px;
}

.last{ /*enlever la gouttière de la derniere colonne*/
    margin-right: 0;
}

.right{ /*pour l'effet de symétrie sur la page d'accueil*/
    text-align: right;
}

.clear{ /*pour marquer la fin de colonnes*/
    clear: both;
    padding: 20px;
}

/*tableau de couleurs*/

td, th{
    border: solid 1px #000;
    padding: 45px;
}

table{
    border-collapse: collapse;
}

/*couleur des cellules*/

.blue-cell{
    background-color: #0000ff80;
}

.blue-yellow-1-cell{
    background-color: #3333cc80;
}

.blue-yellow-2-cell{
    background-color: #88888880;
}

.blue-yellow-3-cell{
    background-color: #cccc3380;
}

.yellow-cell{
    background-color: #ffff0080;
}

.blue-red-1-cell{
    background-color: #3300cc80;
}

.blue-green-cell{
    background-color: #0055cc80;
}

.grey-1-cell{
    background-color: #cc88bb80;
}

.yellow-red-cell{
    background-color: #ffbb0080;
}

.yellow-green-1-cell{
    background-color: #cccc0080;
}

.blue-red-2-cell{
    background-color: #88008880;
}

.grey-2-cell{
    background-color: #77557780;
}

.white-cell{
    background-color: #ffffff80;
}

.grey-3-cell{
    background-color: #77775580;
}

.yellow-green-2-cell{
    background-color: #88bb0080;
}

.blue-red-3-cell{
    background-color: #cc003380;
}

.red-yellow-cell{
    background-color: #ff330080;
}

.grey-4-cell{
    background-color: #bbcc3380;
}

.green-blue-cell{
    background-color: #00cc5580;
}

.yellow-green-3-cell{
    background-color: #55ff0080;
}

.red-cell{
    background-color: #ff000080;
}

.red-green-1-cell{
    background-color: #cc330080;
}

.red-green-2-cell{
    background-color: #55550080;
}

.red-green-3-cell{
    background-color: #33cc0080;
}

.green-cell{
    background-color: #00ff0080;
}