/* body and stuff */
    body {
      font-family: 'typewriterroughregular';
      color: #CCC;
      font-size: 1.2em;
      margin: 0 auto;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      background-image: url("../images/bg-02.jpg");
      background-color: #000;
      background-repeat: repeat;
      text-align: normal;
    }

        @font-face {
            font-family: 'typewriterroughregular';
            src: url('fonts/typewriterrough-webfont.woff2') format('woff2'),
                 url('fonts/typewriterrough-webfont.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'stencil_ww_iiregular';
            src: url('fonts/stencil_ww_ii-webfont.woff2') format('woff2'),
                 url('fonts/stencil_ww_ii-webfont.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }



/* Header */
        .header {
            background-image: url('../images/camo-bg.png');
            background-color: rgba(34, 101, 64, 0.5); /* Optional: Fallback background color */
            border: 2px solid #163122;
            padding: 10px 20px;
            text-align: center;
            min-width: 340px; /* Set a minimum width */
            max-width: 740px; /* Set a maximum width */
            margin: 0 auto; /* Center the header horizontally */
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover; /* Adjust the background size */
            display: flex; /* Use flexbox */
            justify-content: space-between; /* Align children at opposite ends */
            align-items: center; /* Align items vertically at the center */
            box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
        }

/* Media query for smaller screens */
        @media (max-width: 768px) {
            /* Adjust max-width and margin for smaller screens */
            .header, .main, .footer {
                max-width: 100%;
                margin: 0 auto;
                flex-direction: column;
                padding: 2em 1em;
            }

            .header {
                flex-direction: column; /* Stack items vertically */
            }

            .nav {
                flex-direction: row; /* Change direction to horizontal */
                justify-content: center; /* Center the buttons horizontally */
                margin-top: 10px; /* Add some spacing between the logo and buttons */
            }

            nav a {
                width: auto; /* Allow buttons to expand horizontally */
                margin: 2px 5px; /* Adjust margin for smaller screens */
            }
        }

/* logo */
        .main-logo {
            width: 40%; /* Adjust the width as needed */
            height: auto; /* Maintain aspect ratio */
            min-width: 300px;
        }


/* logo in the upper right corner */
        #header {
            position: relative;
        }

        .logo-link {
            position: absolute;
            bottom: 4px;
            right: 8px; /* Adjust the right position as needed */
        }

        .logo {
            width: 100px; /* Adjust the width as needed */
            height: auto; /* Maintain aspect ratio */
            display: block;
        }
        .logo img {
            width: 100px; /* Adjust the width as needed */
            height: auto; /* Maintain aspect ratio */
            display: block;
        }

    @media only screen and (max-width: 800px) {
      .header {
        background-size: cover;
        padding-bottom: 20%; /* Adjust the padding for smaller screens */
      }
    }

/* buttons */
        .button {
          font-family: 'stencil_ww_iiregular', stencil;
          color: #FFF;
          font-size: 1.5em;
          font-weight: 400;
          display: block;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid #0B0707;
            padding: 1% 2%;
            margin: auto;
            text-align: center;
            text-decoration: none;
            background-color: #030042;
            border-radius: 4px;
            max-width: 80%;
        }

        .button:hover {
          background-color: #0B0707;
        }

/* nav */
        nav {
          font-family: 'stencil_ww_iiregular', stencil;
          display: flex;
          justify-content: center;
          font-size: 12pt;
          flex-direction: column;  /* Start with horizontal layout */
          flex-wrap: wrap;    /* Allow items to wrap */
          padding: 2px;
        }

        nav a {
          font-family: 'stencil_ww_iiregular', stencil;
          color: #FFFFFF;
          background-color: #226640;
          text-decoration: none;
          margin: 6px;
          padding: 5px 10px;
          border: 2px solid #163122;
          border-radius: 3px;
          transition: color 0.3s;
          box-sizing: border-box;
          display: block;
          white-space: nowrap;
        box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.6);
        }

        nav a:hover {
          font-family: 'stencil_ww_iiregular', stencil;
          color: #FFFFFF;
          background-color: #0B0707;
        }


/* header -row */
        .custom-hr {
            height: 10px; /* Set the height of the horizontal rule */
            background-image: url("../images/stripe.png"); /* Specify the path to your image */
            background-repeat: no-repeat; /* Ensure the image is not repeated */
            background-size: 100% 100%; /* Adjust the size of the image to fit the <hr> */
            border: none; /* Remove the default border */
            margin: 20px auto; /* Adjust the margin as needed */
            width: 80%;
        }

/* Main section */
        .main {
            width: 95%; /* Ensure it takes full width */
            max-width: 740px; /* Set a maximum width */
            margin: 0 auto; /* Center the main content */
            padding: 2%; /* Add some padding */
            font-family: 'typewriterroughregular', courier;
            font-size: 12pt;
            padding: 0 2% 0 2%;
        }

       .caption {
            text-align: center; 
            font-weight: normal;
            font-size: .8em;
            font-family: 'typewriterroughregular', courier;
            color: #CCC;
            text-transform: capitalize;
            }

       .section-text{
            text-align: left;
            font-weight: 400;
            font-size: 1em;
            font-family: 'typewriterroughregular', courier;
            color: rgba (255 255 255 .80);
            text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.9);
            }

       .title-text{
            text-align: left;
            font-weight: normal;
            font-size: 1.25em;
            font-family: 'stencil_ww_ii', stencil;
            text-transform: uppercase;
            color: rgba(254, 211, 21, .8);
            text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.9);
            }

        .logo-text{
            text-align: center;
            font-weight: normal;
            font-size: 1.0em;
            font-family: 'stencil_ww_ii', stencil;
            font-weight: 400;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .9);
            text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.9);
            }

        
