* {
    box-sizing: border-box;
}

em {
    font-weight: bold;
}

a[href],
a[href]:visited {
    color: var(--tu-blue);
}

:root {
    --bright: #F5F5F5;
    --bright2: #F4F4F4;
    --tu-ace-blue: #2499D6;
    --tu-blue: #006699;
    --button-border: 2px solid var(--tu-blue);
    --button-radius: 5px;
    --nav-button-radius: 5px 5px 15px;
    --main-radius: 15px;
    --main-content-padding: 5px;
}

body {
    display: grid;
    grid-template-areas:
        "header header"
        "nav main"
    ;
    grid-template-columns: 15rem 1fr;
    grid-template-rows: auto 1fr;
    height: 100vh;
    margin: 0;
    width: 100vw;

    transition: ease-in-out;
    transition-duration: 0.25s;

    @media (min-width: 500px) and (max-width: 900px) {
        grid-template-columns: 2rem 1fr;
        transition: ease-in-out;
        transition-duration: 0.25s;
    }

    @media (max-width: 500px) {
        grid-template-areas:
            "header"
            "nav"
            "main"
        ;
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(95vh, 1fr);
    }
}

img {
    width: 100%;
}

header {
    align-items: center;
    background-color: var(--tu-blue);
    color: var(--bright);
    display: flex;
    flex-direction: row;
    grid-area: header;
    justify-content: space-between;
    padding-left: 30px;
    padding-right: 30px;
}

header>#lang>select {
    font-size: 1rem;
    border: var(--button-border);
    border-radius: var(--button-radius);
}


header>#lang>select:hover,
header>#lang>select:focus-visible {
    outline: 3px solid var(--bright2);
    outline-offset: .2rem;
    transition: ease-in-out;
    transition-duration: 0.25s;
}

nav {
    background-color: var(--bright2);
    grid-area: nav;
    overflow-x: auto;
    padding: 0.3em;


    @media (min-width: 500px) and (max-width: 900px) {
        overflow: hidden;
    }

    @media (max-width: 500px) {
        overflow-x: inherit
    }
}

nav:hover,
nav:focus,
nav:active,
nav:target,
nav:focus-within {
    @media (min-width: 500px) and (max-width: 900px) {
        width: fit-content;
        overflow-y: scroll;
        z-index: 1;
        transition: ease-in-out;
        transition-duration: 0.25s;
    }
}

nav:not(:hover) *,
nav:not(:focus) *,
nav:not(:active) *,
nav:not(:target) *,
nav:not(:focus-within) * {
    @media (min-width: 500px) and (max-width: 900px) {
        visibility: hidden;
        transition: ease-in-out;
        transition-duration: 0.25s;
    }
}

nav:hover *,
nav:focus *,
nav:active *,
nav:target *,
nav:focus-within * {
    @media (min-width: 500px) and (max-width: 900px) {
        visibility: initial;
        transition: ease-in-out;
        transition-duration: 0.25s;
    }
}

nav>a {
    background-color: var(--tu-ace-blue);
    border: var(--button-border);
    border-radius: var(--nav-button-radius);
    color: var(--bright);
    display: block;
    margin: 0.8rem auto;
    padding: 0.5rem 0 0.5rem 0;
    text-align: center;
    transform: translateX(-0.5rem);
    transition: ease-in-out;
    transition-duration: 0.25s;
    text-decoration: unset;
    text-transform: capitalize;
    width: 85%;
}

nav>a[href],
nav>a[href]:visited {
    cursor: pointer;
    color: var(--bright);
}

nav>a:not([href]),
nav>a:not([href]):visited {
    cursor: default;
}

nav>a:hover,
nav>a:focus-visible,
nav>a:not([href]) {
    transform: translateX(0.5rem);
    transition: ease-in-out;
    transition-duration: 0.25s;
}

nav>a[href]:hover,
nav>a[href]:focus-visible {
    outline: 3px solid var(--tu-ace-blue);
    outline-offset: .2rem;
    transition: ease-in-out;
    transition-duration: 0.25s;
}

nav>a[href="#"] {
    text-transform: uppercase;
    letter-spacing: -0.05rem;
    transition: ease-in-out;
    transition-duration: 0.25s;
}

main {
    grid-area: main;
    line-height: 1.5;
    overflow: auto;
    display: grid;
    grid-template-columns: 1fr 600px 1fr;
    grid-template-rows: 1fr;
    padding: 1rem;

    @media (max-width: 500px) {
        height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
}

main>div {
    grid-column-start: 2;
    grid-column-end: 3;

    @media (max-width: 500px) {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    border-radius: var(--main-radius);
    border: var(--button-border);
    border-color: var(--tu-ace-blue);
    /* margin: var(--main-radius); */
    overflow: auto;
    padding: var(--main-content-padding);

}

main>div.container>div.content {
    overflow: auto;
    height: 100%;
    padding: var(--main-content-padding);
}


figure.carousel {
    display: grid;
    grid-template-areas:
        "image image image"
        "prev description next"
    ;
    grid-template-columns: 3rem 1fr 3rem;
    grid-template-rows: auto 2rem;
}

figure.carousel>img {
    grid-area: image;
}

figure.carousel>button.previous {
    grid-area: prev;
}

figure.carousel>button.next {
    grid-area: next;
}