@font-face {
    font-family: 'JustMeAgainDownHere';
    src: url(../assets/fonts/just-me-again-down-here/JustMeAgainDownHere-Regular.ttf);
}

@font-face {
    font-family: 'Cinzel';
    src: url(../assets/fonts/Cinzel/Cinzel-VariableFont_wght.ttf);
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-200-normal.woff2);
    font-style: normal;
    font-weight: 200;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-200-italic.woff2);
    font-style: italic;
    font-weight: 200;
}


@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-300-normal.woff2);
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-300-italic.woff2);
    font-style: italic;
    font-weight: 300;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-400-normal.woff2);
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-400-italic.woff2);
    font-style: italic;
    font-weight: 400;
}



@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-600-normal.woff2);
    font-style: normal;
    font-weight: 600;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-600-italic.woff2);
    font-style: italic;
    font-weight: 600;
}


@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-700-normal.woff2);
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-700-italic.woff2);
    font-style: italic;
    font-weight: 700;
}


@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-900-normal.woff2);
    font-style: normal;
    font-weight: 900;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url(../assets/fonts/source-sans-pro/source-sans-pro-latin-900-italic.woff2);
    font-style: italic;
    font-weight: 900;
}

/*Source sans pro currently loaded via google*/

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

    /*--color--pink: #915672;*/

    --color-dark-blue: #0A1628;
    --color-dark-blue-transparent: #0A1628ee;
    --color-dark-blue-very-transparent: #0a1628aa;
    --color-accent-1: #5DADE2;
    --color-accent-2: #d1a613;
    --color2--whitish: #ffffff;
    --color-grey: #dbe9ea;
    --color-dark-grey: #39465a;

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

    --animation-duration: 0.25s;
    animation-duration: var(--animation-duration);
    text-wrap: pretty;

}

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


button {
    font-family: "Source Sans Pro", sans-serif;
    background-color: var(--color-dark-blue);
    color: var(--color2--whitish);
    border: solid 1px var(--color-grey);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    box-shadow: 2px 4px 6px #0000006d;
    border-radius: var(--button-corner-radius);
    font-weight: normal;
}

.align-center {
    img {
        display: block;
        margin-left: auto;
        margin-right: auto
    }
}

figcaption {
    font-size: 0.75rem;
    color: var(--color-dark-grey);
    text-align: center;
}

/* --------- ZODIAC PAGE -------------*/

#zodiacRangeContainer {
    grid-column: 2/11;
    grid-row: 10/13;
    /*filter: blur(5px);*/

    display: grid;
    grid-template-columns: repeat(9, 1fr);
    --thumb-size: 8rem;
    align-items: center;



    #zodiacRangeInputContainer {
        grid-column: 1/10;
        grid-row: 1;
        z-index: 7;
        display: flex;
        justify-content: center;
    }

    #zodiacRange {
        width: calc(71.3% + var(--thumb-size));
        background-color: transparent;
        appearance: none;
        margin: 0;
        height: fit-content;
    }

    .active {
        ::-webkit-slider-thumb {
            background-image: url(../assets/Soleil\ 3.png);
            filter: drop-shadow(2px 4px 6px #0000006d);
        }
    }

    ::-webkit-slider-thumb {
        appearance: none;
        background-image: none;
        background-size: 100% 100%;
        width: var(--thumb-size);
        height: var(--thumb-size);
        border-radius: 50%;

    }

    .zodiacCalendar {
        grid-column: 2/9;
        grid-row: 1;
        z-index: 1;

        display: flex;
        justify-content: space-around;
        align-items: center;


        div {
            border-radius: calc(var(--thumb-size)/4);
            height: calc(var(--thumb-size) /2);
            width: calc(var(--thumb-size) /2);
            background-color: var(--color-dark-blue);
            color: var(--light-text-color);
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            box-shadow: 2px 4px 6px #0000006d;
        }

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

        svg {
            width: inherit;
            height: inherit;
            filter: invert(100%);
            padding-top: 25%;
        }
    }

}

