:root {
    --dc-red: #890A06;
    --dc-yellow: #D6B80A;
    --dc-blue: #075988;
    --dc-green: #4D8B31;
    --dc-dark: #1F1E1E;
    --dc-light: #F9F5EA;

    --text-xs: 0.75rem;   /* ~12px */
    --text-sm: 0.875rem;  /* ~14px */
    --text-base: 1rem;    /* ~16px (The baseline) */
    --text-lg: 1.125rem;  /* ~18px */
    --text-xl: 1.25rem;   /* ~20px */
    --text-2xl: 1.5rem;   /* ~24px */
    --text-3xl: 1.875rem; /* ~30px */
    --text-4xl: 2.25rem;  /* ~36px */
    --text-5xl: 3rem;     /* ~48px */
}
html {
    font-size: calc(0.5rem + 0.5vw);
    scroll-behavior: smooth;
}
body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.pacifico-regular {
    font-family: "Pacifico", cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.montserrat-regular {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.montserrat-bold {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.monospace-regular {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.monomakh-regular {
    font-family: "Monomakh", system-ui;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}