@font-face {
    font-family : "Bebas";
    src : url('BebasNeue.otf');
}

* {outline: none;}

.clear {clear: both;}

body {
    background-color : black;
    color : white;
    font-family : Arial, Helvetica, sans-serif;
    width : 1200px;
    margin: auto;

}

h1 {
    margin-top : 0;
    font-family : "Bebas";
    font-size : 40px;
    font-weight : 100;
}

h2 {
    margin-top : 33px;
}

h3 {
    margin : 5px 10px 5px 10px;
}

aside {
    font-size : 13px;
    width : 106px;
    background-color : #666;
    padding : 10px;
    float : right;
    text-align : left;
}

#deathStar {
    position : absolute;
    float : none;
    z-index : -1;
    opacity : 0.2;
    margin-right : 0;
    top : 0;
}

.mediaSociaux {
    width : 60px;
    margin-right : 10px;
    float : left;
}

/****** Liens ******/

a, summary {
    color : #bbb;
    text-decoration : none;
}

a:hover, summary:hover {
    color : white;
}

a:active, .active a {
    text-shadow : 0px 0px 20px #fff;
    color : white;
}

/****** Entête ******/

#logo {
    margin : 10px;    
}

#logo img {
    display: block;
    margin : auto;
    width : 300px;
}

/****** Menu ******/

nav {
    font-family : "Bebas";
    font-size : 40px;
    margin : 10px;   
}

nav > div {
    float : left;
    width : 19.2%;
    text-align : center;
}

.pipe {
    width : 1%;
    color : #333;
}

/****** Carrés ******/

.carre600x600 {
    width : 540px;
    height : 540px;
    background-color : #333;
    padding : 20px;
    margin : 10px;
    float: left;
}

.carre1200x1200 {
    width : 1140px;
    background-color : #333;
    padding : 20px;
    margin : 10px;
    float: left;
    text-align : justify;
}

/****** Vidéos ******/

.video {
    width : 560px;
    float : left;
    margin : 0 10px 10px 0;
}

/****** Tableau ******/

table, th, td {
    border : 1px solid white;
}

table {
    margin : 10px;
}

th, td {
    padding : 5px;
}


/****** Formulaire ******/

label {
    margin-right : 5px;
}

textarea {
   resize: none;
   margin-bottom : -20px;
   width : 100%;
}

.alignDroiteBtn {
    text-align : right;
    float : left;
    width : 47%;
}

.alignGaucheBtn {
    float : left;
    width : 47%;
}

#note {
    width : 100px;
}

/****** Galerie ******/

#galerie img {
    height : 200px;
    float :left;
    margin : 10px;
}

summary {
    font-size : 24px;
    font-weight : bold;
    margin-bottom : 10px;
    cursor : pointer;
    color : #bbb;
}

summary::-webkit-details-marker {
   display: none
}

summary:before {
    content : "+";
    color : #bbb;
    margin : 0 7px 0 10px;

}

details[open] summary:before {
    content : "-";
    color : white;
    margin : 0 13px 0 10px;
   
}

details[open] summary {
    color : white;
}

/****** Pied de page ******/

footer {padding : 0 10px 0 10px;}

.alignDroite {
    text-align : right;
    float : left;
    width : 50%;
    
}

.alignGauche {
    float : left;
    width : 50%;
   
}

address {
    font-style : normal;
}

footer p {
    margin-top : 10px;
}

/****** Sur petits écrans ******/

@media screen and (max-width: 1200px) {
    body {width : 100%;}

    .carre600x600, .carre1200x1200 {
    width : 92%;
    height : auto;
    padding : 2%;
    margin : 2%;
}
    .carre600x600 img, .carre600x600 iframe {
        width : 100%;
    }
    
    nav > div {
        float : none;
        width : 100%;
    }

    .pipe {display :none;}
    nav {font-size : 60px;}
}