* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    object-fit: cover;
}

body,
html {
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
}

body {
    background-color: var(--page-background);
    color: var(--page-text);
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

ul {
    list-style: none;
    padding: 0;

    li {
        list-style: none;
    }
}

@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }
}

a {
    color: inherit;
    text-decoration: none;
}

:root {
    --page-background: #eed7c7;
    --page-background-2: #bebebe;
    --page-background-3: #fdfaf8;
    --page-background-4: #fdfaf8;
    --page-text: #2c3b44;

    --alt-background: #2f6c68;
    --alt-text: white;

    --alt-2-background: #d28a2d;
    --alt-2-text: white;

    --alt-3-background: #742e11;
    --alt-3-text: white;

    --alt-4-background: black;
    --alt-4-text: white;


    --font-title: Baskerville, serif;
    --font-body: Inter, sans-serif;





    --article-background: #fff6ea;
    --article-text: rgb(18, 54, 82);
    --article-text-alt: rgb(18, 54, 82);

    --contact-bubble-background: var(--alt-background);
    --contact-bubble-color: var(--alt-text);

    --header-background: transparent;
    --header-text: var(--page-text);

    --header-nav-background: var(--alt-4-background);
    --header-nav-text: var(--alt-4-text);

    --hero-primary-color: var(--page-background);
    --hero-secondary-color: var(--page-text);

    --hero-alt-1-background: rgb(0, 0, 0, 0.215);
    --hero-alt-2-background: rgb(0, 0, 0, 0.325);

    --help-section-background: #55595f;
    --help-section-text: var(--alt-3-text);

    --footer-background: var(--page-background);
    --footer-text: var(--page-text);

    --dropdown-background: black;
    --dropdown-text: white;

    --articles-background: var(--page-background);
    --articles-text: var(--page-text);
    --articles-block-background: var(--alt-background);
    --articles-block-text: var(--alt-text);

    --newsletter-background: var(--alt-2-background);
    --newsletter-text: var(--alt-2-text);

    --dialog-background: white;
    --dialog-text: black;



    --page-lg-padding: 15vw;
    --page-md-padding: 5vw;
    --page-sm-padding: 2vw;

    /* todo media queries */
    --page-padding-inline: var(--page-lg-padding);


    --font-size-1-title: 3.5rem;
    --font-size-1-text: 1.425rem;
    --font-size-1-sub: 1.125rem;

    --content-width: 90ch;
    --sm-content-padding: 2rem; /* apply below 1000px */
}

@font-face {
    font-family: 'Baskerville';
    src: url('/assets/font/Baskerville-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Baskerville';
    src: url('/assets/font/Baskerville-Italic-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/font/Inter-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/font/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}



.title,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote {
    font-family: Baskerville, serif;
}

* {
    font-family: Inter, sans-serif;
}

.button {
    background-color: var(--alt-background);
    color: var(--alt-text);

    width: min-content;
    height: fit-content;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    word-wrap: nowrap;
    white-space: nowrap;
    border-radius: 9999px;

    font-family: Baskerville, serif !important;

    & * {
        font-family: Baskerville, serif !important;
    }

    /* todo hover anim */
}

.button.white {
    --fill-bg: white;
    --fill-text: black;
    background-color: var(--fill-bg);
    color: var(--fill-text);
}

.button.primary {
    background-color: var(--alt-background);
    color: var(--alt-text);
}

.button.secondary {
    background-color: var(--alt-2-background);
    color: var(--alt-2-text);
}

.button.third {
    background-color: var(--alt-3-background);
    color: var(--alt-3-text);
}

@media screen and (max-width: 500px) {
    :root {
        --page-padding-inline: 1rem;
    }
}

.text-paragraph {
    font-size: 16px;
    font-weight: normal;
    font-family: Inter, sans-serif;
}