body,
html {
    /*otherwise height:100vw causes an overflow*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #e7e8e2;
    --logo-height: min(4rem, calc(100vh/8));
    --color-green-archeology: #206965;
    --color-whitish-archeology: #f6f6f6;
    --color-whitish-transparent-archeology: #f6f6f6e0;
    --color-grey-archeology: #bbbbbb;
    --color-dark-grey-archeology: #444444;
    --color-grey-archeology-transparent: #bbbbbb33;
    --color-background: var(--color-whitish-archeology);
    --color-background-transparent: var(--color-whitish-transparent-archeology);
    --color-accent: var(--color-green-archeology);
    --button-border-radius: 4px;
    --button-height: min(2.5rem, calc(100vh/8));

    --medium-ui-font-size: 1.3rem;
    --margin-base-gap: 1.5rem;
    --margin-title-side: max(var(--margin-base-gap), calc(50vw - 20rem));
    --nav-separation: 36;
    --nav-row: 3;




    button {
        background-color: var(--color-background);
        color: var(--color-dark-grey-archeology);
        font-weight: 700;
        font-size: 1rem;
        border: none;
        border-radius: var(--button-border-radius);

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




    font-family: Lato,
    sans-serif;
    color: var(--color-dark-grey-archeology);

    h1,
    h2,
    h3,
    h4 {
        font-family: 'Libre Baskerville', serif;
    }

    :link {
        color: var(--color-accent);
    }
}

#main {
    display: grid;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    grid-template-columns: repeat(48, 1fr);
    grid-template-rows: repeat(24, 1fr);
    box-sizing: border-box;
    overflow: clip;
    container: main / size;
}

#ecorpusContainerId {
    z-index: 0;
    display: block;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    position: absolute;
}

/*----------------------- Small Smartphone - Default ----------------------*/


#sceneTitle {
    z-index: 6;
    grid-column: 1/49;
    grid-row: 1/3;
    display: flex;
    align-items: center;
    justify-content: left;
    pointer-events: none;
    padding: env(safe-area-inset-top, 50px) max(var(--margin-title-side), env(safe-area-inset-right, 50px)) 0 max(var(--margin-title-side), env(safe-area-inset-left, 50px));
    container: titleContainer / size;
    min-height: 4rem;
    background-color: transparent;


    @media (prefers-reduced-transparency),
    (prefers-contrast: more) {
        background-color: var(--color-accent);
        color: var(--color-whitish-archeology);
    }



    &>div {
        height: fit-content;
        position: relative;
        isolation: isolate;

    }

    h1 {
        font-size: 1.25rem;
        pointer-events: all;
        margin: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        text-wrap: auto;
        text-wrap: pretty;


        @supports not (anchor-name: --scene-title) {
            border-bottom: 1px solid;
        }

        @supports (anchor-name: --scene-title) {
            &>span {
                anchor-name: --scene-title;
            }

            &::after {
                content: "";
                position: absolute;
                z-index: -1;
                position-anchor: --scene-title;
                inset: 0;
                inset-inline: anchor(inside);
                border-bottom: 1px solid;
            }
        }
    }

    /* @container titleContainer (height < 4rem) {
        h1 {
            -webkit-line-clamp: 1;
            line-clamp: 1;
            text-wrap: auto;
        }
    } */
}

