@charset "utf-8";
body{
        -- font-family: Arial, monospace, sans-serif;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        background:#E9EBEE;
        font-size:0.9rem;
        line-height: 150%;
}

.social{
        max-width: 15px; 
        vertical-align:middle;
}

/*TEST VIDEO*/

button {
   margin: 0 20px 0 0;
   width: 83px;
 }
 
 button#hangupButton {
     margin: 0;
 }
 
 video {
   --width: 45%;
   width: var(--width);
   height: calc(var(--width) * 0.75);
   margin: 0 0 20px 0;
   vertical-align: top;
 }
 
 video#localVideo {
  margin: 0 20px 20px 0;
}

div.box {
  margin: 1em;
}
/* ================ DEBUT PETIT ============== */
@media (orientation: portrait) {
  button {
    width: 83px;
     margin: 0 11px 10px 0;
   }
 
   video {
     height: 90px;
     margin: 0 0 10px 0;
     width: calc(50% - 7px);
   }
   video#localVideo {
     margin: 0 10px 20px 0;
   }
 
}

/*TEST VIDEO */

#container {
    margin: 0px auto;
    width: 500px;
    height: 375px;
    border: 5px blue solid;
}
#videoElement {
    width: 500px;
    height: 375px;
    background-color: #666;
}



.flexquizz{
        max-width:100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
}
.contenu, .gauche, .centre, .menu{
        background: #E9EBEE;
}

.table_defaut, tr, td, th {
        border-width:1px; 
        border-style:solid; 
        border-color:black;
        border-collapse:collapse;
}
.table_th {
        background:#6CBAF8;
}
.table_pair {
        background:#A8DBFE;
}
.table_impair {
        background:#CFEAFD;
}

.topban{
        width: 100%;
        vertical-align: middle;
        border-radius: 3px;
}
.menu{
}
.logoquizz{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    border-radius: 4px;
    border:1px solid black;
}
.center{
        text-align:center;
}
/* ================ DEBUT GRAND  ============== */
@media (orientation: landscape) {
        .contenu{
                max-width:90%;

                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;

                -webkit-flex-flow: row wrap;
                justify-content: space-around;
        }
        .divquizz{
                border:1px solid black;
                background-color:White;
                border-radius: 8px;
                max-width:200px;
                margin:5px;
                padding:5px;
        }
        .gauche{
                width:15%;
        }
        .mini_gauche{
                display: none;
        }
        .centre{
                width:83%; 
        }
}

@media all and (max-width: 1000px) {
         body{
                 font-size: 1.5rem;
        }
        .divquizz{
                border:1px solid black;
                background-color:White;
                border-radius: 8px;
                max-width:850px;
                margin:5px;
                padding:5px;
        }
        .contenu{
                max-width:100%;

                display: -webkit-box;
                display: -moz-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                flex-direction: column;

                -webkit-flex-flow: row wrap;
                justify-content: space-around;
        }
        .mini_gauche{
                width:100%;
                display: yes;
                text-align: center;
}
        .gauche{
                display: none;
        }
        .centre{
                width:100%;

        }
}
h1 {
        font-size:120%;
        text-align: center;
        color:white;
        padding:10px;
        background-color: #0984e3;
        font-variant: small-caps;
        border: none;
        border-radius: 3px;
}
h1:before {
        content: " ";

}
h1:after{
        content: " ";
}
h2:before {
        content: "☢ ";
}
h2{
        font-size:115%;
        margin-top:10px;
        color:white;
        background-color: #74b9ff;
        font-variant: small-caps;
        border: none;
        border-radius: 3px;
        display: table;
        padding:5px;
}
h3:before {
        content: "• ";
}
h3{
        font-size:105%;
        margin-top:10px;
        color:white;
        background-color:#6c5ce7;
        border-radius: 3px;
        display: table;
        padding:5px;
}
h4{
        font-size:100%;
        margin-top:1px;
        color:white;
        background-color:#a29bfe;
        border-radius: 2px;
        display: table;
        padding:1px;
}
input[type=submit] {
        font-size: 1.1em;
        font-weight: bold;
        border-radius:8px;
}
input[type="checkbox"]:checked+label{
        font-weight: bold;
        color:MediumBlue; 
        background-color:white;
        display:inline-block;
}
input[type="radio"]:checked+label{
        font-weight: bold;
        color:MediumBlue; 
        background-color:white;
        display:inline-block;
}
label:before {
        content:'✗';
        border:solid;
        border-radius:4px;
        padding: 0 0.15em;
        border:2px solid black;
}
label {
        padding: 0 1em;
}
input:checked + label:before {
        content:'✓';
}
[type="checkbox"] {
        position:fixed;
        left:-9999px;
}
[type="radio"] {
        position:fixed;
        left:-9999px;
}