#zodiacIntroButtonContainer {
    z-index: 8;
    grid-column: 1/3;
    grid-row: 11;
    display: flex;
    align-items: center;

    button {
        font-size: 1.3rem;
        border: none;
        height: calc(8rem / 2);
        border-radius: 2rem;
        padding: 1rem;
        margin-left: calc(150vw/12 - 7.5vw);
        box-shadow: 2px 4px 6px #0000006d;
    }

    button.active {
        background-color: #d1a613;
    }
}

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

#logosId {
    pointer-events: none;
    grid-column: 11/13;
    grid-row: 11/13;
    z-index: 7;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    opacity: 80%;

    .logo {
        filter: brightness(0) invert(1) drop-shadow(2px 4px 6px #00000098);
        height: 7vh;
    }

    .logo_lille {
        height: 9vh;
    }
}

/* ---------- TOOLTIPS ---------- */
.tooltip {
    color: var(--color-dark-blue);
    position: absolute;
    background-color: var(--color2--whitish);
    font-size: 1.3rem;
    padding: 6px 12px;
    max-width: 30em;
    border: var(--color-dark-blue) solid 2px;
    width: fit-content;
    z-index: 20;
    position-area: end;
    animation: fade-in var(--animation-duration) ease-in;
    min-width: 15rem;
}

.tooltip-text {
    border-bottom: 2px dotted var(--color-accent-2);
    cursor: help;
}

/* tool tip shrink wrap - ideas comming from https://kizu.dev/shrinkwrap-problem/*/
@supports (anchor-name: --tooltip-text) {
    .tooltip {
        background: none;
        border: none;

        &>span {
            anchor-name: --tooltip-text;
        }

        &::after {
            content: "";
            position: absolute;
            inset: 0px calc(anchor(inside) - 12px);
            border: var(--color-dark-blue) solid 2px;
            position-anchor: --tooltip-text;
            background: var(--color2--whitish);
            z-index: -1;
        }
    }
}


/* =========================================== APPLICATION V1 =============================================== */


/* ---------- Language Menu ---------- */

.navContainer {
    --button-size: 3vw;

    width: calc(4*var(--button-size));
    border: none;
    padding: 0;
    padding: 2vw;
    margin: 0;
    /*display: flex;
    justify-content: space-evenly;*/
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;

    button {
        height: var(--button-size);
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: calc(var(--button-size)/2.5);
    }

    .roundButton {
        width: var(--button-size);
        height: var(--button-size);
        font-size: calc(var(--button-size)/2.5);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        box-sizing: border-box;
        background-color: transparent;
        /* background-color: var(--color2--whitish);
        border: solid 2px var(--color-dark-blue); */
        border: none;

        /* border: solid 2px var(--color-accent-1) ;
        color: var(--color-dark-blue); */
        img {
            height: 100%;
            filter: drop-shadow(2px 4px 6px #0000006d);

        }
    }

    #skipVideoButtonId {
        grid-column: 1/3;
        grid-row: 1;
        border: none;
        border-radius: calc(var(--button-size)/2);
        width: 100%;
    }
}

#languageSelectionContainer {
    grid-column: 1/3;
    grid-row: 1/3;
    z-index: 10;
    pointer-events: none;
}

#languageSelectionId {
    input[type="radio"] {
        /* Add if not using autoprefixer */
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
    }

    label {
        border: solid 2px var(--color-accent-2);
        color: var(--color2--whitish);
        background-color: var(--color-dark-blue-transparent);
        box-shadow: 2px 4px 6px #0000006d;
        pointer-events: all;
    }


    input[type="radio"]:not(:checked)+label {
        animation: languages-background-deactivate var(--animation-duration) ease-out;
    }

    input[type="radio"]:checked+label {
        animation: languages-background-activate var(--animation-duration) ease-out;
        background-color: var(--color-accent-2);
        color: var(--color2--whitish);
    }
}

