/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{appearance:button;-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{appearance:textfield;-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{appearance:none;-webkit-appearance:none}::-webkit-file-upload-button{appearance:button;-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
/* Load Fonts */
@font-face {font-family: 'open_sanslight';src: url('fonts/opensans-light-webfont.woff2') format('woff2'),url('fonts/opensans-light-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'robotoblack';src: url('fonts/roboto-black-webfont.woff2') format('woff2'),url('fonts/roboto-black-webfont.woff') format('woff');font-weight: normal;font-style: normal;}

    
:root {
color-scheme: light dark;
supported-color-schemes: light dark;


/* Font Faces */
--ff-headline: "robotoblack", sans-serif;
--ff-body: "open_sanslight", sans-serif;

/* Font Sizes */
--fs-small: .8rem;
--fs-base: 1rem;
--fs-step-0: clamp(1rem, 0.92rem + 0.39vw, 1.25rem);
--fs-step-1: clamp(1.1875rem, 1.01rem + 0.87vw, 1.75rem);
--fs-step-2: clamp(1.4375rem, 1.11rem + 1.65vw, 2.5rem);
--fs-step-3: clamp(1.75rem, 1.19rem + 2.82vw, 3.5625rem);
--fs-step-4: clamp(2.0625rem, 1.15rem + 4.56vw, 5rem);
--fs-step-5: clamp(2.5rem, 1.08rem + 7.09vw, 7.0625rem);
--fs-step-6: clamp(3rem, 0.84rem + 10.78vw, 9.9375rem);

/* Color Pallet */
--clr-primary: 174, 100%, 50%, 1; /* #00ffe6 */
--clr-secondary: 174, 100%, 90%, 1; /* #ccfffa */
--clr-dark: 215, 16%, 15%, 1; /* #20252c */
--clr-dark-alt: 215, 16%, 16%, 1;
--clr-white: 360, 100%, 100%, 1; /* ffffff */

/* Color Pallet */
--clr-primary-light: 279, 83%, 50%, 1; /* #9f16e9 */
--clr-secondary-light: 279, 100%, 71%, 1; /* #cb6bff */
--clr-light: 0, 0%, 95%, 1; /* #f1f1f1 */

/* Container */
--max-width: 1280px;
--full-width: 100%;
--full-height: 100%;

/* Transitions */
--transition-long: 650ms ease-in-out;
--transition-base: 500ms ease-in-out;
--transition-medium: 250ms ease-in-out;
--transition-fast: 100ms ease-in-out;

/* Images */
--bg-header-image: url('../images/Backgrounds/Header-BG-Dark.jpg');
--bg-header-image-light: url('../images/Backgrounds/Header-BG-Light.jpg');
}

/* -------------------------------- 

Dark Mode Styles

-------------------------------- */
@media (prefers-color-scheme: dark ) {

body {
background: hsl(var(--clr-dark)) !important;
background-image: var(--bg-header-image) !important;
background-repeat: no-repeat !important;
background-position: top right !important;
}

.maintenance--panel h1 {
font-family: var(--ff-headline);
font-size: var(--fs-step-4);
color: hsl(var(--clr-white)) !important;
}

.gear1, .gear3 {
fill: hsl(var(--clr-primary)) !important;
}

.gear2 {
fill: hsl(var(--clr-secondary)) !important;
}

a.button {
color: hsl(var(--clr-dark)) !important;
background-color: hsl(var(--clr-primary)) !important;
}

a.button:hover,
a.button:active {
background-color: hsl(var(--clr-secondary)) !important;
}

a.button:focus {
box-shadow:  0 0 0 4px hsl(var(--clr-dark)), 0 0 0 6px hsl(var(--clr-primary)) !important;
}
}

/* -------------------------------- 

Light Mode Styles
Main Setup

-------------------------------- */
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: var(--ff-body);
font-size: var(--fs-step-0);
background-color: hsl(var(--clr-white));
margin: 0;
padding: 0;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
background-image: var(--bg-header-image-light);
background-repeat: no-repeat;
background-position: top right;

}


/* -------------------------------- 

Maintenance Section

-------------------------------- */

.maintenance--panel {
width: 100%;
padding: 4rem 2rem;
}

.maintenance__panel__inner  {
display: grid;
grid-template-columns: 1fr;
align-items: center;
justify-content: center;
max-width: 1280px;
margin: 0 auto;
}

.maintenance--panel h1 {
font-family: var(--ff-headline);
font-size: var(--fs-step-4);
color: hsl(var(--clr-dark-alt));
animation: slide-down 900ms ease-out 40ms forwards;
text-align: center;
margin: 0;
padding: 0;
}

.maintenance--panel p {
text-align: center;
line-height: 1.5;
animation: slide-up 600ms ease-out 40ms forwards;
transform: translateY(50px);
opacity: 0;
}



/* -------------------------------- 

Gears Animation

-------------------------------- */
.gear--wrapper {
width: 100%;
float: right;
position: relative;
height: 110px;
margin: 0 auto;
text-align: center;
}

.gear__content {
width: 142px;
height: 110px;
margin: 0 auto;
text-align: center;
position: relative;
left: 0;
}

.gear1,
.gear3 {
left: -50%;
position: absolute;
width: 60px;
height:60px;
clear: both;
fill: hsl(var(--clr-primary-light));
}

.gear2 {
left: -50%;
position: absolute;
width: 40px;
height:40px;
clear: both;
fill: hsl(var(--clr-secondary-light));
}

.gear1 {
top: 25px;
left: 6px;
}

.gear2 {
left: 49px;
}

.gear3 {
top: 24px;
left: 74px;
}

.rotateRight {
animation: right-rotation 10s infinite linear;
}

.rotateLeft {
animation: left-rotation 5.57s infinite linear;
}


@media only screen and (max-width: 45em) {
.gear--wrapper {
height: 120px;
}
}




/* - - - - - - - - - - - - - - - - - - -

Button

- - - - - - - - - - - - - - - - - - - */

.button--wrapper {
display: flex;
align-items: center;
justify-content: center;
animation: slide-up 800ms ease-out 40ms forwards;
transform: translateY(50px);
}


a.button {
font-size: var(--fs-base);
border: none;
background-color: transparent;
font-family: inherit;
padding: var(--padding-0);
cursor: pointer;
text-decoration: none;
}

@media screen and (-ms-high-contrast: active) {
a.button {
border: 2px solid currentcolor;
}
}

/* button setup */
a.button {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: start;
background-color: hsl(var(--clr-primary-light));
color: hsl(var(--clr-light));
border-radius: 8px;
/* box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18); */
padding: 1em 2em;
min-width: 10ch;
min-height: 44px;
text-align: center;
line-height: 1.1;
transition: var(--transition-medium);
}

/* button hover */
a.button:hover,
a.button:active {
background-color: hsl(var(--clr-secondary-light));
/* box-shadow: 0 0 10px hsl(var(--clr-primary)); */
}

/* button focus */
a.button:focus {
outline-style: solid;
outline-color: transparent;
outline-offset: 15px;
box-shadow:  0 0 0 4px hsl(var(--clr-light)), 0 0 0 6px hsl(var(--clr-primary-light));
}

/* move icon away from text */
a.button .fa {
margin-left: 0.25rem;
}

/* class for small button */
a.button.button--small {
font-size: 0.8rem;
}

/* class for small button */
a.button.button--large {
font-size: 1.2rem;
}

/* class for full width button */
a.button.button--block {
width: var(--full-width);
}

/* center button */
@media only screen and (max-width: 75em) {
a.button.button {
margin: var(--margin-0auto);
}
}

/* full width button */
@media (max-width: 467px) {
a.button.button {
width: var(--full-width);
}
}


/* -------------------------------- 

Bling Helpers

-------------------------------- */

/* remove line break on mobile */
.mobile__remover {
display: block;
}

@media only screen and (max-width: 45em) {
.mobile__remover {
display: none;
}
}


/* -------------------------------- 

Animations

-------------------------------- */
@keyframes right-rotation {from{transform:rotate(0deg)}to{transform:rotate(359deg)}}
@keyframes left-rotation {from{transform:rotate(0deg)}to{transform:rotate(-359deg)}}


@keyframes slide-up {
0% {transform: translateY(50px);opacity: 0;}
100% {transform: translateY(0px);opacity: 1;}
}

@keyframes slide-down {
0% {transform: translateY(-50px);opacity: 0;}
100% {transform: translateY(0px);opacity: 1;}
}




.fade-in {
opacity: 0;
animation: fade-in 800ms ease-in-out forwards;
}

@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}