/*Variable*/
:root{
    --maincolor: rgb(179, 179, 179);
    --secondcolor: rgb(233, 233, 233);
    --suburi: 'Kalam', cursive;
    --titre: 'Oswald', sans-serif;
    --texte: 'Titillium Web', sans-serif;
    --cote : 200px;
    --demicote : 100px;
    --cote2 : 100px;
    --demicote2 : 50px;
    --cote3 : 152px;
    --demicote3 : 76px;
}
a:visited, a:link {
    text-decoration: inherit;
    color: inherit;
}
/* fonction par classe */
.fix{
    position: fixed;
}
.normal{
    font-size: 1.2em;
}
/* Général */
body{
    background-color: var(--secondcolor);
    font-family: var(--texte);
    font-size: 1.1em;
}
#highback{
    display: none;
}
/* Header */
#mainH{
    position: fixed;
    z-index: 100;
    background-color: var(--maincolor);
    border-bottom: 1px solid white;
    box-shadow: 0px 0px 5px 3px #000;
}
header{
    padding: 0;
}
header img{
    height: 60px;
}
#bm1{
    font-family: var(--suburi);
    font-size: 40px;
}
#bm2, #bm3, #bm4, #bm5{
    font-family: var(--titre);
    font-size: 20px;
    color: white;
    margin-right: 35px;
    margin-left: 30px;
    text-shadow: black 1px 0 2px;
}
#mobilebutton2{
    font-size: 1.6em;
}
/* main */
main{
    padding-top: 100px;
}
article{
    padding: 50px 0 50px 0;
}
h2{
    padding-top: 10px;
    color: red;
}

/* footer */
@keyframes rotationX{
    from {transform:rotateX(0deg);}
    to {transform:rotateX(360deg);}
}
@keyframes rotationY{
    from {transform:rotateY(0deg);}
    to {transform:rotateY(360deg);}
}
@keyframes rotationZ{
    from {transform:rotateZ(0deg);}
    to {transform:rotateZ(360deg);}
}

footer{
    overflow: hidden;
}
#cube1{
    margin-top: -50px;
    margin-left: -400px;
}
#cube2{
    margin-left: -10px;
}
#cube3{
    margin-top: -450px;
    margin-left: 300px;
}
.face {
    position:absolute;
    width:var(--cote); 
    height:var(--cote);
    border: 1px solid black;
}
.avant {
    transform:translateZ(var(--demicote));
}
.haut {
    transform:rotateX(90deg) translateZ(var(--demicote));
}
.gauche {
    transform:rotateY(-90deg) translateZ(var(--demicote));
}
.droite {
    transform: rotateY(90deg) translateZ(var(--demicote));
}
.bas {
    transform: rotateX(-90deg) translateZ(var(--demicote));
}
.arriere {
    transform: rotateY(-180deg) translateZ(var(--demicote))
}
.face2 {
    position:absolute;
    width:var(--cote2); 
    height:var(--cote2);
    border: 1px solid grey;
}
.avant2 {
    transform:translateZ(var(--demicote2));
}
.haut2 {
    transform:rotateX(90deg) translateZ(var(--demicote2));
}
.gauche2 {
    transform:rotateY(-90deg) translateZ(var(--demicote2));
}
.droite2 {
    transform: rotateY(90deg) translateZ(var(--demicote2));
}
.bas2 {
    transform: rotateX(-90deg) translateZ(var(--demicote2));
}
.arriere2 {
    transform: rotateY(-180deg) translateZ(var(--demicote2))
}
.face3 {
    position:absolute;
    width:var(--cote3); 
    height:var(--cote3);
    border: 1px solid white;
}
.avant3 {
    transform:translateZ(var(--demicote3));
}
.haut3 {
    transform:rotateX(90deg) translateZ(var(--demicote3));
}
.gauche3 {
    transform:rotateY(-90deg) translateZ(var(--demicote3));
}
.droite3 {
    transform: rotateY(90deg) translateZ(var(--demicote3));
}
.bas3 {
    transform: rotateX(-90deg) translateZ(var(--demicote3));
}
.arriere3 {
    transform: rotateY(-180deg) translateZ(var(--demicote3))
}

#cube11,#cube12,#cube13,#cube14 {
width:var(--cote);
height:var(--cote);
margin:var(--demicote) auto;
transform-style:preserve-3d;
}
#cube21,#cube22,#cube23,#cube24 {
width:var(--cote2);
height:var(--cote2);
margin:var(--demicote2) auto;
transform-style:preserve-3d;
}
#cube31,#cube32,#cube33,#cube34 {
width:var(--cote3);
height:var(--cote3);
margin:var(--demicote3) auto;
transform-style:preserve-3d;
}
#cube11 {perspective:800px;}
#cube12 {animation:rotationX 3s ease infinite;}
#cube13 {animation:rotationY 5s ease infinite;}
#cube14 {animation:rotationZ 7s ease infinite;}

#cube21 {perspective:800px;}
#cube22 {animation:rotationX 4s ease infinite;}
#cube23 {animation:rotationY 5s ease infinite;}
#cube24 {animation:rotationZ 6s ease infinite;}

#cube31 {perspective:800px;}
#cube32 {animation:rotationX 3.5s ease infinite;}
#cube33 {animation:rotationY 2.5s ease infinite;}
#cube34 {animation:rotationZ 6.5s ease infinite;}

#mention{
    margin-top: 200px;
    font-size: 0.6em;
}

/* mobile */
@media screen and (max-width: 768px) {

    #mainH{
        bottom: 0;
        border-top: 1px solid white;    
    }
    nav ul li a{
        text-align: right;
    }
    #highback{
        display: block;
    }
    #cube1{
        margin-top: -110px;
        margin-left: -200px;
        z-index: 100;
    }
    #cube2{
        margin-top: -50px;
        margin-left: -10px;
        margin-bottom: 120px;
        z-index: 100;
    }
    #cube3{
        margin-top: -550px;
        margin-left: 110px;
        z-index: 100;
    }
    #space{
        height : 50px;
    }
    footer{
        padding-bottom: 90px;
    }
    #mention{
        margin-top: 170px;
    }  
}