/*Source sans pro currently loaded via google*/
body,
html {
    /*otherwise height:100vw causes an overflow*/
    margin: 0;
    padding: 0;
    background-color: #e7e8e2;
    --logo-height: 3.5rem;
    --color-green-archeology: #206965;
    --color-whitish-archeology: #f6f6f6;
    --color-grey-archeology: #bbbbbb;
    --color-dark-grey-archeology: #444444;
    --color-background: var(--color-whitish-archeology);
    --color--background: var(--color-grey-archeology);
    --color-accent: var(--color-green-archeology);

    button {
        background-color: var(--color-background);
        color: var(--color-accent);
        font-weight: 700;
        font-variant: small-caps;
        font-size: 1rem;
        border: none;
        border-radius: 4px;

        &.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;
    grid-template-columns: repeat(48, 1fr);
    grid-template-rows: repeat(24, 1fr);
    height: 100vh;
}

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

#buttonContainerId {
    z-index: 5;
    grid-column: 3/8;
    grid-row: 5/17;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;

    button {
        width: 100%;
        padding: 0.5rem;
    }
}

#sceneTitle {
    z-index: 5;
    grid-column: 1/49;
    grid-row: 1/4;
    display: flex;
    align-items: center;
    justify-content: center;

    h1 {
        border-bottom: 1px solid;
    }
}


#toursArticleContainerId {
    z-index: 5;
    grid-column: 38/49;
    grid-row: 1/25;
    background-color: var(--color-background);
    color: var(-);
    overflow-y: auto;
    padding: 1rem;
    padding-bottom: calc(var(--logo-height) + 0.5rem);

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

    h1 {
        font-family: 'Lato', sans-serif;
        font-weight: 700;
        color: var(--color-accent);
        font-size: 1.5rem;
        max-width: (100% - 100vw/96)
            /*To not overlap with the close button*/
    }

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

    }



    .closeArticleButton {
        --height-close-button: 2rem;
        position: fixed;
        top: 0.2rem;
        left: calc(100% - var(--height-close-button) - 0.5rem);
        height: var(--height-close-button);
        width: var(--height-close-button);
        padding: 0;
        border: none;
        background: transparent;
        box-shadow: none;

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

    }
}


#logoContainer {
    z-index: 10;
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;

    img {
        height: var(--logo-height);
    }
}

#languageSelectionContainer {
    grid-column: 2/10;
    grid-row: 1 / 4;
    z-index: 5;
    border: none;
    display: flex;
    align-items: center;

    fieldset {
        border: none;
        display: flex;
    }

    button {
        padding: 0.5rem;
        border-radius: 50%;
        margin: 0.5rem;
    }
}