@font-face {
    font-family: 'Lora';
    src: url('/static/fonts/Lora.ttf');
}

@font-face {
    font-family: 'Manrope';
    src: url('/static/fonts/Manrope.ttf');
}

:root {
    --width-base: 1180px;
    --height-header: 80px;
    --height-footer: 40px;

    --padding-l: 54px;
    --padding-m: 28px;
    --padding-s: 20px;
    --padding-xs: 12px;
    --gap-l: 54px;
    --gap-m: 28px;
    --gap-s: 20px;
    --gap-xs: 12px;
    --gap-2xs: 8px;
    --margin-l: 54px;
    --margin-m: 28px;
    --margin-s: 20px;
    --margin-xs: 12px;

    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-text--0: #3B2A20;
    --color-text--1: #7A6252;
    --color-text--2: #8B5E3C;
    --color-extra--0: #F7EFE5;
    --color-extra--1: #FFF9F1;
    --color-extra--2: #F3E7DA;

    --border-size--0: 1px;
    --border-0: var(--border-size--0) solid color-mix(
            in srgb,
            var(--color-text--0) 20%,
            transparent
    );
    --border-radius--l: 48px;
    --border-radius--m: 24px;
    --border-radius--s: 20px;
    --border-radius--xs: 12px;

    --font-heading: "Lora", sans-serif;
    --font-text: "Manrope", sans-serif;
    --font-size--2xl: 64px;
    --font-size--xl: 36px;
    --font-size--l: 22px;
    --font-size--m: 18px;
    --font-size--s: 14px;
    --font-size--xs: 12px;

    --backdrop-blur: blur(2px);

    --transition-speed--0: .4s;
    --transition-0: var(--transition-speed--0) ease;
}

* {
    margin: 0;
    padding: 0;

    color: var(--color-text--0);
    background-color: transparent;
    border: none;
    border-radius: 0;
    outline: none;

    text-decoration: none;
    font-family: var(--font-text), sans-serif;
    font-size: var(--font-size--m);
}

html {
    scroll-behavior: smooth;

    background-color: var(--color-extra--1);
}

body {
    display: flex;
    flex-direction: column;
}

@media (max-width: 800px) {
    :root {
        --font-size--2xl: 54px;
        --font-size--xl: 32px;
        --font-size--l: 20px;
        --font-size--m: 16px;
        --font-size--s: 14px;
        --font-size--xs: 12px;
    }
}