@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter.ttf") format("opentype");
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter-Italic.ttf") format("opentype");
    font-style: italic;
}

:root {
    --nav-bg: #fff;
    --page-bg: #f2f4ff;
}

body {
    background-color: var(--page-bg);
}

body * {
    font-family: "Inter", sans-serif;
}

.navbar-ctn {
    position: sticky;
    top: 0;
}

.navbar {
    background-color: var(--nav-bg);
    filter: drop-shadow(0 0.125rem 0.125rem #0002);
}

.navbar,
.navbar .show-for-medium nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    height: 3rem;
}

.navbar .show-for-small-only {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.navbar .show-nav {
    display: flex;
    width: 3rem;
    height: 100%;
    padding: 0.5rem;
    font-size: 2rem;
}

#navbar-small {
    background-color: var(--nav-bg);
    opacity: 0.9;
    transition-duration: 0.2s;
}

#navbar-small > .grid-y > a {
    width: 100%;
    padding: 1rem;
    text-align: center;
}

.js-off-canvas-overlay {
    backdrop-filter: blur(0.25rem);
    transition-duration: 0.2s;
}

.main-content {
    padding: 1rem;
}

a {
    /* Why does Foundation commit a crime against accessibility by default? */
    text-decoration: underline;
}