: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-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%);

    --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-profile-background-primary: oklab(0.379 -0.0113992 -0.145554 / 0.2);
    --color-profile-background-secondary: oklab(0.379 -0.0113992 -0.145554 / 0.2);
    --color-profile-image-background-primary: oklch(0.623 0.214 259.815);
    --color-profile-image-background-secondary: oklch(0.511 0.262 276.966);
    --color-profile-text: oklch(0.967 0.003 264.542);
    --color-profile-title-text: oklch(0.809 0.105 251.813);

    --color-project-card-front-background-primary: oklch(0.278 0.033 256.848);
    --color-project-card-front-background-secondary: oklch(0.373 0.034 259.733);
    --color-project-card-back-background-primary: oklch(0.379 0.146 265.522);
    --color-project-card-back-background-secondary: oklch(0.359 0.144 278.697);

    --color-skill-card-background: oklab(0.278 -0.00750867 -0.0321344 / 0.6);
    --color-skill-card-border: oklab(0.373 -0.00606001 -0.0334556 / 0.5);
    --color-skill-card-header-border: oklab(0.379 -0.0113992 -0.145554 / 0.3);
    --color-skill-card-item-background: oklab(0.21 -0.00316128 -0.0338527 / 0.5);
    --color-skill-card-item-hover-background: oklab(0.623 -0.0378409 -0.210628 / 0.1);
    --color-skill-card-item-border: oklab(0.373 -0.00606001 -0.0334556 / 0.5);
    --color-skill-card-item-hover-border: oklab(0.707 -0.0437502 -0.159094 / 0.5);
    --color-skill-card-header-background-image: linear-gradient(
            to right bottom,
            oklab(0.623 -0.0378409 -0.210628 / 0.8) 0%,
            oklch(0.511 0.262 276.966) 100%
    );

    --color-card-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), oklab(0.623 -0.0378409 -0.210628 / 0.5) 0 25px 50px -12px;

    --color-contact-background: oklch(0.278 0.033 256.848);
    --color-contact-background-border: oklab(0.623 -0.0378409 -0.210628 / 0.3);
    --color-contact-text: oklch(0.967 0.003 264.542);
    --color-contact-background-input: oklch(0.373 0.034 259.733);
    --color-contact-background-input-border-focused: oklch(70.7% 0.165 254.624);
    --color-contact-background-button: linear-gradient(
            to right,
            oklch(0.623 0.214 259.815) 0%,
            oklch(0.511 0.262 276.966) 100%
    );
    --color-contact-background-button-hover: linear-gradient(
            to right,
            oklch(0.546 0.245 262.881) 0%,
            oklch(0.457 0.24 277.023) 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;
}

.icon {
    display: block;
    width: 1em;
    height: 1em;
}