@font-face{
        font-family:'AaltoSansEssential-Thin';
        src:url('/assets/font/Aalto/AaltoSansEssential-Thin.woff2') format('woff2');
        font-display:fallback;
}

@font-face{
        font-family:'AaltoSansEssential-Light';
        src:url('/assets/font/Aalto/AaltoSansEssential-Light.woff2') format('woff2');
        font-display:fallback;
}

@font-face{
        font-family:'AaltoSansEssential-Regular';
        src:url('/assets/font/Aalto/AaltoSansEssential-Regular.woff2') format('woff2');
        font-display:fallback;
}

@font-face{
        font-family:'HelveticaNeue-Bold';
        src:url('/assets/font/HelveticaNeue/HelveticaNeue-Bold.woff2') format('woff2');
        font-display:fallback;
}

@font-face{
        font-family:'HelveticaNeue-Thin';
        src:url('/assets/font/HelveticaNeue/HelveticaNeue-Thin.woff2') format('woff2');
        font-display:fallback;
}

/* general styling */
:root{
        --nav-font-family:AaltoSansEssential-Thin, Helvetica, Arial, sans-serif;
        --nav-bold-font-family:AaltoSansEssential-Regular, Helvetica, Arial, sans-serif;

        --primary-font-family:AaltoSansEssential-Light, Helvetica, Arial, sans-serif;
        --secondary-font-family:AaltoSansEssential-Regular, Helvetica, Arial, sans-serif;
        --accent-font-family:AaltoSansEssential-Light, Helvetica, Arial, sans-serif;
        --teaser-font-family:HelveticaNeue-Bold, Arial, sans-serif;

        /* =====  FONT SCALING  ===== */

        /* Select the min and max screen sizes you are working with */

        --screen-min-width:30;
        --screen-max-width:120;

        /* Select the min and max font-sizes for each header type */

        --h1-min-size:1.6;
        --h1-max-size:1.8;

        --h2-min-size:1.2;
        --h2-max-size:1.4;

        --h3-min-size:1;
        --h3-max-size:1.2;

        --h4-min-size:.95;
        --h4-max-size:1.1;

        --h5-min-size:.95;
        --h5-max-size:1.1;

        --h6-min-size:.95;
        --h6-max-size:1.1;

        --content-min-size:.98;
        --content-max-size:1;

        --xxxl-min-size:8.25;
        --xxxl-max-size:8.65;

        --xxl-min-size:4.75;
        --xxl-max-size:5.45;

        --xl-min-size:1.55;
        --xl-max-size:4.25;

        --l-min-size:1.25;
        --l-max-size:1.55;

        --m-min-size:.95;
        --m-max-size:1;

        --s-min-size:.8;
        --s-max-size:.88;

        --xs-min-size:.65;
        --xs-max-size:.76;

        /* Global > Header */
        --bgr-header-300: hsla(0, 0%, 94%,1);
        --clr-header-300: hsl(0, 0%, 15%);

        /* Global > Body */
        --bgr-body-300: hsl(0, 0%, 100%);

        /* Global > Footer */
        --bgr-footer-300: hsl(100, 100%, 100%);
        --clr-footer-300: hsl(0, 0%, 15%);

        /* Global > Nav */
        --bgr-nav-300:hsla(0, 0%, 100%,.85);
        --brd-nav-300:hsl(0, 0%, 100%);
        --clr-nav-300:hsl(270, 8%, 10%);

        /* Global > Nav > Hover */
        --bgr-nav-400: hsl(270, 42%, 38%);
        --brd-nav-400: hsl(270, 42%, 38%);
        --clr-nav-400: hsl(0, 0%, 100%);

        /* Global > Button */
        --btn-accent-400: hsl(270, 42%, 38%);
        --clr-accent-400: hsl(0, 0%, 100%);

        /* Global > Button */
        --btn-accent-405: hsl(270, 42%, 32%);
        --clr-accent-405: hsl(0, 0%, 100%);

        /* Global > Filter */
        --label-filter-300: hsla(55, 36%, 88%,.85);

        --clr-filter-300: hsl(270, 8%, 10%);
        --brd-filter-300: hsl(0, 0%, 96%);
        --bgr-filter-300: hsl(0, 0%, 98%);

        --clr-filter-400: hsl(270, 8%, 10%);
        --brd-filter-400: hsl(0, 0%, 92%);
        --bgr-filter-400: hsl(0, 0%, 94%);

        /* Global > Pager */
        --clr-pager-300: hsl(270, 8%, 10%);
        --brd-pager-300: hsl(0, 0%, 96%);
        --bgr-pager-300: hsl(0, 0%, 98%);

        --clr-pager-400: hsl(270, 8%, 10%);
        --brd-pager-400: hsl(0, 0%, 92%);
        --bgr-pager-400: hsl(0, 0%, 94%);

        /* Global > Progressbar */
        --bgr-progressbar-300: hsl(32, 98%, 52%);
        --bgr-progressbar-400: hsl(270, 42%, 38%);


        /* Global > Colour */
        --clr-primary-100: hsl(0, 0%, 100%);
        --clr-primary-200: hsl(270, 8%, 25%);
        --clr-primary-300: hsl(270, 8%, 15%);
        --clr-primary-400: hsl(270, 8%, 10%);

        --clr-accent-300: hsl(32, 98%, 52%);


        /* Gray > Background */
        --bgr-gray-100: hsl(0, 0%, 100%);
        --bgr-gray-200: hsl(0, 0%, 98%);
        --bgr-gray-300: hsl(0, 0%, 96%);
        --bgr-gray-400: hsl(0, 0%, 88%);
        --bgr-gray-500: hsl(0, 0%, 84%);
        --bgr-gray-600: hsl(0, 0%, 42%);

        /* Gray > Border */
        --brd-gray-100: hsl(0, 0%, 100%);
        --brd-gray-200: hsl(0, 0%, 98%);
        --brd-gray-300: hsl(0, 0%, 96%);
        --brd-gray-400: hsl(0, 0%, 88%);
        --brd-gray-500: hsl(0, 0%, 84%);
        --brd-gray-600: hsl(0, 0%, 80%);




        /* Global > Bg > Primary */
        --bgr-primary-200: hsl(0, 0%, 92%);
        --bgr-primary-300: hsl(0, 0%, 95%);
        --bgr-primary-400: hsla(0, 0%, 100%,.85);
        --bgr-primary-500: hsl(0, 0%, 90%);

        /* Global > Bg > Accent */
        --bgr-accent-300: hsl(270, 42%, 28%);
        --bgr-accent-400: hsl(270, 42%, 38%);
        --bgr-accent-500: hsla(0, 0%, 100%,.85);

        /* Global > Border */
        --brd-primary-50: hsl(0, 0%, 95%);
        --brd-primary-100: hsl(0, 0%, 85%);
        --brd-primary-200: hsl(22, 100%, 98%);
        --brd-primary-300: hsl(42, 100%, 98%);
        --brd-primary-400: hsl(44, 100%, 95%);

        --brd-accent-300: hsl(270, 42%, 38%);
        --brd-accent-400: hsl(270, 42%, 28%);
        --brd-accent-500: hsla(0, 0%, 100%,.95);

        --brd-radius-15: .15rem;
        --brd-radius-25: .25rem;
        --brd-radius-5: .5rem;
        --brd-radius-75: .75rem;

        /* Form > Input */
        --form-input-clr-primary-300: hsl(0, 0%, 10%);
        --form-input-brd-primary-300: hsl(0, 0%, 85%);
        --form-input-bgr-primary-300: hsl(100, 100%, 100%);

        /* Form > Btn */
        --form-btn-clr-default: hsl(0, 0%, 10%);
        --form-btn-brd-default: hsl(0, 0%, 85%);
        --form-btn-bgr-default: hsl(0, 0%, 96%);

        --form-btn-clr-active: hsl(0, 0%, 10%);
        --form-btn-brd-active: hsl(0, 0%, 85%);
        --form-btn-bgr-active: hsl(0, 0%, 85%);


        /* Table > Background */
        --tbl-bgr-primary-300: hsl(0, 0%, 94%);
        --tbl-bgr-primary-400: hsl(0, 0%, 98%);

        /* Table > Border */
        --tbl-brd-primary-300: hsl(0, 0%, 88%);
        --tbl-brd-primary-400: hsl(0, 0%, 86%);


        /* Global > Status */
        --status-succes-font-color:rgb(255,255,255);
        --status-succes-border-color:hsl(0,0%,96%);
        --status-succes-background-color:rgb(140,193,82);

        --status-pending-font-color:hsl(0,0%,10%);
        --status-pending-border-color:hsl(0,0%,96%);
        --status-pending-background-color:hsl(39,100%,50%);

        --status-alert-font-color:rgb(255,255,255);
        --status-alert-border-color:hsl(0,0%,96%);
        --status-alert-background-color:rgb(240,35,46);

        /* BG Filter */
        --backdrop-filter-default:blur(8px) saturate(180%);

        /* shadows */
        --box-shadow-lighter:0 0 0 0 rgba(0,0,0,.1), 0 0 0 0 rgba(0,0,0,.1), 0 25px 50px -12px rgba(0,0,0,.25);
        --box-shadow-default:0 0 0 0 rgba(0,0,0,.1), 0 0 0 0 rgba(0,0,0,.1), 0 25px 50px -12px rgba(0,0,0,.25);
        --box-shadow-darker:0 0 0 0 rgba(0,0,0,.1), 0 0 0 0 rgba(0,0,0,.1), 0 25px 60px -12px rgba(0,0,0,.25);

        --drop-shadow-default:drop-shadow(0px 0px 8px rgba(0,0,0,.2));

}

