*,
*::before,
*::after {
    box-sizing: border-box;
}

@font-face {
    font-family: "Crizen";
    src:
        url("/fonts/Crizen.woff2") format("woff2"),
        url("/fonts/Crizen.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrainsMono";
    src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --page-padding: clamp(1.25rem, 5vw, 4rem);
    --header-padding-block: clamp(1.25rem, 3vw, 2rem);
    --header-height: calc(
        clamp(2.25rem, 4vw, 3rem) + (var(--header-padding-block) * 2)
    );
    --header-height-mobile: 5.3rem;
    --fs-h1: clamp(2.35rem, 1.7rem + 3vw, 4rem);
    --fs-h2: clamp(1.05rem, 0.85rem + 1.1vw, 1.6rem);
    --fs-body: clamp(1rem, 0.94rem + 0.35vw, 1.25rem);
    --focus-ring: 0 0 0 3px rgb(0 0 0), 0 0 0 5px rgb(255 255 255);
}

html {
    min-width: 20rem;
    min-height: 100%;
    background: #000;
    overflow-x: hidden;
}

body {
    min-width: 20rem;
    min-height: 100vh;
    margin: 0;
    background: #000;
    overflow-x: hidden;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible {
    border-radius: 0.25rem;
    outline: none;
    box-shadow: var(--focus-ring);
}

::selection {
    background: white;
    color: black;
}

[data-page-content] {
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}