/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: #ffc26b;
      font-family: "Trebuchet MS", sans-serif;
      color: #ffffff;
      text-shadow: 
        -0.8px -0.8px 0 #000,  
         0.8px -0.8px 0 #000,
        -0.8px  0.8px 0 #000,
         0.8px  0.8px 0 #000; /* Black outline */
    }

    body {
      display: flex;
      flex-direction: column;
    }

    #header {
      background-color: #eb9315;
      color: white;
      padding: 10px;
      font-size: 24px;
      font-weight: bold;
      border: 2px solid #c58934;
    }

    #main {
      display: flex;
      flex: 1;
    }

    #nav {
      background-color: #ffb142;
      width: 200px;
      padding: 10px;
      font-size: 14px;
      border-right: 2px solid #c58934;
    }

    #nav a {
      text-decoration: none;
      color: #ffffff;
      display: block;
      margin: 4px 0;
    }

    #content {
      padding: 15px;
      font-size: 15px;
      line-height: 1.5;
      flex: 1;
    }

    #footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
    
      background-color: #eb9315;
      text-align: center;
      padding: 10px;
      font-size: 12px;
      color: white;
      border-top: 2px solid #c58934;
      z-index: 9999;
    }

        
    .infobox {
      float: right;
      width: 250px;
      background-color: #ffb142;
      border: 2px solid #c58934;
      padding: 10px;
      font-size: 14px;
      color: #ffffff;
      margin-top:35px
    }
    
    .infobox img {
      width: 100%;
      height: auto;
      border: 1px solid #ffffff;
      margin-bottom:10px
    }
    
    .infobox .section {
      width: 225px;
      background-color: #ffb142;
      border: 1px solid #ffffff;
      padding: 10px;
      font-size: 14px;
      color: #ffffff;
      margin-bottom:10px
    }
    
    .infobox .section .sectiontitle {
      width: 220px;
      background-color: #ffb142;
      border-bottom: 1px solid #ffffff;
      padding-bottom: 5px;
      padding-top: 5px;
      font-size: 14px;
      color: #ffffff;
      margin-bottom: 5px;
    }
    
    .infobox .infotitle {
      width: 220px;
      background-color: #ffb142;
      padding-bottom: 5px;
      padding-top: 5px;
      font-size: 20px;
      color: #ffffff;
      margin-bottom: 5px;
      
    }
    
    h1, h2, h3 {
      width: fit-content;
      background-color: #ffb142;
      border-left: 6px solid #c58934;
      padding: 4px 10px;
      margin: 20px 0 10px 0;
      font-weight: bold;
      text-shadow: none;
      color: #FFFFFF;
    }
    
    #thingy {
      border-top: 1px solid #ffffff;
      border-bottom: 1px solid #ffffff;
      width: fit-content;
      max-width: 500px;
      word-wrap: break-word;
      height: fit-content;
      padding: 10px;
    }
    
    #wrapper {
      border-top: 1px solid #ffffff;
      border-bottom: 1px solid #ffffff;
      width: fit-content;
      max-width: 1000px;
      padding: 10px 0;
      margin-bottom: 20px;
    }

    #gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 16px;
      padding: 15px;
    }
    
    .galleryimg {
      width: fit-content;
      height: fit-content;
      max-height: 250px;
      max-width: 250px;
      background-color: #ffb142;
      border: 2px solid #c58934;
      padding: 6px;
      text-align: center;
    }
    
    .galleryimg img {
      display: block;
      max-width: 100%;
      max-height: 160px;
      height: auto;
      margin: 0 auto;
      padding-bottom: 5px;
      border-bottom: 1px solid #c58934;
      object-fit: contain;
    }
    
    .caption {
      font-size: 13px;
      color: #ffffff;
      margin-top: 6px;
      text-align: center;
      text-shadow:
      -0.8px -0.8px 0 #000,
      0.8px -0.8px 0 #000,
      -0.8px  0.8px 0 #000,
      0.8px  0.8px 0 #000;
    }