/*! 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}

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

Custom Properties

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

/* Font Family */
--ff-main: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;



/* Font Sizes */

--fs-base: 1rem;
--fs-body: clamp(1rem, 0.92rem + 0.39vw, 1.25rem);
--fs-headline: clamp(2.0625rem, 1.15rem + 4.56vw, 5rem);

/* Font Tracking */
--tracking-tight: -0.075ch;

/* Color Pallet */
--clr-primary: hsl(264, 100%, 54%, 1);
--clr-light: hsl(215, 16%, 15%, 1);
--clr-dark: hsl(360, 100%, 100%, 1);

/* Gear Color Pallet */
--clr-gear-large: hsl(0, 0%, 70%, 1);
--clr-gear-small: hsl(0, 0%, 50%, 1);

/* Font Alignment */
--fa-left: left;
--fa-center: center;
--fa-right: right;
}


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

Custom Properties - Dark Mode Color Changes

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

@media (prefers-color-scheme: dark) {
:root  {

/* Color Pallet */
--clr-primary: hsl(153, 100%, 40%, 1);
--clr-light: hsl(360, 100%, 100%, 1);
--clr-dark: hsl(215, 16%, 15%, 1);


/* Gear Color Pallet */
--clr-gear-large: hsl(0, 0%, 50%, 1);
--clr-gear-small: hsl(0, 0%, 70%, 1);
}
}


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

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-main);
font-size: var(--fs-body);
background-color: var(--clr-dark);
line-height: 1.5;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
}

h1 {
font-family: var(--ff-main);
font-size: var(--fs-headline);
font-weight: 900;
line-height: 1;
color: var(--clr-primary);
text-align: center;
letter-spacing: var(--tracking-tight);
margin: 0 auto;
padding: 0;
}

p {
color: var(--clr-light);
}

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

Maintenance Section

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

.maintenance--panel {
width: 100%;
padding: 4rem 2rem;
max-width: 1280px;
margin: 0 auto;
}

.maintenance--panel--inner  {
display: grid;
grid-template-columns: 1fr;
align-items: center;
justify-content: center;
}

.maintenance--panel--body {
text-align: center;
}




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

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;
}

.gear--1,
.gear--3 {
left: -50%;
position: absolute;
width: 60px;
height:60px;
clear: both;
fill: var(--clr-gear-large);
}

.gear--2 {
left: -50%;
position: absolute;
width: 40px;
height:40px;
clear: both;
fill: var(--clr-gear-small);
}

.gear--1 {
top: 25px;
left: 6px;
}

.gear--2 {
left: 49px;
}

.gear--3 {
top: 24px;
left: 74px;
}

.rotate--right {
animation: Rightrotation 10s infinite linear;
}

.rotate--left {
animation: Leftrotation 5.57s infinite linear;
}

@keyframes Rightrotation{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}
@keyframes Leftrotation{from{transform:rotate(0deg)}to{transform:rotate(-359deg)}}

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


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

Line Breaks

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

.break {display: visible;}

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


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

Animations

-------------------------------- */
.rise {
opacity: 0;
animation: rise 800ms ease-in-out forwards;
}

.rise.heading {
animation: rise 900ms ease-in-out forwards 0.1s;
}

.rise.subheading {
animation: rise 1000ms ease-in-out forwards 0.1s;
}

@keyframes rise {
0% {
transform: translateY(2rem);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}

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

@keyframes fall {
0% {
transform: translateY(-2rem);
opacity: 0;
}
100% {
transform: translateY(0);

opacity: 1;
}
}

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

@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}