*, *:before, *:after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 clear: both;
 overflow: visible;
}

@media screen and (max-width:600px) {
 #hero {background-image:url(responsive/3-1000w.webp);}
}

@media screen and (min-width:601px) and (max-width:800px) {
 #hero {background-image:url(responsive/3-1200w.webp);}
}

@media screen and (min-width:801px) and (max-width:900px) {
 #hero {background-image:url(responsive/3-1600w.webp);}
}

@media screen and (max-width: 900px) {
 #hero {min-height:100vh;background-size:cover;}
 .hero-desktop {display:none;}
 #mobile-promo {display:flex;}
}

@media screen and (min-width: 901px) {
 #hero {background-image:url(images/indexbg.webp);background-size:100% auto;aspect-ratio:3264/3598;max-width:100%;}
 #mobile-promo {display:none;}
 .hero-desktop {display:flex;}
 .hero-desktop h1 {font-size:40px;}
}

@media screen and (min-width: 1262px) {
 .hero-desktop h1 {font-size: 60px;}
}

@media screen and (min-width: 1849px) {
 .hero-desktop h1 {font-size: 90px;}
}

@font-face {
 font-family: Neuton;
 font-display: swap;
 src: url(fonts/Neuton-Regular.ttf);
}

@font-face {
 font-family: Neuton-Bold;
 font-display: swap;
 src: url(fonts/Neuton-Bold.ttf);
}

p, h1 {
 font-family: "Neuton", serif; 
}

.hero-desktop img {
 box-shadow:12px 12px black;
 transition-duration: 0.2s;
}

.hero-desktop img:hover {
 box-shadow:0px 0px black;
}

html {
 height: 100%;
 margin: 0;
 padding: 0;
 background-color: #000000;
}

body {
 margin: 0;
 padding: 0;
}