/* Mobile View > Mobile Only */
@media screen and (max-width: 45rem){

        :root{
                /* Global > Top */
                --top-height:4.5rem;

                --top-icon-column-width:4rem;
                --top-icon-width:3.5rem;
                --top-icon-height:3.5rem;

                --top-logo-column-width:auto;
                --top-logo-width:auto;
                --top-logo-height:4rem;

                --top-sticky-height:4rem;

                --top-sticky-icon-column-width:3.75rem;
                --top-sticky-icon-width:3.25rem;
                --top-sticky-icon-height:3.25rem;

                --top-sticky-logo-column-width:auto;
                --top-sticky-logo-width:auto;
                --top-sticky-logo-height:4rem;

                --bgr-top-300:hsla(0, 0%, 100%,.85);

                --bgr-bottom-300:hsla(0, 0%, 100%,1);
                --clr-bottom-300:hsl(0, 0%, 15%);
        }
}

/* Mobile View > Tablet only */
@media screen and (min-width: 45rem) and (max-width: 79.5rem){

        :root{
                /* Global > Top */
                --top-height:6rem;

                --top-icon-column-width:5rem;
                --top-icon-width:4.5rem;
                --top-icon-height:4.5rem;

                --top-logo-column-width:11rem;
                --top-logo-width:auto;
                --top-logo-height:4.5rem;

                --top-sticky-height:4.5rem;

                --top-sticky-icon-column-width:4.5rem;
                --top-sticky-icon-width:4rem;
                --top-sticky-icon-height:4rem;

                --top-sticky-logo-column-width:11rem;
                --top-sticky-logo-width:auto;
                --top-sticky-logo-height:4rem;

                --bgr-top-300:hsla(0, 0%, 100%,.85);

                --bgr-bottom-300:hsla(0, 0%, 100%,1);
                --clr-bottom-300:hsl(0, 0%, 15%);
        }
}

/* Desktop View */
@media screen and (min-width: 79.5rem){

        :root{
                /* Global > Top */
                --top-height:10rem;

                --top-icon-column-width:4rem;
                --top-icon-width:3.5rem;
                --top-icon-height:3.5rem;

                --top-logo-column-width:12.5rem;
                --top-logo-width:11rem;
                --top-logo-height:4rem;

                --top-sticky-height:4rem;

                --top-sticky-icon-column-width:4rem;
                --top-sticky-icon-width:3.5rem;
                --top-sticky-icon-height:3.5rem;

                --top-sticky-logo-column-width:12.5rem;
                --top-sticky-logo-width:11rem;
                --top-sticky-logo-height:4rem;

                --bgr-top-300:hsla(0, 0%, 100%,.85);

                --bgr-bottom-300:hsla(0, 0%, 100%,1);
                --clr-bottom-300:hsl(0, 0%, 15%);
        }
}