:root {
    --font-heading: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    --color-primary-rgb: 19, 102, 241;
    --color-secondary-rgb: 0, 163, 215;
    --color-tertiary-rgb: 60, 224, 188;
    --color-background-rgb: 255, 255, 255;
    --color-background-tint-rgb: 112, 154, 196;
    --font-base-rgb: 9, 18, 31;
}

main.content {
    padding: var(--space-6);
}

.fluid-container, .fluid-container--narrow {
    width: 100%;
}

@media (min-width: 600px) {
    .fluid-container {
        max-width: 1280px;
        margin: 0 auto;
    }

    .fluid-container--narrow {
        max-width: 480px;
        margin: 0 auto;
    }
}

@keyframes fade-out {
    0%, 80% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        display: none;
        opacity: 0;
        transform: translateX(100vw);
    }
}

.fade-out {
    /* important overwrites other animations, but is needed for fade out to take precedence */
    animation: fade-out 3.5s ease-in-out forwards !important;
}

@view-transition {
    navigation: auto;
}

section#menu div {
    display: flex;
    flex-direction: column;
}

section#menu {
    margin-top: var(--space-4);
    margin-right: var(--space-4);
    padding: var(--space-4);
}