body {
    background-color: #172d13;
    color: white;
    margin: 0 auto;
    background-image: url("/assets/branding/backgrounds_pattern_transparent.png");
    background-repeat: repeat;
    background-size: 150px;
    font-size: 20px;
    padding: 0px;
}

footer {
    text-align: center;
    background-color: #172d13;
}

main {
    margin-top: 40px;
    flex: 1; /* Allow the main content to grow and fill the available space */
}

.narrow {
    display: flex;
    flex-direction: column;
    max-width: 950px;
    flex: 1;
    text-align: center;
    margin: 0 auto;
    padding: 20px;
    background-color: #172d13;
    box-shadow: 0 40px 80px 0 rgba(0,0,0,0.75);
    position: relative; /* Optional: if you want to control stacking context */
    z-index: 1; /* Ensure it is below the topnav */
}

/* ----------------------------------------------------------- Fonts ----------------------------------------------------------- */

/* Body font */
body {
    font-family: "Merriweather", serif;
}

/* Heading font */
h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", sans-serif;
}

/* ----------------------------------------------------------- Fonts ----------------------------------------------------------- */

/* ----------------------------------------------------------- Links ----------------------------------------------------------- */

a {
    color: white;
    text-decoration: none;
    /* Remove underline from links */
    /* Default link color */
}

a:visited {
    color: #e4312b;
    /* Color after the link has been visited */
}

a:hover {
    color: #e4312b;
    /* Color when the mouse is over the link */
}

a:active {
    color: #e4312b;
    /* Color when the link is clicked */
}

/* ----------------------------------------------------------- Links ----------------------------------------------------------- */

/* ----------------------------------------------------------- Button ---------------------------------------------------------- */

.button-container {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Arrange buttons in a column */
    align-items: center; /* Center buttons horizontally */
    gap: 20px; /* Space between buttons */
    margin: 20px 0; /* Space above and below the button container */
}

.button {
    background-color: white;
    border: none;
    color: #149954;
    padding: 10px 20px; /* Adjusted padding for better appearance */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 25px;
    border-radius: 10px;
    font-weight: 700; /* Bold weight */
    width: 90%;
    box-shadow: 0 10px 10px 0 rgba(0,0,0,0.5);
}

.button a {
    color: #149954;
    display: block; /* Make the link fill the button */
    width: 100%; /* Ensure it fills the button */
    height: 100%; /* Ensure it fills the button */
    line-height: 1.5; /* Center text vertically */
}

.button a:visited {
    color: #e4312b;
    /* Color after the link has been visited */
}

.button a:hover {
    color: #e4312b;
    /* Color when the mouse is over the link */
}

.button a:active {
    color: #e4312b;
    /* Color when the link is clicked */
}

/* ----------------------------------------------------------- Button ---------------------------------------------------------- */

/* ----------------------------------------------------------- Posts ----------------------------------------------------------- */

.image_post {
    width: 100%;
    max-width: 500px;
    box-shadow: 0 10px 10px 0 rgba(0,0,0,0.5);
}

p img {
    display: block;
    /* Makes the image a block element */
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    /* Center the image if desired */
    box-shadow: 0 10px 10px 0 rgba(0,0,0,0.5);
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.event {
    overflow: hidden;
    text-align: center;
    padding: 10px;
}

.event img {
    width: 100%;
    height: auto;
    box-shadow: 0 10px 10px 0 rgba(0,0,0,0.5);
}

.article {
    overflow: hidden;
    text-align: center;
    padding: 10px;
}

.article img {
    width: 100%;
    height: auto;
    box-shadow: 0 10px 10px 0 rgba(0,0,0,0.5);
}

.news {
    overflow: hidden;
    text-align: center;
}
.news img {
    width: 100%;
    height: auto;
}

.news h4 {
    margin-top: 0; /* Remove top margin */
    margin-bottom: 5px; /* Adjust this value as needed */
}

.news p {
    margin-top: 0; /* Remove top margin */
    margin-bottom: 30px;
}

/* ----------------------------------------------------------- Posts ----------------------------------------------------------- */

/* ---------------------------------------------------------- Columns ---------------------------------------------------------- */

.container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
}

.column {
    width: 49%;
}

@media screen and (max-width: 990px) {
    .container {
        flex-direction: column; /* Change to column layout */
        align-items: stretch; /* Ensure columns take full width */
    }

    .column {
        width: 100%; /* Make each column take full width */
    }
}

/* ---------------------------------------------------------- Columns ---------------------------------------------------------- */


/* ---------------------------------------------------------- Top Nav ---------------------------------------------------------- */

/* Add a black background color to the top navigation */
.topnav {
    justify-content: space-between; /* Distribute space evenly between items */
    align-items: center; /* Center items vertically */
    background-color: #149954;
    overflow: hidden;
    top: 0; /* Position it at the top of the viewport */
    left: 0; /* Align it to the left */
    right: 0; /* Align it to the right */
    margin: 0 auto; /* Center it horizontally */
    padding: 0; /* Remove padding */
    max-width: 990px; /* Set the maximum width */
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.35);
    position: fixed; /* Optional: if you want to control stacking context */
    z-index: 10; /* Ensure it is above the narrow section */
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 21px;
    font-weight: 700; /* Bold weight */
}

/* Change the color of links on hover */
.topnav a:hover:not(:first-child) {
    background-color: white;
    color: #e4312b;
    box-shadow: 0 5px 10px 0 rgba(0,0,0,0.5);
}

/* Add an active class to highlight the current page */
.topnav a.active {
    background-color: #149954;
    color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* Remove space around the logo */
.topnav .logo img {
    display: block; /* Ensures no extra space below the image */
    height:50px
}

.topnav .logo {
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin if any */
    display: block; /* Ensure it behaves as a block element */
}


/* When the screen is less than 600 pixels wide, 
hide all links, except for the first one ("Home"). 
Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 990px) {
    .topnav a:not(:first-child) {
        display: none;
    }

    .topnav a.icon {
        float: right;
        display: block;
    }

    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: center;
    }
}

/* ---------------------------------------------------------- Top Nav --------------------------------------------------------- */