@keyframes languages-background-activate {
    from {
        background-color: var(--color-dark-blue-transparent);
    }

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

@keyframes languages-background-deactivate {
    from {
        background-color: var(--color-accent-2);
    }

    to {
        background-color: var(--color-dark-blue-transparent);
    }
}

#helpAndOtherPagesContainer {
    grid-column: 11/13;
    grid-row: 1/3;
    justify-self: right;
    color: var(--color-dark-blue);

    svg {
        fill: currentColor;
    }

    #creditsNavId {
        border: none;
        font-size: 1.8em;
    }

    button {
        z-index: 7;
    }

    /* #mainMenuButtonId {
        z-index: 10;
    } */

    .roundButton {
        box-shadow: none;
    }
}



/* ---------- main Menu Section  ---------- */


.mainMenuSection {
    margin-left: 60px;
    grid-column: 7/13;
    grid-row: 3/11;
    z-index: 5;
    background-color: transparent;
    margin: 0;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: var(--color2--whitish);
    font-family: 'Cinzel', 'serif';
    text-shadow: 0 4px 6px #0000006d;

    h1 {
        font-size: 4.8rem;
        /*9rem*/
        margin: 0;
        font-weight: bold;
        line-height: 0.8em;
        font-family: 'Cinzel', 'serif';
        text-shadow: 0 4px 6px #0000006d;
    }

    h2 {
        font-size: 3.3rem;
        margin: 0;
        font-weight: 400;
        border-bottom: solid 5px var(--color-accent-2);
        text-align: center;
        box-shadow: 0 4px 6px -6px #0000006d;
        margin-bottom: 5rem;
    }

    /* &:before {
        content: '';
        line-height: 0;
        font-size: 0;
        width: 0;
        height: 0;
        border-bottom: 100vh solid var(--color-dark-blue);
        border-left: calc(100vw/12) solid transparent;
        position: absolute;
        left: calc(500vw/12);
        z-index: 6;
    }*/

    #mainMenuNav {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 10;
        height: calc(500vh/12);

        button {
            background-color: var(--color-dark-blue);
            color: var(--color2--whitish);
            border: solid 1px var(--color-grey);
            height: calc(100vh/8);
            width: calc(100vw/3);
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            box-shadow: 2px 4px 6px #0000006d;
            border-radius: 1vh;

            div {

                text-align: left;
                margin: 0;

                h3 {
                    font-size: 2rem;
                    font-weight: 600;
                    margin: 0;
                }

                p {
                    font-size: 1.4rem;
                    font-weight: 400;
                    margin: 0;
                    color: var(--color-grey);
                }
            }

            img {
                height: 66%;
                margin: 0 calc(100vh/48) 0 calc(100vh/48);
                /* Version avec les bulles */
                /* margin: 0 calc(100vh/48) 0 calc(100vh/48);
                    border: var(--color-grey) 1px solid;
                    border-radius: 50%;
                    padding: 1em;
                    background-color: #bdbdbd30; */

            }

            svg {
                transform: scale(2.6);
                height: 20%;
                width: 10%;
                padding: 2.6%;
            }
        }
    }
}

/* --------------HISTORY AND FAMILY PAGE --------------------*/


#toursExploreButtonsContainer,
#familyButtonContainer {
    grid-row: 1/3;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    pointer-events: none;
    font-size: 3rem;
    font-family: 'Cinzel', sans-serif;
    font-weight: 600;
    color: var(--color2--whitish);
    text-shadow: 2px 4px 6px #0000006d;

    button {
        font-size: 3rem;
        font-weight: 600;
        pointer-events: auto;
        background-color: transparent;
        box-shadow: none;
        border: none;
        border-radius: 0;
        font-family: 'Cinzel', sans-serif;
        border-bottom: var(--color2--whitish) 1px solid;
        text-shadow: 2px 4px 6px #0000006d;
        box-shadow: 0 4px 6px -6px #0000006d;

        &.active {
            color: var(--color-accent-2);
            border-bottom-color: var(--color-accent-2);
            border-bottom-width: 4px;
            box-shadow: 0 4px 6px -6px #0000006d;

        }
    }
}


