@font-face {
    font-family: 'Source Sans 3';
    src: url(../assets/fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf);
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans 3';
    src: url(../assets/fonts/Source_Sans_3/SourceSans3-Italic-VariableFont_wght.ttf);
    font-style: italic;
}

@font-face {
    font-family: 'Atkinson_Hyperligble';
    src: url(../assets/fonts/Atkinson_Hyperlegible/AtkinsonHyperlegible-Regular.ttf);
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: 'Atkinson_Hyperligble';
    src: url(../assets/fonts/Atkinson_Hyperlegible/AtkinsonHyperlegible-Italic.ttf);
    font-style: italic;
    font-weight: 400
}

@font-face {
    font-family: 'Atkinson_Hyperligble';
    src: url(../assets/fonts/Atkinson_Hyperlegible/AtkinsonHyperlegible-Bold.ttf);
    font-style: normal;
    font-weight: 700
}

@font-face {
    font-family: 'Atkinson_Hyperligble';
    src: url(../assets/fonts/Atkinson_Hyperlegible/AtkinsonHyperlegible-BoldItalic.ttf);
    font-style: italic;
    font-weight: 700
}


body,
html {
    /*otherwise height:100vw causes an overflow*/
    margin: 0;
    padding: 0;

    --color-blue-7694C: #01426A;
    --color-petrol-blue-315C: #00677F;
    --color-process-blue: #0085CA;
    --color-blue-312C: #00A9CE;
    --color-aqua-3262C: #00BFB3;
    --color-blue-grey-5503C: #98B8B4;
    --color-light-blue-628C: #B8DDE1;
    --color-chartreuse-383C: #ACB326;
    --color-green-361C: #43B02A;
    --color-dark-green-575C: #6B7E51;
    --color-cold-yellow-110C: #D2AF24;
    --color-warm-yellow-123C: #F2CC38;
    --color-orange-021C: #FE5000;
    --color-red-206C: #CE0037;
    --color-bordeau-7427C: #A92021;
    --color-dark-magenta-215C: #AC145A;
    --color-pink-213C: #E31C79;
    --color-purple-2622C: #4D1654;
    --color-warm-yellow-brown-871C: #A68B4E;
    --color-warm-grey7: #8E8581;
    --color-warm-grey1C: #ECE8DC;
    --color-cool-grey11: #53565A;
    --color-cool-grey8: #888B8D;
    --color-cool-grey-428C: #C1C6C8;





    background-color: var(--color-warm-grey7);
    --button-corner-radius: 0.2em;
    --light-text-color: var(--color-warm-grey1C);
    font-family: "Source Sans 3", sans-serif;

    --color-observer: var(--color-dark-green-575C);
    --color-experimenter: var(--color-warm-yellow-brown-871C);
    --color-invisible: var(--color-purple-2622C);
    --color-context: var(--color-dark-magenta-215C);
    --color-article-background: var(--color-blue-7694C);

    --button-height: 1.5rem;
}


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

#ecorpusContainerId {
    z-index: 0;
    position: relative;
    grid-column: 1/25;
    grid-row: 4/25;
}

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

.toFlip {
    transform: rotate(180deg);
}

button {
    border: none;
    background-color: transparent;
    padding: 0;
}

/* --------------- HEADER -------------------*/

header {
    --main-header-rows: 3;
    --sub-header-rows: 1;
    grid-column: 1/25;
    grid-row: 1/5;
    display: grid;
    grid-template-rows: repeat(calc(var(--main-header-rows) + var(--sub-header-rows)), 1fr);
    z-index: 10;

    ul {
        list-style: none;
        display: flex;
        padding: 0;
        margin: 0;
        justify-content: space-between;

        button {
            background: none;
            color: inherit;
            border: none;
            padding: 0;
            font: inherit;
            cursor: pointer;
            outline: inherit;
            display: flex;
            align-items: center;
            /* width: calc(100vw/8); */
            font-size: 1.5rem;
            font-weight: 600;
        }
    }

}

.mainHeader {
    --menu-icon-size: 1.5rem;
    z-index: 5;
    display: grid;
    align-items: center;
    grid-column: 1;
    grid-row: 1/calc(var(--main-header-rows) + 1);
    grid-template-columns: repeat(24, 1fr);

    color: var(--light-text-color);
    background-color: var(--color-blue-7694C);
    font-family: 'Source Sans 3';

    #logoLink {
        grid-column: 1/3;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: calc(var(--main-header-rows)/24*100vh);
    }

    h1 {
        grid-column: 3/9;
        font-weight: 700;
        font-size: 2rem;
        margin: 0;
    }

    nav {
        grid-column: 9/23;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        box-sizing: border-box;

        ul {
            width: 100%;
        }

        .menu-item {
            &.selected {
                span {
                    border-top: 3px solid transparent;
                    border-bottom: 3px solid;
                }

                &#observerMenuItem {
                    anchor-name: --observer-menu-item;

                    &>button>span {
                        border-bottom-color: var(--color-observer);
                    }
                }

                &#experimenterMenuItem {
                    anchor-name: --experimenter-menu-item;

                    &>button>span {

                        border-bottom-color: var(--color-experimenter);
                    }
                }

                &#invisibleMenuItem {
                    anchor-name: --invisible-menu-item;

                    &>button>span {

                        border-bottom-color: var(--color-invisible);
                    }
                }

                &#contextMenuItem {
                    anchor-name: --context-menu-item;

                    &>button>span {

                        border-bottom-color: var(--color-context);
                    }
                }

                .toFlip {
                    transform: none;
                }
            }

            display: flex;
            align-items: center;
        }

        .menu-icon {
            width: var(--menu-icon-size);
            height: var(--menu-icon-size);
        }

        svg {
            padding: calc(var(--menu-icon-size)/4);
        }

        .toFlip {
            display: none;
        }
    }

    #homeLink {
        grid-column: 23/25;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--light-text-color);

        svg {
            height: calc(100vh/24);
            width: calc(100vh/24);
        }
    }

}

