*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #d8e1ff;
}

img {
    max-width: 100%;
}

:root {
    /* fonts */
    /* font-family */
    --header-ff: 'Karla', sans-serif;
    --header-aff: 'Permanent Marker', cursive;
    --text-ff: 'Inter', sans-serif;

    /* font-size */
    --vsfs: 14px;
    --sfs: 16px;
    --mfs: 20px;
    --mobile-lfs: 36px;
    --lfs: 64px; 

    /* font-weight */
    --sfw: 400;
    --mfw: 500;
    --lfw: 800;


    /* colors */
    --aclr: #000814;
    --input-bgclr: #ebebd3;
    --bgclr: white;
    --text-clr: #303030;

    --bs: 0.25em 0.25em 0.75em rgba(0,0,0,.25),
    0.125em 0.125em 0.25em rgba(0,0,0,.15);
}