:root {
    /* colors */
    --clr-main: #007cba;
    --clr-main-trans: #4e576ed9;
    /* --clr-main-dark: #1e1e1e; */
    --clr-main-dark: #4e576e;
    --clr-pink-accent: #f7ab9c;
    --clr-b-yellow: #dedeb1;
    --clr-dark-yellow: #bdbd7b;
    --clr-beige: #f7f4ed;

    /* font-sizes */
    --fs-900: 9.375rem;
    --fs-800: 6.25rem;
    --fs-750: 4.7rem;
    --fs-700: 3.5rem;
    --fs-650: 3rem;
    --fs-600: 2.5rem;
    --fs-550: 2.0rem;
    --fs-500: 1.75rem;
    --fs-450: 1.3rem;
    --fs-400: 1.125rem;
    --fs-300: 1rem;
    --fs-250: 0.9rem;
    --fs-200: 0.875rem;
    --fs-p: 1 rem;



    /* font families */
    --fs-100: 0.8rem;
    --ff-main:
    'main', serif;
    --transition: all 0.5s ease-in-out;
    --ff-secondary:
    'sec', sans-serif;
    --ff-exp:
    'experiment', sans-serif;
    /* --ff-p: 'Quattrocento Sans', sans-serif; */
    --ff-p:
    'third', sans-serif;

    /* columns */
    --col:
    calc((100%/12) - calc(var(--col-padding)/2));
    --col-padding: 15px;
    --gap: 1rem;
    --border-radius: 3px;
    --container-padding:13%;
    --container-padding-mobile: 8%;
    --button-pad: 8px 20px;
    --bg-y-offset:0px;
    --required:
    url("../images/required.png");
}

@font-face {
    font-family: 'main';
    src: url('../fonts/ivy.ttf');
}

@font-face {
    font-family: 'sec';
    src: url('../fonts/OptimaLTStd.otf');
}

@font-face {
    font-family: 'third';
    src: url('../fonts/Manrope-Light.ttf');
}

@font-face {
    font-family: 'experiment';
    src: url('../fonts/Quentin.otf');
}