a:before {
        content: "";
}
a:a_no_style:before {
        content: "";
}
a:link, a:active{
        color:#2d3436;
        text-decoration: none;
        font-weight: bolder;
}
a:hover, a:focus{
        color:black;
        text-decoration: none;
        background-color:#ffeaa7;
        border-radius: 2px;
        font-weight: bolder;
}

.score_quizz{
        width:200px;
        display: block;
        border:2px solid black;
        border-radius: 8px;
        margin-left: auto;
        margin-right: auto;
}

.graphique{
        vertical-align:middle;
}
.matrice{
        text-align:center;
}
.enclagalaxy{
        line-height: 2px;
        text-align:center;
}
.tuile{
        max-width: 5%; 
        max-height: 5%;
        vertical-align:middle;
}
.agalax{
        max-width: 12px; 
        vertical-align:middle;
}
.inputvaiss{
        width:10%;
}
.inputgalax{
        width:20%;
}
.inputficheplanet{
        width:80%;
}
.quizz{
        width:75%;
}
.inputplanet{
        width:10%;
}
.textareacss{
        width:98%;
        height: 500px;
        align:center;
}
.planning_input{
        width:8%;
}
#myCanvas { 
        background-color: rgba(158, 167, 184, 0.2);
}
.img_max_50{
        max-width: 75px; 
}

/* ========================== RESPONSIVE ========================== */
/* Grand écran */
/* https://la-cascade.io/flexbox-guide-complet/ */

.navigation {
        display: flex;
        flex-flow: row wrap;
        /* Aligne les items à end line sur main-axis */
        justify-content: flex-end;
}

/* Écrans moyens */
@media all and (max-width: 800px) {
        .navigation {
        /* on centre en répartissant l'espace entre les items */
        justify-content: space-around;
        }
}

/* Petit écran */
@media all and (max-width: 500px) {
        .navigation {
        /* On n'utilise plus row mais column */
        flex-direction: column;
        }
}

/* ================ FLEX MINI PAGES ============== */
.flex-a{
        max-width:100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: left;
align:center;
}
.flex-b{
        width:130px;
        height:180px;
        background-image:url(../images/page.png); opacity:.75;
        background-repeat: no-repeat;
        background-size: cover;
        margin:2px;
        padding:7px;
        word-wrap: break-word;
        vertical-align: middle;
        font-size:1rem;
        Line-Height: 1;
}
/* ================ FIN FLEX A B================ */

/* ================ FLEX DIV FEU ============== */
.feu_contenant{
        max-width:352px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        background-color: orange;
}
.feu_contenu{
        width:32px;
        height:32px;
        background-color: lightgreen;
        font-size:1rem;
        Line-Height: 1;
        text-align:center;
}
.tuile_feu{
	width: 32px;
	height: auto;
}
/* ================ FIN FLEX A B================ */
/*================ CANVA ===================*/

.input_canva{
        width:2%;
}

.span_red{
        color:red;
}
.span_blue{
        color:blue;
}
.span_yellow{
        color:yellow;
}
.span_orange{
        color:orange;
}
.span_green{
        color:green;
}
.span_purple{
        color:purple;
}