/*             */
/*    Fonts    */
/*             */

/* google-webfonts-helper :: LOGO */
@font-face {
  font-display: swap;
  font-family: 'Audiowide';
  font-weight: normal;
  src: url('/fonts/audiowide-v22-latin-regular.woff2') format('woff2');
}

/* google-webfonts-helper :: BODY TEXT - REGULAR */
@font-face {
  font-display: swap;
  font-family: 'Host Grotesk';
  font-weight: normal;
  src: url('/fonts/host-grotesk-v5-latin-regular.woff2') format('woff2');
}

/* google-webfonts-helper :: BODY TEXT - BOLD */
@font-face {
  font-display: swap;
  font-family: 'Host Grotesk';
  font-weight: bold;
  src: url('/fonts/host-grotesk-v5-latin-800.woff2') format('woff2');
}


/*                */
/*    Generics    */
/*                */

/* The foundation for everything */
html { font-size: 16px; }

body {
  font-size: 1rem;
  font-family: 'Host Grotesk', sans-serif;

  margin: 0;
  
  color: #FFFFFF;
  background: #221111;
}

/* We will never need those ugly blue/purples on our links */
a { color: inherit; }

/* But we need something on some hovers */
a:hover {
  opacity: 70%;
  transition: opacity 0.075s;
}

/* Let's just keep the default button but change the font */
button { 
  font-family: 'Host Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: bold; 
}

/* Where's your JavaScript buddy? (Also the 404 page) */
noscript, #page404 {
  flex-shrink: 0;
  height: 100svh;
  width: 100svw;
  z-index: 9;

  background: linear-gradient(0deg,#FFC862 0%, #551C1C 100%);
  font-size: 2rem;
  text-align: center;
  text-shadow: #000000 0 0 .125rem;

  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  top: 0;
}

noscript b, #page404 b {
  margin-bottom: 0;
  font-size: 4rem;
}


/*            */
/*    HOME    */
/*            */

/* Cool shader BG */
.page-home-bg canvas {
  display: block;
  position: fixed;
  
  width: 100svw; 
  height: 100svh;

  opacity: 30%;
}

/* Display the contents over the BG and make sure it's centered */
.page-home-content {
  min-height: 100svh;
  min-width: 100svw;

  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
}

/* Placeholder sun */
.sun {
  width: 16rem;
  height: 16rem;
}

/* Human Made icon */
.human-made {
  width: 4rem;
  height: 4rem;
  margin-top: 1rem;

  fill: #FFFFFF;
}


/*              */
/*    Mobile    */
/*              */

/* If browser window is thinner than 3:4 - 4:5 aspect ratio... */
@media (max-aspect-ratio: 0.77) {

  /* Swap desktop homepage for mobile */
  body { background: #221111; }

}

/* Patch for smaller screens */
@media only screen and ((max-width: 800px) or (max-height: 500px)) {
  
  html { font-size: 12px; }

}


/*                   */
/*  Ultra-Ultrawide  */
/*                   */

/* Why would you have a screen wider than this? */
@media (min-aspect-ratio: 2.4) {

  html { font-size: 2svh; }

}