/* ---------- HISTORY PAGE + GALLERY PAGE------------ */
#historyPage {
    /*    --column-container-width: 90vw;
    --column-container-height: 80vh;*/
    --title-row-size: 4;


    grid-column: 1/13;
    grid-row: 1/13;
    background-color: rgba(24, 56, 102, 0);
    z-index: 5;
    /*display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;*/
    display: grid;
    grid-template-columns: repeat(48, 1fr);
    grid-template-rows: repeat(24, 1fr);

    &>h1 {
        grid-row-start: 1;
        grid-row-end: var(--title-row-size);
        grid-column: 1 / 49;
        text-align: center;
        color: var(--color2--whitish);
        font-family: 'Cinzel';
        font-weight: 600;
        font-size: 4rem;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-shadow: 0 4px 6px #0000006d;
    }

    .columnContainer {
        width: var(--column-container-width);
        height: var(--column-container-height);
        display: grid;
        grid-template-columns: 2fr 4fr 2fr;
        column-gap: var(--column-gap-size);
        overflow: hidden;
    }

    .column {
        grid-row-start: var(--title-row-size);
        grid-row-end: 24;
        background-color: var(--color-dark-blue-transparent);
        color: var(--color2--whitish);
        padding: calc(100vw/96);
        /* height: calc(var(--column-container-height) - (2*var(--column-gap-size))); */
        overflow-y: auto;
        scrollbar-color: var(--color-accent-2) var(--color-dark-blue-transparent);
        scrollbar-width: thin;
        font-weight: normal;
        /* border: solid 1px var(--color-grey); */
        /* --s:calc(100vw/12); */
        /* border: 2px solid var(--color-accent-2); */
        border-radius: 1vh;
        /* the color here */
        /*mask:*/
        /* conic-gradient(at var(--s) var(--s), #0000 75%, #000 0) 0 0/calc(100% - var(--s)) calc(100% - var(--s)), */
        /* conic-gradient(at var(--s) var(--s), #0000 75%, #000 0),
            conic-gradient(from 0.5turn at calc(100% - var(--s)) calc(100% - var(--s)), #0000 75%, #000 0),
            conic-gradient(#000 0 0) padding-box; */
        box-shadow: 2px 4px 6px #0000006d;


        &#articleColumn {
            padding: calc(100vw/48);
            grid-column: 14 / 36;
            font-size: 1.5rem;

            h1 {
                font-weight: 600;
                font-size: 2.5rem;
                margin-top: 0;
            }
        }


        &#friseColumn {
            grid-column: 3 / 13;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;

            input[type="radio"] {
                /* Add if not using autoprefixer */
                -webkit-appearance: none;
                appearance: none;
                margin: 0;
            }

            &>div {
                display: flex;
            }

            label {
                /* background-color: var(--color-hc-blue);
        color: var(--color2--whitish);*/
                display: flex;
                align-items: center;

                .friseDot {
                    height: 1.5vw;
                    width: 1.5vw;
                    min-width: 1.5vw;
                    border-radius: 50%;
                    background-color: var(--color-dark-blue);
                    border: 2px solid var(--color-accent-2);
                    box-sizing: border-box;
                }

                .friseEvtLabel {
                    padding-left: 0.5em;


                    .date {
                        color: var(--color-accent-2);
                        font-size: 1.7rem;
                        font-weight: 600;
                    }

                    .description {
                        font-size: 1.25rem;
                    }
                }

            }

            input[type="radio"]:checked+label>.friseDot {
                /* background-color: var(--color-accent-2); */
                background-image: url("../assets/Soleil\ 1.png");
                background-size: 100%;
                background-position: center;
                width: calc(1.5vw*1.5);
                height: calc(1.5vw*1.5);
                border: none;
                margin: calc(-1.5vw *0.25);
            }
        }

        &#biographyColumn {
            grid-column: 37 /47;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 1.3rem;

            svg {
                fill: var(--color2--whitish);
                width: 70%;
                height: 40%;
            }

            .help {
                font-style: italic;
                text-align: center;
            }

            img {
                max-width: 14vw;
                height: auto;
                max-height: 30vh;
                width: auto;
            }

            figure {
                margin: 0;
            }

            h1 {
                margin: 0;
                text-align: center;
                font-size: 1.7rem;
            }

            h2 {
                font-size: 1.5rem;
                font-weight: normal;
                margin: 0;
            }

            .inline-icon {
                display: inline-block;
                height: 1.5rem;
            }
        }

        &#galeryColumn {
            grid-column: 3 / 36;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-column-gap: calc(100vw/96);
            grid-row-gap: calc(100vw/96);
            padding: calc(100vw/48);

            div {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-end;
                height: calc(20 / 24 * 33vh - 100vw / 48);

                p {
                    font-size: 1.25rem;
                    margin: 0;
                    margin-top: calc(var(--column-gap-size)/6);
                }

                &.selected {
                    img {
                        border: 4px solid var(--color-accent-2);
                        animation: border-fade-in var(--animation-duration) ease-out;
                    }
                }
            }

            img {
                /* width: 66%; */
                box-sizing: border-box;
                border: transparent solid 4px;
                animation: border-fade-out var(--animation-duration) ease-out;
                height: calc(100% - 25px);
            }
        }
    }
}

