/* General Styles */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
    display: flex;
    flex-direction: column; /* Arrange content vertically */
    min-height: 100vh; /* Ensure the body takes up at least the full height of the viewport */
}

html, body {
    height: 100%; /* Ensure the body takes up the full height of the viewport */
    margin: 0; /* Remove default margin */
}

header {
    background-color: #8CC84B;
    padding: 20px;
    text-align: center;
    color: white;
}

nav {
    background-color: #4B823A;
    padding: 10px;
    text-align: center; /* Center text (and inline elements) */
}

/* Style for horizontal list without bullets */
.horizontal-list {
    list-style-type: none; /* Remove bullets */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    display: flex; /* Align items horizontally */
    justify-content: center; /* Center list items horizontally */
    flex-wrap: wrap; /* Allow items to wrap to the next line if necessary */
}

    .horizontal-list li {
        margin-right: 15px; /* Space between list items */
    }

        .horizontal-list li:last-child {
            margin-right: 0; /* Remove margin from the last item */
        }

a {
    text-decoration: none;
    color: white;
    font-weight: bold;
}

/* Hover and Click Effects */
.horizontal-list a {
    padding: 10px;
    transition: background-color 0.3s, color 0.3s;
}

    .horizontal-list a:hover {
        background-color: #6B9C3D;
    }

    .horizontal-list a:active {
        background-color: #4A7F2D;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    }

main {
    flex: 1; /* This makes sure the main content area grows to fill available space */
    padding: 20px;
}

#hero {
    background-image: url('placeholder-hero.jpg'); /* Replace with your hero image URL */
    background-size: cover;
    color: white;
    padding: 40px;
    text-align: center;
}

footer {
    background-color: #4B823A;
    color: white;
    text-align: center;
    padding: 10px;
    width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .horizontal-list {
        flex-direction: column; /* Stack items vertically on smaller screens */
        align-items: center; /* Center items horizontally */
    }

        .horizontal-list li {
            margin-right: 0; /* Remove margin for vertical stacking */
            margin-bottom: 10px; /* Space between list items */
        }

            .horizontal-list li:last-child {
                margin-bottom: 0; /* Remove margin from the last item */
            }
}