@import url("css/variables.css");
@import url("css/reset.css");
@import url("css/typography.css");
@import url("css/layout.css");
@import url("css/components.css");
@import url("css/utilities.css");

@font-face {
    font-family: "Open Sans";
    src: url("fonts/OpenSans-Variable.ttf") format("truetype");
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("fonts/OpenSans-Italic-Variable.ttf") format("truetype");
    font-style: italic;
    font-weight: 300 800;
    font-display: swap;
}

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

body::before {
    content: "";
    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: 0;

    background-image:
            radial-gradient(
                    rgba(255, 255, 255, 0.28) 0.6px,
                    transparent 0.8px
            );

    background-size: 93px 87px;
    opacity: 0.12;
}

.site-shell {
    position: relative;
    z-index: 1;
}