:root {
    --color-body-background: oklch(0.21 0.034 264.665);

    --color-text-primary: oklch(0.872 0.01 258.338);
    --color-text-secondary: oklch(0.707 0.022 261.325);
    --color-text-tertiary: oklch(0.551 0.027 264.364);


    --color-header-border: oklab(0.623 -0.0378409 -0.210628 / 0.3);
    --color-header-background: oklab(0.21 -0.00316128 -0.0338527 / 0.95);
    --color-header-hover: oklch(70.7% 0.165 254.624);

    --color-footer-background: oklch(0.13 0.028 261.692);

    --color-intro-background-primary: oklab(0.379 -0.0113992 -0.145554 / 0.2);
    --color-intro-background-secondary: oklab(0.379 -0.0113992 -0.145554 / 0.2);
    --color-intro-image-background-primary: oklch(0.623 0.214 259.815);
    --color-intro-image-background-secondary: oklch(0.511 0.262 276.966);
    --color-intro-text: oklch(0.967 0.003 264.542);
    --color-intro-title-text: oklch(0.809 0.105 251.813);

    --color-headline-primary: oklch(0.707 0.165 254.624);
    --color-headline-secondary: oklch(0.673 0.182 276.935);
    --color-headline-tertiary: oklch(0.714 0.203 305.504);
    --color-headline-background-image: linear-gradient(
            to right,
            var(--color-headline-primary) 0%,
            var(--color-headline-secondary) 60%,
            var(--color-headline-tertiary) 100%);

    --z-index-header: 50;
}

:root {
    font-size: 16px;
    color: var(--color-text-primary);
}

* {
    box-sizing: border-box;
}

html, body {
    position: relative;
    margin: unset;
    background-color: var(--color-body-background);
    font-family: 'AdwaitaSans', 'AdwaitaMono', sans-serif;
    scroll-behavior: smooth;
}