@font-face {
    font-family: 'Inter';
    src: url('/fonts/inter.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* variables */
    --color-box-bg: oklch(1 0 0/ 0.05);
    --color-page-bg: oklch(0 0 0);
    --color-text-primary: oklch(0.7252 0 0);
    --color-text-secundary: oklch(0.5 0 0);
    --color-text-important: oklch(1 0 0);
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 64px;

    background-color: var(--color-page-bg);

    /* font-settings */
    color: var(--color-text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: 3%;
}

html {
    position: relative;
}

body {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: 1200px;
    height: 100%;
    margin: var(--space-xl) auto;
}

h1, strong, h3 {
    color: var(--color-text-important);
    font-weight: bold;
}

em {
    color: var(--color-text-secundary);
    font-style: italic;
}

h1 {
    text-transform: uppercase;
    letter-spacing: 10%;
    font-size: 1rem;
}

h2 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.75rem;
}

p {
    line-height: 150%;
}

a {
    color: var(--color-text-secundary);
    text-decoration: none;
}

a, button {
    cursor: pointer;
}