/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

body {
  background-color: #000000;
  font-family: "Open Sans", sans-serif;
  padding: 5px 25px;
  font-size: 18px;
  margin: 0;
  color: #f2eeee;
}

h1 {
  font-family: "Merriweather", serif;
  font-size: 32px;
}

#wrapper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto
}

#Background {  
  display: grid;
  grid-template-rows: auto;
  
  margin: 10px;
 
}

#Man {  
  display: grid;
  grid-template-rows: auto;
  
  margin: 10px;
  
}

#Myth {  
  display: grid;
  grid-template-rows: auto;
  
  margin: 10px;
  
}

#Legend {  
  display: grid;
  grid-template-rows: auto;
  
  margin: 10px;
  
}


.gfx {
  width: 100%;
  
}

.smol {
  
}

.source {
  color: red;
  text-decoration: none;
  font-size: 1.2em;
  margin-bottom: 10px;
  
}

section p {
  margin-top: 0px;
}

section {
  
  margin: top 10vh
}

section h2 {
  text-decoration: none;
  
  
}

@media (min-width: 770px) {
  header {
    
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr
  }
}

@media (max-width: 770px) {
  header {
    
    text-align: center;
    display: grid;
    grid-template-rows: 2fr 2fr;
    grid-template-columns: 2fr 2fr;
  }
}

@media (max-width: 420px) {
  header {
    
    text-align: center;
    display: grid;
    
    grid-template-columns: 4fr;
  }
  p {
    width: 100%;
    text-align: center;
  }
  h2 {
    text-align: center;
  }
  
}

a {
  text-decoration: none;
  text-decoration-color: white;
  font-size: 1.5em;
  padding: 10px;
  background-color: rgba(206, 82, 44, 0);
  border-radius: 0px;
  
} 

header a {
  color: #ffffff;
  text-decoration: none;
  text-align: center;
  background-color: #ff7a3f;
  
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  
}

header {
  text-align: center;
  
  margin-top: 5px;
  margin-bottom: 5px;
}