#toursArticleContainerId {
    z-index: 5;
    grid-column: 1/49;
    grid-row: 4/25;
    background-color: var(--color-background-transparent);
    backdrop-filter: blur(5px);
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    /* display: grid;
    grid-template-columns: repeat(48, 1fr);
    grid-template-rows: repeat(24, 1fr); */
    font-size: 1rem;
    /* height: 100vh; */
    /* height: 100dvh; */
    height: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    padding-top: 1vh;

    &::before {
        content: "";
        margin: 0 max(var(--margin-title-side), env(safe-area-inset-right, 50px)) env(safe-area-inset-bottom, 50px) max(var(--margin-title-side), env(safe-area-inset-left, 50px));
        width: calc(100% - max(var(--margin-title-side), env(safe-area-inset-right, 50px)) - max(var(--margin-title-side), env(safe-area-inset-left, 50px)));
        height: 0.5px;
        border-top: 1px solid;
        border-image: linear-gradient(to right, transparent 10%, var(--color-grey-archeology) 50%, var(--color-grey-archeology) 75%, transparent 90%) 1;
        position: absolute;
    }

    @media (prefers-reduced-transparency) {
        background-color: var(--color-background);
    }

    @media (prefers-contrast: more) {
        background-color: var(--color-background);
    }

    #toursArticleId {
        /* margin-top: calc(max(4rem, 100vh/12) + max(100vh/24, 1.5rem) + 0.25rem); */
        padding: 0.5rem max(var(--margin-title-side), env(safe-area-inset-right, 50px)) env(safe-area-inset-bottom, 50px) max(var(--margin-title-side), env(safe-area-inset-left, 50px));
        /* grid-column: 1/49;
        grid-row: 4/25; */
        overflow-y: scroll;
        scrollbar-width: thin;
        scrollbar-color: var(--color-accent) transparent;
        display: flex;
        flex-direction: column;
        position: relative;
        mask-image: linear-gradient(to bottom, transparent, white 5%);



        &>*:last-child {
            margin-bottom: calc(var(--logo-height) + 25vh);
        }

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

        button {
            background-color: var(--color-accent);
            color: var(--color-whitish-archeology);
            align-self: center;
            font-size: 1.2rem;
            padding: 0.5rem calc(100vw/24);
            box-sizing: content-box;
            margin-top: 0.5rem;
        }
    }



    h1 {
        font-family: 'Lato', sans-serif;
        font-weight: 700;
        color: var(--color-accent);
        font-size: 1.3rem;
    }

    h2 {
        font-family: 'Lato', sans-serif;
        font-size: 1rem;

    }

}

menu {
    z-index: 6;
    grid-row: var(--nav-row);
    grid-column: 1/49;
    display: flex;
    height: max(100vh/24, 2.5rem);
    align-items: center;
    container-type: size;
    justify-content: space-around;
    padding: 0 max(0, env(safe-area-inset-right, 50px)) 0 max(0, env(safe-area-inset-left, 50px));
    /* padding: max(1vh, env(safe-area-inset-top)) env(safe-area-inset-right, 50px) 0 0; */
    background-color: transparent;
    pointer-events: none;
    margin-left: calc(var(--margin-title-side) - (var(--margin-base-gap)/2));
    margin-right: calc(var(--margin-title-side) - (var(--margin-base-gap)/2));

    @media (prefers-reduced-transparency),
    (prefers-contrast: more) {
        background-color: var(--color-accent);
        color: var(--color-whitish-archeology);
    }

    button {
        padding: 0 min(calc(var(--margin-base-gap)/2), calc(100vw/48)) 0 min(calc(var(--margin-base-gap)/2), calc(100vw/48));
        border: none;
        background: transparent;
        box-shadow: none;
        font-size: 0.85em;
        font-weight: 400;
        flex-grow: 0;
        height: 100%;
        pointer-events: all;



        p {
            text-align: left;
            display: none;
        }

        div {
            height: 100%;
            max-width: 100%;
            display: flex;
            flex-direction: row;
            gap: 1vw;

            align-items: center;
            justify-content: center;

        }

        &:first-child div {
            justify-content: left;

        }

        &:last-child div {
            justify-content: right;

        }

        svg {
            height: 100%;
        }

        /* .noArticle{ */
        &:disabled {
            color: var(--color-grey-archeology)
        }

    }


    #fillerDiv {
        pointer-events: none;
        flex-grow: 15;
    }

    #toggleArticleButtonId {
        color: var(--color-accent);
        font-weight: 700;
        flex-grow: 1;

        svg {
            stroke-width: 2px;
            margin-left: -0.25rem;
        }

        p {
            display: block;
        }
    }
}

/* @container main (width < 30rem) {
    nav {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
} */


