header {
    background-color: #cd9083;
    color: #819044;             
    padding: 10px;           
    text-align: center;       
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

header img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


#NAVMENU {
    display: flex;
    justify-content: space-around;
    background-color: #71892f;

    text-decoration: none;
    color: black;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

#NAVMENU a {
    border: 5px solid black;
}
#NAVMENU a:hover {
    background-color: #586b1f; /* Darker green on hover */
}

#Hamburger {
    display: none;
    cursor: pointer;
    font-size: 24px;
    background-color: #71892f;
}

@media screen and (max-width: 600px){
    
    #NAVMENU {
        display: none; /* Hide menu by default */
        flex-direction: column; /* Stack links vertically */
        align-items: center; /* Center-align links */
        background-color: #71892f; /* Menu background color */
        padding: 10px;
        position: absolute; /* Position over content */
        top: 50px; /* Adjust to appear below header */
        width: 100%; /* Full-width menu */
        z-index: 1000; /* Ensure it appears on top */
    }

    #NAVMENU a {
        padding: 15px; /* Larger padding for touchscreens */
        width: 100%; /* Full-width links */
        text-align: center; /* Center-align text */
        border-bottom: 1px solid #586b1f; /* Add a border between links */
    }

    #NAVMENU.active {
        display: flex;
    }

    #Hamburger {
        display: block; /* Show hamburger icon on small screens */
    }
}


.Class-1 {
    background-color: gainsboro;
    border: 5px solid purple;
    color: black;
    white-space: pre-wrap;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    width: 50%;
    text-align: center;
    margin: 0 auto
}

#theTable {
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: center;
    
    font-family: Georgia, 'Times New Roman', Times, serif;
}

table {
    border-collapse: collapse;
    width: 50%;
    margin: 0 auto;
    align-items: center;
    background-color: #819044;
}
th, td {
    border: 2px solid black;
    width: 100px
}

.Class-2 {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
    margin: 15px auto;

    font-family: Georgia, 'Times New Roman', Times, serif;
    color: brown;
    border: 5px solid purple;

    background-color: #cd9083;

}

.Class-3 {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50%;
    margin: 15px auto;

    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: black;
    
    border: 5px solid purple;
    background-image: linear-gradient(to bottom right, purple, blue, purple);

    box-shadow: black;
}

#monkey {
    position: fixed;
}

#CountrySearch {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 15px auto;
    width: 50%;

    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: black;
    border: 5px solid purple;
    background-image: radial-gradient(red, blue, white);
}

#Page2body {

    background-color: #FFF7EE;
    background-image: none;
    color: #2E4057;
    
    text-align: center;

    margin: 15px auto;

}

body {
    background-image: url('https://img.freepik.com/free-photo/abstract-uv-ultraviolet-light-composition_23-2149243965.jpg?ga=GA1.1.815353807.1736965467&semt=ais_tags_boosted');
    background-size: cover;
    background-repeat: repeat;
    background-position: center;
    color: #b31414;
    justify-content: center; /* Center horizontally */
    font-family: Arial, sans-serif;
    position: relative; /* Establish a positioning context for the pseudo-element */
    z-index: 0; /* Ensure body content stays above the pseudo-element */
}

body::before {
    content: ''; /* Creates a pseudo-element */
    position: absolute; /* Position it relative to the body */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% transparency */
    z-index: -1; /* Place it behind the body content */
    pointer-events: none; /* Ensure it doesn't block interactions */
}

footer {
    
    display: flex;
    align-items: center;
    justify-content: center;

    font-weight: bolder;
}