:root {
    --division-width: 60vw;
    --medium-breakpoint: 768px;
    --large-breakpoint: 1024px;

    --font-header-large: 96px;
    --font-header-medium: 64px;
    --font-header-small: 48px;
    --font-header-tiny: 32px;

    --font-body-medium: 24px;
    --font-body-small: 20px;
    --font-body-tiny: 16px;
}

html {
    padding: 0px;
    margin: 0px;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

body {
    padding: 0px;
    margin: 0px;
    font-family: "Lato", sans-serif;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-section {
    opacity: 0;
    animation: fade-in 600ms forwards;
}


.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.container {
    display: flex;
    flex-direction: column;
    height: auto;
    width: 100%;

    @media only screen and (1024px < width) {
        flex-direction: row;
    }
}

.container>aside {
    position: relative;
    top: 0;
    left: 0;

    height: 30vh;

    @media only screen and (1024px < width) {
        flex: 3;
        position: sticky;
        height: 100vh;
    }

    background-color: black;

    >figure {
        margin: 0;
        width: 100%;

        >img {
            object-fit: cover;
            width: 100%;
            height: 100%;
        }

        >figcaption {
            display: none;

            position: absolute;
            z-index: 1;
            width: auto;
            height: auto;
            bottom: 2em;
            left: 2em;

            border-radius: 1em;
            box-shadow: 3px 3px 3cap rgb(0, 0, 0, 0.4);
            background-color: var(--background);
            padding: 1.5em;

            a {
                color: var(--primary);
                text-decoration: none;
                font-size: var(--font-body-medium);
                &:hover {
                    text-decoration: underline;
                }
            }

            & p {
                margin: 0px;
            }

            @media only screen and (1024px < width) {
                display: unset;
            }

        }
    }
}

figure.inactive {
    position: absolute;
    height: 100%;

    img {
        opacity: 0;
        transition: opacity 0.2s ease-out;

    }

    figcaption {
        display: none;
    }
}

figure {
    position: absolute;
    height: 100%;
    display: block;

    img {
        opacity: 1;
        transition: opacity 0.2s ease-in;

    }
}

.content {
    flex: 2;
    position: relative;
    /* margin-left: var(--division-width); */
    z-index: 1;
    box-shadow: -12px 0 12px rgb(0, 0, 0, 0.2);
    background-color: var(--background, #fffaee);
    color: var(--primary, #2d4f2b);
    font-weight: 400;
    min-height: calc(100vh - 4em);

    @media only screen and (1024px < width) {
        min-width: var(--content-min-width, 600px);
    }


    .pageSection {
        padding: 0em 2em;
        padding-top: 64px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        div.card {
            transition: all 0.2s ease-out allow-discrete;
            cursor: pointer;
            margin-bottom: 2em;

            p {
                font-size: 16px;
            }

            padding: 1em;
            background-color: var(--background-light);
            border-radius: 0.5em;

            &:hover {
                box-shadow: 4px 4px 4px rgb(0, 0, 0, 0.2);
            }

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

        @media only screen and (1024px < width) {
            padding: 4em 4em;
        }
    }
}

/* Navbar */
nav {
    position: relative;
    width: 100%;
    width: -moz-available;
    /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available;
    /* Mozilla-based browsers below 146 will ignore this. */
    width: stretch;
    z-index: 2;
    top: 0;
    height: auto;
    /* overflow: scroll; */

    @media only screen and (1024px < width) {
        height: 0px;
        position: fixed;
        /* overflow: initial; */
    }
}

nav>ul {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: var(--navbar-background);
    cursor: pointer;
    overflow-x: auto;
    anchor-name: --nav;
    scrollbar-width: thin;
    scrollbar-gutter: stable;

    @media only screen and (1024px < width) {
        overflow-x: initial;
    }

    &:hover {
        scrollbar-width: none;
    }

    li {
        flex-grow: 1;
        position: relative;

        a {
            display: block;
            padding: 1em 0.5em;
            font-size: 20px;
            text-align: center;
            transition: all 0.1s ease-out;
            white-space: nowrap;
            color: var(--primary);
            text-decoration: none;
            img {
                height: 16px;
                width: 16px;
                margin-left: 4px
            }

            &:hover {
                background-color: var(--navbar-hover);
                color: var(--navbar-background);
                text-decoration: none !important;

                img {
                    filter: invert();
                }
            }

            &.active {
                background-color: var(--navbar-hover);
                color: var(--navbar-background);
                transition: all 0.1s ease-out;

                img {
                    filter: invert();
                }

            }
        }
    }
}

.navChildMenu {
    border: 0;
    padding: 0;
    background-color: var(--secondary);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.432);
    position: absolute;
    min-width: 100%;

    position-anchor: --nav;

    ul {
        list-style-type: none;
        padding: 0;

        li a {
            color: var(--navbar-background);
        }
    }

    &:not(.open) {
        display: none;
    }

    &.open {
        right: 0px;
        left: 0px;
        top: anchor(bottom);
        position: fixed;
        display: block;

        @media only screen and (1024px < width) {
            left: unset;
            right: unset;
            position: absolute;
        }
    }

}


/* # Headings */
.content h1 {
    font-size: var(--font-header-medium);
    font-weight: 300;
    margin-bottom: 8px;
    margin-top: 0px;
    text-align: end;

    font-size: 64px;

    @media only screen and (1024px < width) {
        font-size: var(--font-header-large);
        margin-top: var(--font-header-large);
    }

}

/* ## Subheadings */
.content h2 {
    font-size: var(--font-header-tiny);
    font-weight: 300;
    margin-top: 8px;
    color: var(--secondary);
    text-align: end;
    margin-bottom: 0px;

    @media only screen and (1024px < width) {
        font-size: var(--font-header-small);
    }

}

/* Regular paragraph text */
.content p {
    font-size: var(--font-body-small);
    text-align: justify;

    a {
        text-decoration: underline;

    }

    @media only screen and (1024px < width) {
        font-size: var(--font-body-medium);
        text-align: justify;
    }

}

/* * List items */
.content li {
    font-size: var(--font-body-small);

    @media only screen and (1024px < width) {
        font-size: var(--font-body-medium);
    }
}