#stepNavigation {
    z-index: 1;
    grid-column: 1/49;
    grid-row: 22/25;
    display: flex;
    pointer-events: none;
    align-items: stretch;
    justify-content: center;
    font-size: min(var(--medium-ui-font-size), 100vh/12);
    --stepper-button-height: max(var(--button-height), min(calc(100vw / 12), 100%));
    /* min-height: calc(max(var(--button-height), calc(100vw / 12)) + env(safe-area-inset-bottom, 50px)); */
    min-height: max(var(--button-height), calc(100vw / 16));


    #allStepsButtonsContainerId {
        display: none;

        button {
            pointer-events: all;
        }
    }

    #stepperNavigationId {
        pointer-events: auto;
        width: 100%;
        background-color: var(--color-accent);
        display: flex;
        align-items: center;
        justify-content: stretch;
        color: var(--color-whitish-archeology);
        padding: 0 env(safe-area-inset-right, 50px) env(safe-area-inset-bottom, 50px) env(safe-area-inset-left, 50px);

        button {
            /* margin: 0 0.25rem; */
            height: var(--stepper-button-height);
            width: var(--stepper-button-height);
            padding: 0;
            margin-top: 0;
            margin-left: min(0, -1 * (env(safe-area-inset-left, 50px) - (var(--stepper-button-height))/3));
            margin-right: min(0, -1 * (env(safe-area-inset-right, 50px) - (var(--stepper-button-height))/3));
            margin-bottom: calc(-1 * (env(safe-area-inset-bottom, 50px)));
            background-color: inherit;
            color: inherit;

            svg {
                height: 100%;
            }

            &:disabled {
                opacity: 33%;
            }
        }

        div {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
            height: 100%;

        }

        p {
            margin: 0;
            font-weight: 600;
        }


        --progress-bar-height: 0.5rem;
        --progress-bar-border-radius: calc(var(--progress-bar-height) / 2);

        progress {
            height: var(--progress-bar-height);
            width: 100%;
            background-color: var(--color-dark-grey-archeology);
            border-radius: var(--progress-bar-border-radius);
            border: none 0px;
            padding: 0;

        }

        progress::-webkit-progress-bar {
            background-color: var(--color-dark-grey-archeology);
            border-radius: var(--progress-bar-border-radius);
        }

        progress::-webkit-progress-value {
            background-color: var(--color-whitish-archeology);
            border-radius: var(--progress-bar-border-radius);
        }

        ::-moz-progress-bar {
            background-color: var(--color-whitish-archeology);
            border-radius: var(--progress-bar-border-radius);
        }

    }
}


@supports (anchor-name: --scene-title) {
    #translateButtonId div {
        anchor-name: --anchor-lang-button;
    }
}

#languageSelectionContainer {
    display: none;


    @supports (anchor-name: --scene-title) {
        position-anchor: --anchor-lang-button;
        justify-self: anchor-center;
        top: anchor(bottom);

        &:popover-open {
            display: flex;
        }


    }

    flex-direction: column;
    position: fixed;
    margin: 0.5rem;
    border: none;
    box-shadow: 2px 4px 8px #0000006d;
    border-radius: var(--button-border-radius);
    background-color: var(--color-background);
    overflow: visible;
    padding: 0;

    button {
        font-size: var(--medium-ui-font-size);
        padding: 0.5rem 0.75rem;
        border-width: 4px;
        border-color: var(--color-whitish-archeology);
        border-style: solid;
        border-radius: var(--button-border-radius);
        /* font-variant: small-caps; */
    }

    &::before {
        z-index: -1;
        content: "";
        position: absolute;
        top: -0.5rem;
        left: calc(50% - 0.5rem);
        border-width: 1rem 1rem 0 0;
        border-style: solid;
        border-color: var(--color-whitish-archeology) transparent;
        transform: rotate(45deg);
        box-shadow: 2px 4px 8px #0000006d;

        @supports (anchor-name: --scene-title) {
            position: fixed;
            position-anchor: --anchor-lang-button;
            justify-self: anchor-center;
            top: anchor(bottom);
        }
    }
}

#backupLangSelectionId {
    display: none;

    @supports not (anchor-name: --scene-title) {
        background-color: var(--color-whitish-archeology);
        display: flex;
        flex-direction: column;
        position: absolute;
        top: calc(100vh / 12 + 0.5rem);
        box-shadow: 2px 4px 8px #0000006d;
        padding: 4px;
        border-radius: var(--button-border-radius);

        &::before {
            z-index: -1;
            content: "";
            position: absolute;
            top: -0.5rem;
            left: calc(50% - 0.5rem);
            border-width: 1rem 1rem 0 0;
            border-style: solid;
            border-color: var(--color-whitish-archeology) transparent;
            transform: rotate(45deg);
            box-shadow: 2px 4px 8px #0000006d;
        }
    }

}

