:root {
    /* colors */
    --clr-main-blue: #0000ff;
    --clr-status-01: #32c023;--accent: #efff00;
    --clr-main-trans: #4e576ed9;
    /* --clr-main-dark: #1e1e1e; */
    --clr-main-dark: #4e576e;
    --clr-b-yellow: #dedeb1;
    --clr-dark-yellow: #bdbd7b;
    --clr-beige: #f7f4ed;
    --clr-light-grey: #eeeeee;

    /* font-sizes */
    --clr-label: #969696;--fs-900: 9.375rem;
    --fs-800: 6.25rem;
    --fs-750: 4.7rem;
    --fs-700: 3.5rem;
    --fs-650: 2.4rem;
    --fs-600: 2.5rem;
    --fs-550: 2.0rem;
    --fs-500: 1.75rem;
    --fs-450: 1.35rem;
    --fs-400: 1.125rem;
    --fs-300: 1rem;
    --fs-250: 0.9rem;
    --fs-200: 0.875rem;
    --fs-100: 0.5rem;



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

    /* columns */
    --col:
    calc((100%/12) - calc(var(--col-padding)/2));
    --col-padding: 15px;
    --gap: 1rem;
    --border-radius: 3px;
    --container-padding: 10vw;
    --container-padding-mobile: 8%;
    --button-pad: 8px 20px;
    --bg-y-offset:0px;
    --dashboard-padding:10px;
}

.viewport{/*     background: #2d31f2; */background: var(--clr-main-blue);/* background: linear-gradient(0deg, var(--clr-main-blue) 0%, rgba(41,38,74,1) 100%); */}
main{
    padding:var(--dashboard-padding) 0;
    gap: 0!important;
    flex-wrap: nowrap!;
    position:relative;
}
nav{
    background-color: #ffffff;
    border-right:solid 1px #f0f0f0;
}

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


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


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


@font-face {
    font-family: 'p2';
    src: url('../fonts/NotoSans-Regular.ttf');
}