@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:1;

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

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

--xl-min-size:2.85;
--xl-max-size:3.85;

--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(55, 36%, 88%,.85);
--clr-header-300: hsl(0, 0%, 15%);

/* Global > Body */
--bgr-body-300: hsl(30, 47%, 96%);

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

/* Global > Button */
--btn-accent-400: hsl(76, 72%, 44%);
--clr-accent-400: hsl(0, 0%, 100%);

/* Global > Button */
--btn-accent-405: hsl(72, 72%, 44%);
--clr-accent-405: hsl(0, 0%, 100%);

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

/* Global > Pager */
--btn-pager-300: hsl(0, 0%, 94%);
--btn-pager-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(11, 90%, 62%);


/* 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%);


/* Border > Radius */
--brd-radius-15: .15rem;
--brd-radius-25: .25rem;
--brd-radius-5: .5rem;
--brd-radius-75: .75rem;


/* Global > Bg > Primary */
--bgr-primary-200: hsl(30, 47%, 96%);
--bgr-primary-300: hsl(11, 90%, 62%);
--bgr-primary-400: hsla(55, 36%, 88%,.85);
--bgr-primary-500: hsl(42, 100%, 90%);

/* Global > Bg > Accent */
--bgr-accent-300: hsl(61, 58%, 69%);
--bgr-accent-400: hsl(61, 58%, 59%);
--bgr-accent-500: hsl(11, 90%, 62%);

/* 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(61, 58%, 69%);
--brd-accent-400: hsl(61, 58%, 59%);
--brd-accent-500: hsl(11, 90%, 62%);

/* 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:4.5rem;
--top-icon-width:4rem;
--top-icon-height:4rem;

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

--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:100%;
--top-sticky-logo-height:1.75rem;

--top-bgr-300: hsla(55, 36%, 88%,.85);

--bottom-bgr-300: hsla(55, 36%, 88%,.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:6rem;
--top-icon-width:5rem;
--top-icon-height:5rem;

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

--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:auto;
--top-sticky-logo-width:100%;
--top-sticky-logo-height:2.25rem;

--top-bgr-300: hsla(55, 36%, 88%,.85);

--bottom-bgr-300: hsla(55, 36%, 88%,.85);
--bottom-clr-300: hsl(0, 0%, 15%);
}
}

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

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

--top-icon-column-width:7.5rem;
--top-icon-width:7rem;
--top-icon-height:7rem;

--top-logo-column-width:16rem;
--top-logo-width:100%;
--top-logo-height:3.5rem;

--top-sticky-height:5.5rem;

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

--top-sticky-logo-column-width:18.5rem;
--top-sticky-logo-width:100%;
--top-sticky-logo-height:3.5rem;

--top-bgr-300: hsla(55, 36%, 88%,.85);

--bottom-bgr-300: hsla(55, 36%, 88%,.85);
--bottom-clr-300: hsl(0, 0%, 15%);
}
}