/* This is predominately typography and font styling */

* {
  font-size: 18px; /* 1em = 18px and p tags should sit at this */
  font-family: "Nunito", Helvetica, monospace, sans-serif;
}

html { 
  background-color: black;
  margin: 0;
  border: 0;
  padding: 0;
  z-index: -5;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0px 0px;
}

.container{
  padding: 5% 5%;
}

/* Main typography nerd-ery */
h1 {
  font-size: 3rem;
}

.pinyon-script-regular {
  font-family: "Pinyon Script", cursive;
  font-weight: 400;
  font-style: normal;
  margin: 0px auto 0px 50px;
  font-size: 3rem;
  color: whitesmoke;
}

.nunito-sans-header {
  font-family: "Nunito Sans Regular", sans-serif;
  font-style: normal;
} 

h2 {
  font-size: 2rem;
  font-weight: 400;
  margin: 0px 0px 0px 0px;
}

h3 {
  font-size: 1.5rem;
  font-weight: 400;
}

h4{
  font-size: 1rem;
  font-weight: 400;
}

p{
  font-size: 1rem;
}

h5 {
  font-size:0.8rem;
  margin:0px 0px 0px 0px;
}

/* Media query for smaller screens */
@media (max-width: 600px) { 
  h1 {
    font-size: 2.5rem;
  }

  .orbitron-font {
    font-optical-sizing: auto;
    font-family: "Orbitron";
    font-weight:50;
  }

  .nunito-sans-header {
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
  }

  h2 {
    font-size: 2rem;
  }
  
  h3 {
    font-size: 1.5rem;
  }

  p{
    font-size: 1rem;
  }

  h4 {
    font-size: 1rem;
  }

  h5 {
    font-size:0.8rem;
  }

}