html, body {
    margin: 0;
    font-family: "Encode Sans Condensed", sans-serif;
    font-weight: 300;
    overflow-x: hidden;
}

/* Generic */
:root {
    --white: #FFFFFF;
    --background: #16335B;
    --accent: #D2B589;
}

.flex {
    display: flex;
    gap: var(--gap, 1rem);
}
.sr-only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* primary navigation */
.logo {
    margin: 2rem;
}
.primary-header {
    align-items: center;
    justify-content: space-between;
}

.mobile-nav-toggle {
    display: none;
}

.primary-navigation {
    list-style: none;
    padding: 0;
    margin: 0;

    background: var(--background);

}
/*
@supports (backdrop-filter: blur(1rem)) {
    .primary-navigation {
        background: oklch(from var(--background) l c h /.5);
        backdrop-filter: blur(1rem);
    }
}
*/
.primary-navigation a {
    text-decoration: none;
    color: #FFFFFF;
    text-transform: uppercase;
    text-wrap: nowrap;
    font-size: 1.5  rem;
}

.primary-navigation a:hover {
    color: var(--accent);
}

@media (max-width: 80em) {
    .primary-navigation {
        --gap: 2em;

        position: fixed;
        z-index: 1000;
        inset: 0 0 0 40%;

        flex-direction: column;
        padding: 5rem 2em;

        transform: translateX(100%);
        transition: transform 350ms ease-out;
    }

    .primary-navigation a {
        font-size: 2rem;
    }

    .primary-navigation[data-visible="true"] {
        transform: translateX(0%);
    }

    .mobile-nav-toggle {
        display: block;
        position: absolute;
        cursor: pointer;
        z-index: 9999;
        background-color: transparent;
        background-image: url('../artifacts/bars-solid-full.svg');
        background-repeat: no-repeat;
        border: 0;
        width: 3rem;
        aspect-ratio: 1;
        top: 5rem;
        right: 5rem;
    }

    .mobile-nav-toggle[aria-expanded="true"] {
        background-image: url('../artifacts/x-solid-full.svg');
    }
}

@media (min-width: 80em) {
    .primary-navigation {
        --gap: clamp(1rem, 5vw, 6rem);
        padding-block: 2rem;
        padding-inline: clamp(.5rem, 10vw, 20rem);
    }
}



.container {
    width: 80%;
    margin: 0 auto;
}

.title {
    text-align: center;
}