body {
            display: flex;
            justify-content: center;
            height: 10vh;
            margin: 0;
            background-color: #005045;
            font-family: 'Afacad Flux', sans-serif;
            font-size: 1.1em;
        
        }
.container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            width: 80%;
            max-width: 1200px;
        }
.header {
            grid-column: span 4;
            background-color: #1e4b5e;
            color: #c2ddc9;
            padding: 20px;
            text-align: center;
        }
.main-nav{
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-gap: 10px;
            padding: 0;
            list-style: none;
            
            }
           /* Hamburger Menu Styling */
.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background-color: black;
}

        
        .full-row {
            grid-column: span 4;
            background-color: lightgoldenrodyellow;
            padding: 20px;
        }
        .title-row{
            grid-column: span 4;
            background-color: #067D25;
            text-align: center;
        }
        .row {
            display: flex;
            align-items: center; /* Vertically aligns items */
            gap: 20px; /* Optional: Adds space between columns */
            margin-bottom: 200wpx; /* Adjust this value to control space between rows */
          }
          
          .image-column, .text-column {
            flex: 1; /* Makes columns equal in width */
          }
          .image-column img {
            max-width: 100%;
            height: auto;
            width: 1000px; /* Adjust width as needed */
          }
          
        .two-column-1, .two-column-2 {
            grid-column: span 2;
            background-color: rgb(119, 234, 161);
            padding: 20px;
        }

        .four-column {
            grid-column: span 1;
            background-color: #30AC51;
            color: white;
            padding: 20px;
            text-align: center;
            
        }

        .footer {
            grid-column: span 4;
            background-color: #1e4b5e;
            padding: 20px;
            text-align: center;
        }
        
       /* STICKY HEADER SECTION*/   
        .sticky-header {
            position: sticky;
            top: 0;
            width: 100%;
            background-color: #333; /* Dark background for the header */
            color: white; /* White text */
            padding: 10px 20px;
            z-index: 1000; /* Ensure it's above other content */
          }
          
          .header-content {
            display: flex;
            justify-content: space-between; /* Aligns the text and button */
            align-items: center;
          }
          
          .sticky-header h1 {
            font-size: 24px;
            margin: 0;
          }
          /*HOME BUTTON*/
        .home-button {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 10px 20px;
            background-color: #1e4b5e;
            color: #c2ddc9;
            text-decoration: none;
            font-size: 1rem;
            font-weight: bold;
            border: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        
        .home-button:hover {
            background-color: #30AC51;
            color: white;
        }
        .self-portrait {
            max-width: 400px; /* Adjust the width as needed */
            height: auto; /* Maintain aspect ratio */
            border-radius: 8px; /* Optional: Add rounded corners */
            margin: 0 auto; /* Center the image inside its container */
            display: block; /* Ensure it behaves as a block-level element for centering */
        }
        
        
        /* Ensure proper layout on mobile */
        @media (max-width: 568px) {
            .home-button {
                top: 5px;
                right: 5px;
                font-size: 0.9rem;
                padding: 8px 16px;
            }
        }
         /* Media query for mobile devices */
         @media (max-width: 568px) {
            .container {
                grid-template-columns: 1fr;
            }
            .header, .four-column, .full-row, .title-row, .two-column-1, .two-column-2, .footer {
                grid-column: span 1;
            }
            .main-nav {
                display: none;
                flex-direction: column;
        
                right: 0;
               
                width: 100%;
                text-align: center;
            }

            /* adds "active" to end nav class to control visibility and display hamburger */
            .main-nav.active {
                display: flex;
            }
        
            .hamburger {
                display: flex;
                position: absolute;
                top: 20px;
                left: 10px;
            }
        }