.submenu {
    grid-row: calc(var(--main-header-rows) + 1);
    grid-column: 1;
    display: flex;
    color: var(--light-text-color);
    visibility: hidden;
    height: calc(100vh/24);
    height: calc(100dvh/24);
    align-items: center;
    justify-content: center;
    text-wrap-mode: nowrap;

    &#observerSubmenu {
        ul {
            position-anchor: --observer-menu-item;
        }

        background-color: var(--color-observer);
    }

    &#experimenterSubmenu {
        ul {
            position-anchor: --experimenter-menu-item;
        }

        background-color: var(--color-experimenter);
    }

    &#invisibleSubmenu {
        ul {
            position-anchor: --invisible-menu-item;
        }

        background-color: var(--color-invisible);
    }

    &#contextSubmenu {
        ul {
            position-anchor: --context-menu-item;
        }

        background-color: var(--color-context);
    }

    ul {
        position: fixed;
        justify-self: anchor-center;

        li {
            display: flex;
            justify-content: center;
            margin: 0 1rem;

            button {
                font-size: 1.5rem;
            }
        }
    }

}



#toursArticleContainer {
    grid-column: 19/25;
    grid-row: 5 / 25;
    background-color: var(--color-article-background);
    color: var(--light-text-color);
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: var(--light-text-color) var(--color-article-background);
    z-index: 6;
    position: relative;
    overflow: hidden;

    button {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        height: var(--button-height);
        width: var(--button-height);

        svg {
            color: var(--light-text-color);
        }
    }

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

    h1 {
        margin-top: 0;
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    #toursArticleId {
        padding: 1em;
        height: 100%;
        overflow: auto;
    }

}

/* -------------- Instructions Déconstruire Page ---------- */
/*
#explodedViewInstructions {
    z-index: 10;
    grid-column: 8/16;
    grid-row: 6/7;
    background-color: var(--color-article-background);
    border-radius: calc(100vh/24);
    color: var(--color-light-blue-628C);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.left-sidebar {
    z-index: 5;
    background-color: var(--color-article-background);
    grid-column: 1/6;
    grid-row: 5/25;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(20, 1fr);
    color: var(--light-text-color);
    font-size: 1rem;
    text-align: center;

    h3 {
        grid-row: 3/5;
        grid-column: 1/6;
        width: 100%;
        height: calc(100vh/12);
        font-size: 1.3rem;
        font-weight: 600;
        margin: 0;
    }

    .hint {
        grid-row: 5/8;
        grid-column: 1/6;
        width: 100%;
        font-style: italic;
    }

    .buttonDiv {
        grid-column: 2/5;
        grid-row: 10/16;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        button {
            width: 100%;
            min-height: calc(100vh/24);
            background-color: var(--color-observer);
            border: none;
            box-shadow: none;
            color: inherit;
            font-size: 1.1rem;
            font-weight: 600;
        }
    }
}

.centeredActionButton{
    position: absolute;
    justify-self: center;
    bottom: calc(100dvh/12);
    background-color: var(--color-experimenter);
    color: var(--light-text-color);
    min-height: calc(100dvh/24);
    padding: 0.5rem;
    font-weight: 600;
    z-index: 1;
}


/* --------- FULL SCREEN IMAGES -------------*/

#fullScreenImageId {
    z-index: 15;
    background-color: transparent;
    grid-column: 2/24;
    grid-row: 2/24;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;

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

#overlayArticleBlur {
    grid-column: 1/25;
    grid-row: 1 /25;
    z-index: 14;
    backdrop-filter: blur(5px);
    background-color: var(--color-article-background);
    background-color: color-mix(in srgb, var(--color-article-background) 20%, transparent);
}

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

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

}


#mainMenuButtonContainer {
    grid-column: 1;
    grid-row: 1/6;
    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;
        }

        margin: 0.3em 0;
        padding-top: 0.3em;
        font-size: 2.3em;
        font-weight: normal;
        position: relative;
    }

    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;
}


/* --------- 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;
    }
} */