/* photo styles */
    /* larger screens */
        @media (min-width: 768px) {
            #sorting-links {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            .pics {
                width: calc(33.33% - 20px); /* Adjust the width as needed */
                margin-bottom: 20px;
            }
        }

    /*  mobile screens */
        @media (max-width: 767px) {
            .pics {
                width: 100%;
            }
        }

    .home-image {
        max-width: 90%;
        min-width: 320px;
        display: block;
        margin: 0 auto; /* This will center the image */
        border: 2px solid #163122;
        box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
        box-sizing: border-box;
    }
    .home-image-noline {
        max-width: 90%;
        min-width: 320px;
        display: block;
        margin: 0 auto; /* This will center the image */
    }


/* Form elements */
        .contact-form {
            max-width: 80%;
            margin: 0 auto;
        }
        .form-group {
            margin-bottom: 10px;
            width: 95%;
            display: inline-block; /* Added new style */
            margin-right: 10px; /* Added new style */
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
        }
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-family: 'typewriterroughregular', courier;
        }
        .form-group textarea {
            height: 150px;
        }

/* form buttons */
       .form-button {
            font-family: 'typewriterroughregular', courier;
            color: #FFF;
            font-size: 1em;
            display: block;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 2px solid #163122;
            padding: 1% 2%;
            margin: auto;
            text-align: center;
            text-decoration: none;
            background-color: #226640;
            border-radius: 4px;
            max-width: 80%;
        }

        .form-button:hover {
            background-color: #0B0707;
        }

/* Center the form container */
        .form-container {
            background: rgba(255, 255, 255, 0.6); /* Optional: Add a background color to the form container */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column; /* Stack the form elements vertically */
            margin: 0 auto; /* Center the container horizontally */
            max-width: 80%; /* Adjust the max-width as needed */
            padding: 20px; /* Add padding around the form */
            border-radius: 8px; /* Optional: Add rounded corners */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.0); /* Optional: Add a subtle shadow */
        }

/* Back to top button */
        #back-to-top-btn {
          font-family: 'stencil_ww_iiregular', stencil;
          display: none; /* Initially hide the button */
          position: fixed;
          bottom: 10%;
          right: 10%;
          z-index: 99;
          border: 2px solid #163122;
          outline: none;
          background-color: #226640;
          color: white;
          cursor: pointer;
          padding: 10px 15px;
          border-radius: 5px;
            opacity: .8;
        }

        #back-to-top-btn:hover {
          background-color: #0B0707;
        }


/* Footer */
        .footer {
          background-image: url('../images/camo-bg.png');
          background-color: rgba(34, 101, 64, .5);
          border: 2px solid #163122;
          position: relative;
          margin: 30px auto 30px; /* Adjusted margin property */
          bottom: 2%;
          width: 80%;
          max-width: 740px; /* Set a maximum width */
          padding: 10px;
          text-align: center;
          font-weight: 400;
          font-size: 12pt;
          font-family: 'typewriterroughregular', courier;
          color: rgba(255, 255, 255, 0.8); /* Corrected color definition */
          box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.5);
        }

        @media only screen and (max-width: 600px) {
          .header, .footer {
            padding: 0.5em;
          }

          .main {
            padding: 0.5em;
            text-align: center;
          }
        }

        .footer-nav {
          text-decoration: none;
          font-weight: 400;
          font-size: 12pt;
          font-family: 'typewriterroughregular', courier;
          color: rgba(255, 255, 255, 0.8); /* Corrected color definition */
        }

        .footer .footer-nav:hover {
          color: #FED315; /* Change this to the color you want on hover */
        }