@font-face {
    font-family: 'Hanken Grotesk';
    src: url('./assets/fonts/HankenGrotesk-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 500 800;
}

:root {
    --c-red: hsl(0, 100%, 67%);
    --c-yellow: hsl(39, 100%, 56%);
    --c-green: hsl(166, 100%, 37%);
    --c-blue: hsl(234, 85%, 45%);

    --c-bg-main-start: hsl(252, 100%, 67%);
    --c-bg-main-end: hsl(241, 81%, 54%);
    --c-bg-bubble-start: hsla(256, 72%, 46%, 1);
    --c-bg-bubble-end: hsla(241, 72%, 46%, 0);

    --c-n-white: hsl(0, 0%, 100%);
    --c-n-pale-blue: hsl(221, 100%, 96%);
    --c-n-lavender: hsl(241, 100%, 89%);
    --c-n-gray-blue: hsl(224, 30%, 27%);

    --f-size: 18px;
    --f-family: 'Hanken Grotesk', serif;
    --f-normal: 500;
    --f-bold: 700;
    --f-extra-bold: 800;
}