:root {
    --couleur-fond: #22232b;
    --couleur-fond-bloc: #363945;
    --couleur-vert: yellowgreen;
    --couleur-bleu: steelblue;
    --couleur-violet: plum;
    --couleur-orange: orange;
    --couleur-titre: #adc4dc;
    --couleur-texte: #dee2e6;
    --couleur-bordure: #4877a7;
    --couleur-ombre: #0d0d0d;
    --couleur-citation: #9196ab;
    --couleur-lien: #9bb7d4;
    --couleur-lien-survol: darken(--couleur-lien, 10%);
    --couleur-lien-section: #4eccff;
    --couleur-lien-section-survol: #a2e7ee;

    @media (prefers-color-scheme: light) {
        --couleur-fond: white;
        --couleur-fond-bloc: aliceblue;
        --couleur-vert: seagreen;
        --couleur-bleu: steelblue;
        --couleur-violet: darkslateblue;
        --couleur-orange: orangered;
        --couleur-titre: #4877bb;
        --couleur-texte: #22232b;
        --couleur-bordure: #4877a7;
        --couleur-ombre: #4d4d4d;
        --couleur-citation: #27425e;
        --couleur-lien: #0d243d;
        --couleur-lien-survol: darken(--couleur-lien, 10%);
        --couleur-lien-section: #2f577a;
        --couleur-lien-section-survol: #1d2f40;
    }
    
    @media (prefers-color-scheme: dark) {
        --couleur-fond: #22232b;
        --couleur-fond-bloc: #363945;
        --couleur-vert: yellowgreen;
        --couleur-bleu: steelblue;
        --couleur-violet: plum;
        --couleur-orange: orange;
        --couleur-titre: #adc4dc;
        --couleur-texte: #dee2e6;
        --couleur-bordure: #4877a7;
        --couleur-ombre: #0d0d0d;
        --couleur-citation: #9196ab;
        --couleur-lien: #9bb7d4;
        --couleur-lien-survol: darken(--couleur-lien, 10%);
        --couleur-lien-section: #4eccff;
        --couleur-lien-section-survol: #a2e7ee;
    }
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    line-height: 1.5;
    font-size: 1.2rem;
    margin: 0;
    background: var(--couleur-fond) url("../img/random-grey-variations.png");
    color: var(--couleur-texte);
}

a {
    color: var(--couleur-lien);
    text-decoration: underline dotted;

    &:hover {
        color: var(--couleur-lien-survol);
    }
}

header {
    margin-bottom: 2rem;
    padding: 1.3rem;
    background-color: var(--couleur-fond-bloc);
    border-bottom: 5px solid var(--couleur-bordure);
    display: flex;
    flex-wrap: wrap;

    a {
        text-decoration: none;
    }
    
    h1 {
        width: 10%;
        font-size: inherit;
        margin: 0;
        padding: 0;
    }
    
    cite {
        width: 30%;
        font-size: 80%;
        padding: 0;
        color: var(--couleur-texte);
    }
    
    nav {
        width: 60%;
        display: block;
        text-align: right;

        a {
            margin-left: 2rem;
            font-weight: bold;
        }
    }
}

footer {
    margin-top: 2rem;
    padding: .5rem 1rem;
    background-color: var(--couleur-fond-bloc);
    border-top: 2px solid var(--couleur-bordure);
    text-align: center;
    font-size: .9rem;
}

main {
    margin: auto;
    margin-top: 0;
    width: 80%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

pre {
    white-space: pre-wrap;
    font-family: consolas, courier, monospace;
    line-height: normal;

    background-color: var(--couleur-fond);
    border-radius: .5rem;
    padding: .5rem;
}

tt {
    background-color: var(--couleur-fond);
    border-radius: .5rem;
    padding: .2rem .5rem;
}

cite {
    color: var(--couleur-citation);
}

section {
    background-color: var(--couleur-fond-bloc);
    border: 1px solid var(--couleur-titre);
    border-radius: .5rem;
    box-shadow: 0 0 .4rem var(--couleur-ombre);
    padding: 0 1rem;
    flex-grow: 1;

    h1 {
        margin: 0;
        padding: 0;
        text-shadow: .1rem .1rem .2rem var(--couleur-ombre);
    }

    h1, h2, h3 {
        color: var(--couleur-titre);
    }

    ul {
        margin: .5rem 0;
    }

    quote {
        display: block;
        margin-top: 1rem;
        background-color: var(--couleur-fond);
        border-left: 3px solid var(--couleur-titre);
        border-right: 1px solid var(--couleur-titre);
        border-radius: .5rem;
        padding: .2rem .5rem;
        font-style: oblique;
    }

    a {
        color: var(--couleur-lien-section);

        &:hove {
            color: var(--couleur-lien-section-survol);
        }
    }
}

section.bleu {
    border-color: var(--couleur-bleu);

    h1, h2, h3 {
        color: var(--couleur-bleu);
    }

    ul li::marker {
        color: var(--couleur-bleu);
    }

    quote {
        border-color: var(--couleur-bleu);
    }
}

section.vert {
    border-color: var(--couleur-vert);

    h1, h2, h3 {
        color: var(--couleur-vert);
    }

    ul li::marker {
        color: var(--couleur-vert);
    }

    quote {
        border-color: var(--couleur-vert);
    }
}

section.violet {
    border-color: var(--couleur-violet);

    h1, h2, h3 {
        color: var(--couleur-violet);
    }

    ul li::marker {
        color: var(--couleur-violet);
    }

    quote {
        border-color: var(--couleur-violet);
    }
}

section.orange {
    border-color: var(--couleur-orange);

    h1, h2, h3 {
        color: var(--couleur-orange);
    }

    ul li::marker {
        color: var(--couleur-orange);
    }

    quote {
        border-color: var(--couleur-orange);
    }
}

@media screen and (max-width: 900px) {
  header h1, header cite, header nav, main, footer {
    width: 90%;
  }
}