/* Fonts  */
  @font-face {
      font-family: "leander"; 
      src: url("https://wren-nest.github.io/here-be-dragons/fonts/Leander.ttf") format("truetype");
      font-weight: 100;
      font-style: normal;
  }
  
  @font-face {
      font-family: "romanantique"; 
      src: url("https://wren-nest.github.io/here-be-dragons/fonts/RomanAntique.ttf") format("truetype");
      font-weight: 100;
      font-style: normal;
  }
  
  /* Content */
  h1 {
      color: rgb(41, 28, 48);
      font-family: romanantique;
      font-size:6em;
      }
    
  h2 {
      color: white;
      font-family: romanantique;
      font-size:1.5em;
      }
    
  h3 {
      color: white;
      font-family: romanantique;
      font-style: italic;
      font-size:1.5em;
      }
    
  p {
      color: white;
      font-family: leander;
      font-size:1em;
      }
  
  img {
      width: 80%;      
      height: auto;
      align-self: auto;
      }
  
  code {
      background-color: rgb(74, 74, 74);
      color: white;
      font-family: monospace;
      text-align:left;
      font-size: 0.75em;
  }
  
  /* Nav bar */
  
  #home {
    background-image: url('https://wren-nest.github.io/here-be-dragons/images/nav/home.png');
    width: 320px;
    height: 240px;
  }
  
  #home:hover {
    background-image: url('https://wren-nest.github.io/here-be-dragons/images/nav/home-blank.png');
  }
  
  #gallery {
    background-image: url('https://wren-nest.github.io/here-be-dragons/images/nav/gallery.png');
    width: 320px;
    height: 240px;
  }
  
  #gallery:hover {
    background-image: url('https://wren-nest.github.io/here-be-dragons/images/nav/gallery-blank.png');
  }
  
  #style-sheet {
    background-image: url('https://wren-nest.github.io/here-be-dragons/images/nav/style-sheet.png');
    width: 320px;
    height: 240px;
  }
  
  #style-sheet:hover {
    background-image: url('https://wren-nest.github.io/here-be-dragons/images/nav/style-sheet-blank.png');
  }
  
  #repository {
    background-image: url('https://wren-nest.github.io/here-be-dragons/images/nav/repository.png');
    width: 320px;
    height: 240px;
  }
  
  #repository:hover {
    background-image: url('https://wren-nest.github.io/here-be-dragons/images/nav/repository-blank.png');
  }
  
  /* Old nav bar */
  /* ul {
      list-style-type: none;
      margin: 0;
      width: 100%;
      padding: 0;
      overflow: hidden;
      border: 1px solid rgb(41, 28, 48);
      background-color: rgb(41, 28, 48);
    }
    
    li {
      float: left;
      border-right:1px solid rgb(198, 153, 55);
    }
    
    li:last-child {
      border-right: none;
    }
    
  li a {
      display: block;
      color: rgb(198, 153, 55);
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      background-color: rgb(41, 28, 48);
    }
    
  li a:hover {
      background-color: rgb(198, 153, 55);
      color: rgb(41, 28, 48);
      border:1px solid rgb(41, 28, 48);
    }
    
  .active {
      background-color: rgb(198, 153, 55);
      color: rgb(41, 28, 48);
      border:1px solid rgb(41, 28, 48);
      } */
  
  /* Sections */
  body {
    background-color: rgb(8, 93, 69);
    color: rgb(198, 153, 55);
    font-family: garamond;
    text-align:center;
    font-size: 100%;
    margin-left: 5%;
    margin-right: 5%;
    }
  
  .header {
    background-color: rgb(198, 153, 55);
    color: rgb(41, 28, 48);
    text-align: center;
    margin-top: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1em;
    height: auto;
    padding: 1em;
    width: 80%;
  }
  
  .code {
    background-color: rgb(74, 74, 74);
    color: rgb(255, 255, 255);
    text-align: left;
    align-self: auto;
    height: auto;
    width: 80%;
    padding: 1em;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1em;
  }
  
  .flex-container {
    display: flex;
    flex-direction: row;
    background-color: rgb(8, 93, 69);
  }
  
  @media (max-width: 800px) {
    .flex-container {
      flex-direction: column;
    }
  }