.logoContainer {
    z-index: 10;
    pointer-events: none;
    padding: 0.5rem;

    img {
        height: var(--logo-height);
        /* background-color: var(--color-background); */
    }
}

#articleLogoContainer {
    position: absolute;
    right: max(0.5rem, env(safe-area-inset-right, 50px));
    bottom: max(0.5rem, env(safe-area-inset-bottom, 50px));
}

#scenelogoContainer {
    grid-row: 19/22;
    grid-column: 24/49;
    position: relative;

    img {
        position: absolute;
        right: max(0.5rem, env(safe-area-inset-right, 50px));
        bottom: 0.5rem;
        /* bottom: calc(0.5rem + 100vh / 8); */
    }
}


#main {

    &:not(.articleIsVisible) {
        #closeArticleDiv {
            display: none;
        }

        #toursArticleContainerId {
            display: none;
        }
    }

    &.articleIsVisible {
        #openArticleDiv {
            display: none;
        }

        #stepperNavigationId {
            display: none;
        }

        #scenelogoContainer {
            display: none;
        }

        #navBackground {
            pointer-events: all;
            background-color: var(--color-whitish-transparent-archeology);
            grid-row-start: 1;
            grid-row-end: calc(var(--nav-row) + 1);
        }
    }
}

#toggleFullscreenButtonId {

    &:not(.isFullscreen) {
        #exitFullScreenDiv {
            display: none;
        }

    }

    &.isFullscreen {
        #fullScreenDiv {
            display: none;
        }
    }
}

#navBackground {
    grid-row: 1/5;
    grid-column: 1/49;
    z-index: 2;
    background: linear-gradient(var(--color-whitish-transparent-archeology), transparent);
    pointer-events: none;
}

/*----------------------- Landscape prevents title wraping ----------------------*/

@media screen and (orientation:landscape) and (width<=992px) {
    #sceneTitle h1 {
        -webkit-line-clamp: 1;
        line-clamp: 1;
        text-wrap: auto;
    }
}

/*----------------------- Small Size ----------------------*/

@media screen and (width>=576px) {

    #sceneTitle {
        min-height: 2rem;

        div {
            container-name: title-container;
        }
    }

    menu button {

        svg {
            stroke-width: 1.5;
        }

        p {
            display: block;
            font-size: 1.1rem;
        }
    }

}

/*----------------------- Medium Size ----------------------*/
@media screen and (width >=768px) {
    body {
        --nav-separation: 40;
    }

    #sceneTitle {

        h1 {
            font-size: 1.3rem;
        }
    }
}

/* #sceneTitle {
    z-index: 6;
    grid-column: 1/var(--nav-separation);
    grid-row: 1/4;
    display: flex;
    align-items: center;
    justify-content: left;
    pointer-events: none;
    padding: env(safe-area-inset-top, 50px) 0 0 max(var(--margin-title-side), env(safe-area-inset-left, 50px));
    container: titleContainer / size;


    &>div {
        height: fit-content;
        position: relative;
        isolation: isolate;
    }

    h1 {
        font-size: 1.5rem;
        pointer-events: all;
        margin: 0;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        text-wrap: auto;
        text-wrap: pretty;


        @supports not (anchor-name: --scene-title) {
            border-bottom: 1px solid;
        }

        @supports (anchor-name: --scene-title) {
            &>span {
                anchor-name: --scene-title;
            }

            &::after {
                content: "";
                position: absolute;
                z-index: -1;
                position-anchor: --scene-title;
                inset: 0;
                inset-inline: anchor(inside);
                border-bottom: 1px solid;
            }
        }
    }

    @container titleContainer (height < 4rem) {
        h1 {
            -webkit-line-clamp: 1;
            line-clamp: 1;
            text-wrap: auto;
        }
    }
} */


/* nav {
    z-index: 6;
    grid-row: 1/4;
    grid-column: var(--nav-separation)/49;
    display: flex;
    align-items: center;
    container-type: size;
    justify-content: space-around;
    padding: max(1vh, env(safe-area-inset-top)) env(safe-area-inset-right, 50px) 0 0;


    button {
        padding: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        font-size: 0.75em;

        label {
            text-align: center;
        }

        div {
            max-height: 100%;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            gap: 1vw;

            align-items: center;
            justify-content: center;

        }

        svg {
            height: calc(0.8 * var(--button-height));
            width: calc(0.8 * var(--button-height));
        }

        &:disabled {
            color: var(--color-grey-archeology)
        }
    }
} */