@keyframes border-fade-in {
    from {
        border-color: transparent;
    }

    to {
        border-color: var(--color-accent-2);
    }
}

@keyframes border-fade-out {
    from {
        border-color: var(--color-accent-2);
    }

    to {
        border-color: transparent;
    }
}


/* ----------- FAMILY PAGE ----------------------*/

#familyButtonContainer {
    grid-column: 3/11;
}

#familyToggleAnnotationID {
    z-index: 5;
    grid-column: 6/8;
    grid-row: 11;
    font-size: 1.3rem;
    border: none;
    /* border: solid 2px var(--color-accent-2); */
    border-radius: calc(100vh / 24);
    display: flex;
    align-items: center;
    justify-content: center;

    .annotationsVisible {
        display: none;
    }

    .annotationsNotVisible {
        display: flex;
    }

    &.active {
        background-color: var(--color-accent-2);

        .annotationsVisible {
            display: flex;
        }

        .annotationsNotVisible {
            display: none;
        }
    }

    p {
        align-items: center;

        svg {
            margin-right: 1rem;
        }
    }
}


/* ---------- TOUR PAGE + EXPLORE PAGE------------ */
/* .mulitpleColumnArticle {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr 1fr;
    padding: calc(100vw / 96);
    column-gap: calc(100vw / 96);
    flex-wrap: wrap;
    max-height: 100%;
    &>*{
        width: 40%;
    }

    &>p{
        margin: 0.2rem 0;
        font-size: 1.2rem;
    }

    img {
        max-width: 60%;
        height: auto;
    }
} */

.leftSideText {
    z-index: 4;
    color: var(--color2--whitish);
    font-family: 'Cinzel';
    rotate: 180deg;
    grid-column: 1;
    grid-row: 4/10;
    writing-mode: vertical-rl;
    /* text-orientation: upright; */
    font-size: 2rem;
    font-weight: 600;
    padding: calc(100vw/96);
    text-align: center;
    text-shadow: 2px 4px 6px #0000006d;
}

