/* 
* Ce fichier permet de gérer les pages possédant uniquement des boards.
* Ils ne sont présent quand dans l'accueil ou sur les editeurs.
* Les éditeurs son tuniquement sur une page, notamment 100vh, géré par
* le body.
*
* Ce fichier ne doit pas être appeler si la page à pour but d'être autre
* chose qu'un éditeur. 
*/

/* Code permettant d'être en pleine page sans déborder */
body {
    height: 100vh;
    max-height: calc(100vh - 1.5rem);
}

/* Container de toutes les boards */
.board-container {
    position: relative;
    width: 90%;
    margin: 0 auto 0 auto;
    height: 100%;
    max-height: 100%;

    display: flex;
    justify-content: space-between;
    align-items: end;
}

/* 
* Code pour toutes les board. Cela permet que toutes aient la
* même hauteur.
*/
.board {
    /* background-color: red; */
    height: 90%;
}

/* 
* Code pour gérer la largeur de certaine board 
* ATTENTION, pour que le code marche, il faut que la balise possède
* aussi le calsse "board"
*/
.board--little {
    width: calc(50% / 3);
}

/* Code pour gérer la largeur de certaine board
* ATTENTION, pour que le code marche, il faut que la balise possède
* aussi le calsse "board"
*/
.board--big {
    width: 50%;
}

/* Permet dans un premier temps que les boards soient côte à côte. */
@media screen and (max-width: 1280px) {
    .board {
        width: 48%;
    }
}

/* Les boards vont ensuite passé l'un en dessous de l'autre.  */
@media screen and (orientation: portrait) {

    main {
        margin: 5vh auto 5vh auto !important;
        flex-direction: column;
        max-height: fit-content;
        height: fit-content;
    }

    .board {
        margin: 0 auto 0 auto;
        width: 100% !important;
        height: fit-content;
    }

    .board--big {
        margin-top: 5vh;
    }

}