@font-face {
    font-family: 'JustMeAgainDownHere';
    src: url(../assets/JustMeAgainDownHere-Regular.ttf);
}

/*Source sans pro currently loaded via google*/

body,
html {
    /*otherwise height:100vw causes an overflow*/
    margin: 0;
    padding: 0;
    background-color: #e7e8e2;

    --color--background-blue: #033e5c;
    --color--whitish: #f8f7e5;
    /* yunow hospice comtesse font Gravity, arial, sans-serif*/
    /*Fonts hospice comtesse :width: Source San pro pour le texte.
Font identifiée pour les labels dans les applis : Just me again down here ;*/

    --button-corner-radius: 0.2em;
    --light-text-color: white;
    font-family: "Source Sans Pro", sans-serif;
}


main {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    height: 100vh;
}

#ecorpusContainerId {
    z-index: 0;
    grid-column: 1/13;
    grid-row: 1/13;
}

#backdropBlurId {
    grid-column: 1/13;
    grid-row: 1 /13;
    z-index: 4;
    backdrop-filter: blur(5px);
}


select,
::picker(select) {
    appearance: base-select;
}

::picker(select) {
    border: 1px solid var(--color--background-blue);

}


#mainMenuButtonContainer {
    grid-column: 1;
    grid-row: 1/3;
    z-index: 5;
}


#languageSelect,
#mainMenuButtonContainer>a>button {
    background-color: var(--color--background-blue);
    color: var(--color--whitish);
    margin: 0.5em;
    font-size: 1rem;
    width: calc(calc(100vw/12) - 1em);
    border: none;
    box-shadow: none;
    padding: 0.4em;

    option {
        background-color: var(--color--whitish);
        border: none;
        color: var(--color--background-blue);
        width: inherit;
    }
}

/* --------- ARTICLE OVERLAY -------------*/
.articleContainer {
    grid-column: 3/11;
    grid-row: 2/12;
    z-index: 6;
    display: block;


    .closeArticleButton {
        --height-close-button: 3em;
        position: sticky;
        top: 0;
        left: 100%;
        height: var(--height-close-button);
        width: var(--height-close-button);
        padding: 0;
        margin-top: 0.5em;
        border: none;
        background: transparent;
        box-shadow: none;

        svg {
            width: inherit;
            height: inherit;
            fill: #a0a0a0;
        }
    }

    .article {
        margin: 0 10em 2em 10em;
    }

    font-family: "Source Sans Pro",
    "Hind Siliguri",
    sans-serif;

    background-color: #163459;
    scrollbar-color: #676767 #163459;

    h1:before {
        background-color: var(--color-accent-2);
    }

    /*From voyager styles */

    /*background-color: #282b2d;*/
    overflow-y: scroll;
    color: #c8c8c8;
    /*font-family: "Hind Siliguri",
    sans-serif;*/

    h1 {
        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 75px;
            height: 5px;
            /*background-color: var(--color-accent-1);*/
        }

        margin: 0.3em 0;
        padding-top: 0.3em;
        /*font-family: "Amiri",
        serif;*/
        font-size: 2.3em;
        font-weight: normal;
        position: relative;
        /*For positionning before pseudo-element*/
    }

    h2,
    h3,
    h4,
    h5,
    h6 {
        font-size: 1.3em;
        margin: 1.2em 0 0.8em 0;
    }

    p {
        font-size: 1.15em;
        margin: 0.8em 0;
        line-height: 1.55em;

        img {
            max-width: 100%;
            height: auto;
        }
    }

    /*scrollbar-color: #676767 #1b1b1b;*/
    scrollbar-width: thin;
}

/* --------- TOUR MENU  -------------*/

#tourButtons {
    grid-column: 2/4;
    grid-row: 2/12;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;


    .selectedStep {
        position: relative;
        left: calc(100vw/48);
        animation-name: slidein;
        animation-timing-function: ease-in-out;
        animation-duration: 0.25s;

    }

    .unselectedStep {
        animation-name: slideout;
        animation-timing-function: ease-in-out;
        animation-duration: 0.25s;

    }
}

@keyframes slidein {
    from {
        position: relative;
        left: 0;
    }

    to {
        position: relative;
        left: calc(100vw/48);
    }
}


@keyframes slideout {
    from {
        position: relative;
        left: calc(100vw/48);
    }

    to {
        position: relative;
        left: 0;
    }
}

button {
    background-color: var(--color--background-blue);
    width: 100%;
    color: var(--color--whitish);
    padding: 0.5em;
    border: 1px solid #f8f7e5;
    box-shadow: 3px 2px var(--color--whitish);


}

/* ---------- Alimentation Page--------*/
.alimentationPage {
    z-index: 1;
}

#invertDiv {
    grid-column: 8;
    grid-row: 4;
}

/* -------------- Exploded View Page ---------- */
#explodedViewInstructions {
    z-index: 1;
    grid-column: 5/9;
    grid-row: 2;
    background-color: var(--color--background-blue);
    border-radius: calc(100vh/24);
    color: var(--color--whitish);
    display: flex;
    align-items: center;
    justify-content: center;
}

.disapearing {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1s;
    transition-delay: 4s;
}


/* --------- LOGOS -------------*/

#logosId {
    grid-column: 10/13;
    grid-row: 11/13;
    z-index: 10;
    display: grid;
    justify-content: space-evenly;
    align-items: center;

    .logo {
        height: 7vh;
    }
}