@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;900&family=Unbounded:wght@400;800&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Syne&display=swap');
 :root{
     color-scheme: only light;
     --black: #191b24;
     --shadow: #191b2482;
     --navy: #1d2a49;
     --blue: #40c0c9;
     --mint: #c5ffcf;
     --white: #fff0eb;
     --fluid-p: clamp(0.875rem, 0.1816rem + 1.9531vw, 1.5rem);
     --fluid-h4: clamp(1.125rem, 0.4316rem + 1.9531vw, 1.75rem);
     --fluid-h3: clamp(1.375rem, 0.6816rem + 1.9531vw, 2rem);
     --fluid-h2: clamp(1.625rem, 0.9316rem + 1.9531vw, 2.25rem);
     --fluid-h1: clamp(1.875rem, 1.1816rem + 1.9531vw, 2.5rem);
     --fluid-thank: clamp(2.5rem, 2.105rem + 2.105vw, 4rem);
}
 html{
     min-width: 360px;
}
 body{
     height: 100%;
     background-color: var(--black);
     margin: 0;
     color: var(--white);
     display: grid;
     grid-template-rows: auto 1fr auto;
}
/* code from orange.com on how to have labels not appear on screen but work for screen readers */
 .visually-hidden {
     position: absolute;
     position: absolute !important;
     width: 1px !important;
     height: 1px !important;
     padding: 0 !important;
     margin: -1px !important;
     overflow: hidden !important;
     clip: rect(0,0,0,0) !important;
     white-space: nowrap !important;
     border: 0 !important;
}
 h1{
     font-family: 'Unbounded', sans-serif;
     font-size: var(--fluid-h1);
     color: var(--white);
}
 h2{
     font-family: 'Unbounded', sans-serif;
     font-size: var(--fluid-h2);
     color: var(--white);
}
 h3{
     font-family: 'Unbounded', sans-serif;
     font-size: var(--fluid-h3);
     color: var(--white);
}
 h4{
     font-family: 'Unbounded', sans-serif;
     font-size: var(--fluid-h4);
     color: var(--white);
}
 p{
     font-family: 'Figtree', sans-serif;
     font-size: var(--fluid-p);
}
 li{
     font-family: 'Figtree', sans-serif;
     font-size: var(--fluid-p);
     color: var(--white);
}
 a p{
     font-family: 'Figree', sans-serif;
     font-size: var(--fluid-p);
     font-weight: 900;
}
 .bumper{
     height: 100px;
     width: 100%;
}
.button {
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto, 10px;
	width: 100%;
	border-radius: 40px;
	background-color: var(--blue);
	box-shadow: 0px 3px 10px 1px var(--shadow);
	color: var(--navy);
	font-family: 'Figree', sans-serif;
	font-size: 1.75rem;
	transition: all 200ms ease;
}
.button:hover{
	box-shadow: 0px 3px 10px 3px var(--shadow);
	color: var(--mint);
    text-shadow: 0px 2px 5px var(--shadow);
}
.button:active{
	color: var(--white);
}

 .preLoadAnim{
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     background-size: 500%, 500%;
     background-position: 100%, 50%;
     background-image: linear-gradient(90deg, var(--navy), var(--mint), var(--blue), var(--navy));
     -webkit-animation: lading 3s linear infinite;
     animation: loading 3s linear infinite;
     opacity: 1;
}
 .loading{
     text-shadow: 2px 2px 8px var(--shadow);
     font-size: var(--fluid-thank);
     font-family: 'Unbounded', sans-serif;
     color: var(--blue);
}
 @keyframes loading {
     0%{
         background-position:100% 50% 
    }
    100%{
         background-position:-33% 50% 
    }
}
 @-webkit-keyframes loading {
     0%{
        background-position:100% 50%
    }
     100%{
        background-position:-33% 50%
    }
}