#ExploreArticleOverlayContainerId {
    grid-column: 1/13;
    grid-row: 1 / 13;
    background-color: var(--color-dark-blue-transparent);
    color: var(--color2--whitish);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent-2) var(--color-dark-blue-transparent);
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(48, 1fr);
    grid-template-rows: repeat(24, 1fr);

    .titleContainer {
        grid-row: 1 / 4;
        grid-column: 1 / 49;
        text-align: center;
        color: var(--color2--whitish);
        font-family: 'Cinzel';
        font-weight: 600;
        font-size: 1.5rem;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;

    }

    #exploreArticleId {
        grid-row: 5 / 21;
        grid-column: 3 / 47;
        column-gap: calc(100vw/96);
        column-count: 3;
        font-size: 1.5rem;

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

    .buttonContainer {
        grid-row: 22 / 24;
        grid-column: 2 / 48;
        display: flex;
        justify-content: center;
        align-items: center;

        button {
            font-size: 1.8rem;
            margin: calc(100vw/48);
        }
    }
}

#toursExploreButtonsContainer {
    grid-column: 4/10;
}

#toursOptionsContainer {
    grid-row: 4 / 10;
}

.toursExploreOptionsContainer {
    pointer-events: none;
    grid-column: 1/4;
    grid-row: 3 / 11;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;

    button {
        font-size: 1.5em;
    }
}



.toursExploreOptionsContainer>button,
#ExploreArticleOverlayContainerId button {
    pointer-events: auto;
    /*color: var(--color-dark-blue);
    background-color: var(--color2--whitish);
    border: solid 2px var(--color-dark-blue);
    border-radius: 0;*/
    width: 15vw;
    padding: 0.3em;
    display: inline-block;

    &.active {
        background-color: var(--color-dark-blue);
        color: var(--color2--whitish);
        box-shadow: 3px 3px var(--color-accent-2), 5px 7px 6px #0000006d;

    }
}

#toursArticleContainerId {
    grid-column: 10/13;
    grid-row: 3 / 12;
    background-color: var(--color-dark-blue-transparent);
    padding: calc(100vw/96);
    color: var(--color2--whitish);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent-2) var(--color-dark-blue-transparent);
    z-index: 6;
    box-shadow: 2px 4px 6px #0000006d;

    figure {
        display: flex;
        flex-direction: column;
    }

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

    h1 {
        margin-top: 0;
        font-size: 2rem;
        max-width: calc(100% - 100vw/96);
        /*To not overlap with the close button*/
    }

    font-size: 1.4rem;

    .closeArticleButton {
        position: fixed;
        top: calc(200vh / 12 + 0.2rem);
        left: auto;
        right: 0.2rem;
    }


}

#toursNavigation {
    --tour-navigation-background-color: var(--color-dark-blue);
    --tour-navigation-text-color: var(--light-text-color);
    grid-column: 4/10;
    grid-row: 11/13;
    display: flex;
    flex-direction: row;
    justify-content: center;
    z-index: 6;
    color: var(--tour-navigation-text-color);
    pointer-events: none;


    div {
        pointer-events: auto;
        display: flex;
        flex-direction: row;
        background-color: var(--tour-navigation-background-color);
        height: 8vh;
        /* border: solid 1px var(--color-grey); */
        border-radius: 4vh;
        overflow: clip;
        box-shadow: 2px 4px 6px #0000006d;

        & * {
            box-shadow: none;
        }

        div {
            flex-direction: column;
            align-items: center;
            border: none;
            width: 24vh;
            margin: 0;

            p {
                font-size: 1.5em;
                margin: 1vh;
            }

            progress {
                height: 2vh;
                width: 20vh;
                background-color: var(--tour-navigation-background-color);
            }

            progress::-webkit-progress-bar {
                background-color: var(--tour-navigation-background-color);
                border: 1px solid var(--tour-navigation-text-color);
                border-radius: 1vh;
            }

            progress::-webkit-progress-value {
                background-color: var(--tour-navigation-text-color);
                border-radius: 1vh;
            }

        }
    }

    button {
        height: 8vh;
        background-color: var(--tour-navigation-background-color);
        border: none;
        color: var(--tour-navigation-text-color);

        &:disabled {
            color: var(--color-dark-grey);
        }
    }

    svg {
        height: 3em;
        width: 3em;
        /*filter: drop-shadow(2px 2px 0px var(--color-accent-2));*/
    }
}

