@import "menu.css";
@import "backgroundImage.css";
@import "videoPlayer.css";
@import "languageToggle.css";
@import "fonts.css";


:root {
    --font-family-text: Rustica, system-ui, sans-serif;
    --font-family-headline: Nobel, system-ui, sans-serif;

    --spacing-xl: 4rem;
    --spacing-lg: 3rem;
    --spacing-md: 2rem;
    --spacing-base: 1rem;
    --spacing-sm: 0.5rem;
    --spacing-xs: 0.25rem;

    --font-factor: 1.3333333333333333333333333333333;
    --font-size-4xl: calc(var(--font-factor) * var(--font-size-4xl));
    --font-size-3xl: calc(var(--font-factor) * var(--font-size-2xl));
    --font-size-2xl: calc(var(--font-factor) * var(--font-size-xl));
    --font-size-xl: calc(var(--font-factor) * var(--font-size-lg));
    --font-size-lg: calc(var(--font-factor) * var(--font-size-md));
    --font-size-md: calc(var(--font-factor) * var(--font-size-base));
    --font-size-base: 21px;
    --font-size-sm: calc(var(--font-size-base) / var(--font-factor));
    --font-size-xs: calc(var(--font-size-sm) / var(--font-factor));

    --color-primary: #8fcdc4;
    --color-primary-dark: #3a5a55;
    --color-primary-light: #cce7e5;
    --color-black: #333333;

    --duration: 0.3s;
    --easing: cubic-bezier(0.25, 1, 0.5, 1);
}

html,
body {
    font-size: var(--font-size-base);
    font-family: var(--font-family-text);
    color: var(--color-primary-light);
}

* {
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    outline: none;
    user-select: none;
    font-family: var(--font-family-text);
    line-height: 1.5em;
    letter-spacing: .0333em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-text);
    letter-spacing: .1em;
    line-height: 1.3em;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 0.5em;
}