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

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


@font-face{
        font-family:'Kaushan Script';
        src:url('/assets/font/kaushan/KaushanScript-Regular.woff2') format('woff2'),url('/assets/font/kaushan/KaushanScript-Regular.woff') format('woff');
        font-display:fallback;
}

/* general styling */
:root{
        --primary-font-family:OpenSans-Regular, Arial, sans-serif;
        --secondary-font-family:Kefa-Regular, Arial, sans-serif;
        --accent-font-family:Kefa-Regular, Arial, sans-serif;
        --teaser-font-family:Kaushan Script, 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:.92;
        --content-max-size:.95;

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

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

        --xl-min-size:2.65;
        --xl-max-size:3.65;

        --l-min-size:2.25;
        --l-max-size:2.35;

        --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(205, 16%, 96%,.85);
        --clr-header-300: hsl(0, 0%, 15%);

        /* Global > Body */
        --bgr-body-300: hsl(205, 16%, 98%);

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

        /* Global > Filter */
        --label-filter-300: hsl(0, 0%, 92%);
        --btn-filter-300: hsl(0, 0%, 98%);
        --btn-filter-400: hsl(0, 0%, 88%);

        /* Global > Progressbar */
        --bgr-progressbar-300: hsl(15, 90%, 55%);
        --bgr-progressbar-400: hsla(15, 90%, 55%,.85);


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

        --clr-accent-300: hsl(15, 90%, 55%);


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

        /* Gray > Border */
        --brd-gray-100: hsl(0, 0%, 100%);
        --brd-gray-200: hsl(0, 0%, 98%);
        --brd-gray-300: hsl(0, 0%, 94%);
        --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(30, 47%, 96%);
        --bgr-primary-300: hsl(15, 90%, 55%);
        --bgr-primary-400: hsla(42, 100%, 96%,.7);
        --bgr-primary-500: hsl(42, 100%, 90%);

        /* Global > Bg > Accent */
        --bgr-accent-300: hsl(76, 72%, 44%);
        --bgr-accent-400: hsl(76, 72%, 38%);
        --bgr-accent-500: hsl(334, 76%, 26%);

        /* 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(76, 72%, 44%);
        --brd-accent-400: hsl(76, 72%, 38%);
        --brd-accent-500: hsl(334, 76%, 26%);

        /* 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:rgb(140,193,82);
        --status-succes-background-color:rgb(140,193,82);

        --status-pending-font-color: hsl(0, 0%, 10%);
        --status-pending-border-color: hsl(0, 0%, 80%);
        --status-pending-background-color: hsl(0, 0%, 80%);

        --status-alert-font-color:rgb(255,255,255);
        --status-alert-border-color:rgb(240,35,46);
        --status-alert-background-color:rgb(240,35,46);
}

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

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

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

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

                --top-sticky-height:4rem;

                --top-sticky-icon-column-width:3rem;
                --top-sticky-icon-width:3rem;
                --top-sticky-icon-height:3rem;

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

                --top-bgr-300: hsla(205, 16%, 96%,.85);

                --bottom-bgr-300: hsla(205, 16%, 96%,.85);
                --bottom-clr-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:4.5rem;
                --top-icon-width:4.5rem;
                --top-icon-height:4.5rem;

                --top-logo-column-width:auto;
                --top-logo-width:100%;
                --top-logo-height:5.5rem;

                --top-sticky-height:4.75rem;

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

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

                --top-bgr-300: hsla(205, 16%, 96%,.85);

                --bottom-bgr-300: hsla(205, 16%, 96%,.85);
                --bottom-clr-300: hsl(0, 0%, 15%);
        }
}

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

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

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

                --top-logo-column-width:auto;
                --top-logo-width:100%;
                --top-logo-height:5.5rem;

                --top-sticky-height:4.75rem;

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

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

                --top-bgr-300: hsla(205, 16%, 96%,.85);

                --bottom-bgr-300: hsla(205, 16%, 96%,.85);
                --bottom-clr-300: hsl(0, 0%, 15%);
        }
}