/* =============================================================================
   GLOBAL
   ============================================================================= */

@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%,.90);
--brd-nav-300:hsl(0, 0%, 100%);
--clr-nav-300:hsl(270, 8%, 10%);

--bgr-nav-350:hsla(0, 0%, 45%,.85);
--brd-nav-350:hsl(0, 0%, 50%);
--clr-nav-350: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 > Nav > Toggle / Arrow column width + right spacing (mobile) */
--nav-toggle-width:3.5rem;
--nav-toggle-spacing:.5rem;
--subnav-toggle-spacing:.75rem;

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


/* Autoplay */
--autoplay-delay: 4s;

/* 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%);
--bgr-primary-600: hsl(0, 0%, 100%);

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

/* 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 (max-width: 45rem)
   ============================================================================= */
@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%);
}
}

/* =============================================================================
   DESKTOP (min-width: 79.5rem)
   ============================================================================= */
@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%);
}
}

/* Non-standard breakpoints */

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