/* ----------- OVERLAY ARTICLES -----------*/
/* For credits, help, zodiac intro*/
#overlayArticleBlur {
    grid-column: 1/13;
    grid-row: 1 /13;
    z-index: 8;
    backdrop-filter: blur(5px);
    background-color: var(--color-dark-blue-very-transparent);
}

.closeArticleButton {
    --height-close-button: 3em;
    position: sticky;
    top: 0;
    left: 100%;
    height: var(--height-close-button);
    width: var(--height-close-button);
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    filter: drop-shadow(2px 4px 6px #0000006d);

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


.articleContainer {
    grid-column: 3/11;
    grid-row: 2/12;
    z-index: 9;
    display: block;
    padding-top: 0.5em;

    height: fit-content;
    width: fit-content;
    margin: auto;

    .closeArticleButton {
        padding-right: 0.5em;
    }

    .article {
        /* margin: 0 10em 2em 10em; */
        padding: calc(100vh/24) calc(100vh/12);
        margin-top: -3rem;
        max-width: 40vw;
    }

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

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


    overflow-y: auto;
    color: var(--color2--whitish);

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

    .article>p {
        font-size: 1.2em;
        margin: 0.8em 0;
        line-height: 1.55em;

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

    scrollbar-width: thin;
}

/* --------- VIDEO PAGES -------------*/

#exploreVideoPageID,
#familyVideoPageID {
    grid-row: 1 / 13;
    grid-column: 1 / 13;
    z-index: 6;
    background-color: black;
    overflow: hidden;

    video {
        height: 100%;
        width: 100%;
    }
}

.fade-in-delayed {
    animation: fade-in-delayed calc(var(--animation-duration) *2) ease-in;
    opacity: 1;

    &#historyPage,
    &#zodiacRangeContainer {
        animation: '';
        opacity: 1;
    }
}

.fade-in {
    animation: fade-in var(--animation-duration) ease-in;
    opacity: 1;


    &#historyPage,
    &#zodiacRangeContainer {
        animation: '';
        opacity: 1;
    }
}


.fade-out {
    animation: fade-out var(--animation-duration) ease-out;
    opacity: 0;

    &#zodiacRangeContainer {
        animation: '';
        opacity: 1;
    }

    &.videoPage{
        animation: video-fade-out calc(var(--animation-duration)*3) ease-out;
    }
}

@keyframes fade-in-delayed {
    0% {
        opacity: 0;
        display: none;
    }

    50% {
        opacity: 0;
        display: none;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        display: none;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        display: none;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes video-fade-out {
    0%  {
        clip-path: circle(100% at 88vw 3.5vw);
        opacity: 1;
    }

    100% {
        clip-path: circle(0% at 88vw 3.5vw);
        opacity: 0;
    }
}


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

#fullScreenImageId {
    z-index: 15;
    background-color: transparent;
    grid-column: 2/12;
    grid-row: 2/12;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: visible;
    color: var(--color2--whitish);
    height: stretch;
    width: stretch;

    img {
        max-width: calc(1000vw/12);
        max-height: calc(1000vh/12);
    }

    figcaption {
        color: var(--color2--whitish);
    }
}

#overlayArticleBlur {
    &.overEverythingBlur {
        z-index: 14;
    }
}

/* ---------- BIOGRAPHY links ---------- */
.biography-link {
    color: var(--color-accent-2);
    text-decoration: underline;
}