@import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
html, body {
  font-size:16px;
  margin:0;
  padding:0;
  height:100%;
  font-family:"Montersat", monospace;
}
header {
 display: flex;
 position: relative;
 width: 100%;
 margin: 0 auto;
 justify-content: space-between;
 line-height: 90px;
 background-color:#ffcc00;
 border-bottom:4px solid #222;
}
header .n, header a {
  width: 100%;
  margin-left:10px;
  font-family:"Rubik", serif;
  font-weight:bold;
  
  font-size:4vw;
  letter-spacing: 1px;
  text-align:center;
}

header a {
  text-decoration:none;
}

.header_ {
  font-size:30px;
  font-size: max(10 * (1vw + 1vh) / 2, 30px);
  color:#222;
  font-weight:bold;
  background-color:#ffcc00;
  text-align: center;
  font-family: 'Rubik', sans-serif;  
  letter-spacing: -5px;
  line-height: 300px;
  line-height: min(8 * (1vw + 1vh), 200px);

  text-transform: uppercase;
  padding: 100px 10px 100px 10px; 
}



nav {
  
  font-family: 'Oswald', sans-serif;
}

nav a { 
  font-size:1.2em;
  text-decoration: none;
}
nav a:hover { 
  background-color:yellow;
}


article, nav {
  width: calc(100% / 1.2);
  max-width: 816px;
  margin:30px auto 30px auto;

}

h2, h1 {
  text-align: center;
  font-family: "Oswald",sans-serif;
  font-size: 48px;
  font-weight: 900;
  line-height: 64px;
  margin: 80px auto;
  max-width: 840px;
}

article p {
 font-family: "montserrat-medium",monospace, sans-serif;
 font-size: 18px;
 font-weight: 500;
 line-height: 32px;
 margin-top:2em;
}



footer {
  margin-top: 100px;
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  color:#fff;
  background-color: #303030;
  text-align: center;
  
}

footer a, footer a:visited {
  color: #fefefe;
  text-decoration: none;
  }