@font-face {
    font-family: 'Oswald';
    src:
        url('/assets/fonts/Oswald-VariableFont.ttf');
}

@font-face {
    font-family: 'Roboto';
    src:
        url('/assets/fonts/Roboto-VariableFont.ttf');
}

:root {
    --otsikko: "Oswald", sans-serif;
    --leipis: "Roboto", sans-serif;
    --highlight-color: rgb(232, 241, 245);

    --font-size-xxl: clamp(2rem, 7vw, 30rem);
    --font-size-xl: clamp(1.8rem, 4vw, 20rem);
    --font-size-l: clamp(1.6rem, 2.8vw, 18rem);
    --font-size-ml: clamp(1.3rem, 2vw, 12rem);
    --font-size-m: clamp(1.3rem, 1.2vw, 5rem);
    --font-size-s: clamp(0.9rem, 2.9vw, 1.1rem);
    --font-size-xs: clamp(0.9rem, 0.6vw, 4.5rem);

    --padding-l: clamp(2rem, 4vw, 18rem);
    --padding-m: clamp(1rem, 1vw, 4rem);
    --padding-s: clamp(0.8rem, 0.7vw, 3rem);
}

html {
    scroll-behavior: smooth;
    font-size: 12pt;
    width: 100%;
}

html,
body {
    margin: 0;
    padding: 0;
}


/* ---- UPOTUKSET */

/* MAILCHIMP */
#mc_embed_shell #mc_embed_signup {
    width: 100%;
}