header {
    border: 5px solid red;
    border-style: outset;
    margin: 10px 50px;
}
h1 {
    font-family: Impact;
    font-size: 40px;
    text-align: center;
    padding: 0 0;
}

.left-logo {
    width: 20%;
    display: inline-block;
    justify-content: center;
}
.left-logo a {
    font-size: 20px;
    /* align content center horizontally */
    justify-content: center;
}
.center-logo {
    width: 60%;
    display: inline-block;
}
.right-logo {
    width: 20%;
    display: inline-block;
}





main {
            padding: 0 calc(5vw); /* 5% view width padding */
            display: flex; /* Use flexbox for horizontal layout */
            justify-content: center;
            gap: 20px; /* Space between images */
            flex-wrap: wrap;
        }
        .image-container {
            display: flex;
            flex-direction: column; /* Stack image and text vertically */
            align-items: center; /* Center text below image */
            text-align: center; /* Center text within its container */
            position: relative; /* Needed for absolute positioning of the overlay */
        }
        .image-wrapper {
            cursor: pointer; /* Indicate that the container is clickable */
            position: relative; /* Needed for absolute positioning of the overlay within */
        }
        .image-container img {
            max-width: 200px; /* Adjust image size as needed */
            height: auto;
            display: block; /* Prevent extra space below inline elements */
        }
        .image-container p.image-title {
            max-width: 200px;
            margin-top: 10px; /* Space between image and text */
        }
        .description-overlay { /* CLICK ON IMAGE, SHOW TEXT*/
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black background */
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0; /* Initially hidden */
            transition: opacity 0.3s ease; /* Smooth fade-in/out */
            text-align: center;
            padding: 10px;
            box-sizing: border-box; /* Include padding in width and height */
        }
        .description-overlay p {
            max-width: 90%; /* Limit text width within the overlay */
        }
        .image-wrapper.active .description-overlay {
            opacity: 1; /* Show the overlay when the container is active */
        }



        .logo {
            border: 20px outset rgb(255, 65, 65);
        }
        .logo button { /* Button that sends you to chocolate milk rankings */
            position: absolute;
            top: 80px;
            left: 40px;
            font-size: larger;
            color: rgb(60, 60, 60);
            background-color: rgb(225, 167, 167);
            padding: 8px 8px;
        }
        h1 {
            font-family: Impact;
            font-size: 40px;
            text-align: center;
            padding: 0 0;
        }
        h2 {
            font-size: 25px;
            text-align: center;
        }
        h3 {
            font-size: 10px;
            text-align: center;
            padding: 0 0;
        }
        .subtitle {
            text-align: center;
        }
        a {
            color: blue;
            font-family: verdana;
        }
        a:hover {
            color: blueviolet;
            font-family: verdana;
        }
        button {
            font-size: larger;
            color: rgb(60, 60, 60);
        }
        button:disabled {
            color: rgb(180, 180, 180);
        }
        .hidden {
            display: none;
        }