/*----------------------- Large Size ----------------------*/
@media screen and (width >=992px) {
    body {
        --nav-separation: 42;
    }

    #sceneTitle {
        grid-column: 3/36;
        grid-row: 1/3;
        padding: 0;


        h1 {
            font-size: 1.5rem;
        }
    }

    menu {
        grid-column: 36/49;
        grid-row: 1/3;
        margin: var(--margin-base-gap) var(--margin-base-gap) 0 0;
        padding: 0;
        min-height: 4rem;

        button {
            div {
                flex-direction: column;
                gap: 0;
                justify-content: flex-start;
            }

            p {
                font-size: 1rem;
                margin: 0;
                text-align: center;
            }

            svg {
                height: 2rem
            }

            #toggleArticleButtonId svg {
                margin-left: 0;
            }
        }
    }
}

/*----------------------- Desktop Size ----------------------*/
@media screen and (width >=1200px) {
    body {
        --margin-title-side: min(1rem, 100vh / 48);
        --button-height: 2rem;
    }

    #main.articleIsVisible {
        #navBackground {
            pointer-events: none;
            background-color: transparent;
            grid-row-end: var(--nav-row);
        }

        #scenelogoContainer {
            display: block;
        }

        /* & nav::after {
            content: "";
            width: 100%;
            height: 1px;
            background: linear-gradient(to right, transparent 10%, var(--color-grey-archeology) 50%, var(--color-grey-archeology) 75%, transparent 90%);
            position: absolute;
            bottom: 0;
        } */
    }

    #navBackground {
        pointer-events: none;
        background-color: transparent;
        grid-row-end: var(--nav-row);
    }

    #sceneTitle {
        z-index: 6;
        grid-column: 13/37;
        grid-row: 1/4;
        justify-content: center;
        padding: 0;

        h1 {
            font-size: min(1.8rem);
            text-align: center;
        }
    }

    #stepNavigation {
        z-index: 5;
        grid-column: 2/9;
        grid-row: 4/22;

        #allStepsButtonsContainerId {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            width: 100%;

            button {
                width: 100%;
                padding: var(--margin-title-side);
                font-size: min(1.3rem);
                border: 3px solid transparent;

                &:active {
                    border-color: var(--color-accent);
                }

                &:hover {
                    border-color: var(--color-accent);
                }

                @media (prefers-reduced-motion: no-preference) {
                    &:hover {
                        transition: background-color 0.25s;
                        transition: border 0.25s;
                    }
                }

            }

        }

        #stepperNavigationId {
            display: none;
        }
    }


    #toursArticleContainerId {
        grid-column: 38/49;
        grid-row: 1/25;
        background-color: var(--color-background);
        padding-top: calc(300vh/24);

        #toursArticleId {
            grid-row: 1/25;

            &> :last-child {
                visibility: hidden;
                margin-bottom: calc(var(--logo-height));
            }

        }

        h1 {
            padding-top: 1rem;
            margin-top: 0;
            max-width: calc(100% - var(--button-height));
        }


    }

    menu {
        margin: 0;
        padding: 0.5rem;
        grid-row: 1/4;
        grid-column: 38/49;
        height: 100%;
        justify-content: space-around;
        position: relative;
        gap: 0.5rem;
        box-sizing: border-box;

        button {
            div {
                justify-content: center;
            }

            &:last-child div {
                justify-content: center;
            }


            &:active {
                background-color: var(--color-grey-archeology-transparent);
            }

            &:hover {
                background-color: var(--color-grey-archeology-transparent);
            }

            @media (prefers-reduced-motion: no-preference) {
                &:hover {
                    transition: background-color 0.25s;
                }
            }
        }

        & #toggleArticleButtonId {
            flex-grow: 0;
        }

        #fillerDiv {
            display: none;
        }
    }


    #articleLogoContainer {
        display: none;
    }

    .hideSceneLogo {
        display: block;
    }

    #scenelogoContainer {
        position: absolute;
        right: 0.5rem;
        bottom: 0.5rem;
    }
}