@import url("/styles/global.css");
/* ajoute le style du fichier global.css dans ce fichier*/

/* 
Tout le css dans le bloc #main est seulement apppliquer aux enfants 
 a l'interieur de l'element avec l'ID #main

 Video pour explication du nesting:
 https://youtu.be/YnWPeA6l5UE
*/
#main {

    & h1,
    & h2 {
        font-family: Verdana;
        text-align: center;
        font-size: 45px;
    }

    & h2 {
        font-size: 40px;
        text-align: left;
    }

    & h3 {
        font-family: sans-serif;
        font-size: 30px;
        float: left;
    }

    .LineContainer

    /** keeps paragraph **/
        {
        clear: both;
        display: flex;
    }

    & table {
        margin-left: 30px;
        border: 5px groove gray;
        border-collapse: collapse;
        caption-side: top;
    }

    & caption {
        margin-bottom: 10px;
    }

    & th {
        font-size: 35px;
        height: 70px;
    }

    & td {
        font-size: 26px;
        border: 5px solid black;
    }

    & li/** bullet points **/
    {
        padding-bottom: 22px;
        padding-right: 10px;
    }

    .PicBorder {
        border: 3px solid gray;
    }

    .LeftSpace {
        margin-left: 25%;
        margin-bottom: 40px;
    }

    & sub,
    & sup {
        font-size: 13px;
    }

    .Successive {
        border: 5px solid black;
        font-size: 26px;
    }

    & figcaption {
        font-size: 24px;
    }
}

/** Note: J'avais appeler ce fichier "S1-Math_Page01" au debut mais elle ne fonctionnait pas. 
On dirait que le site n'aime pas les numeros dans les noms de fichiers. 
Je l'ai changé à "MathPageUn" et elle fonctionne bien maintenant **/