/* Universal Fonts and Colors */
html, body { 
    font-family: "Poppins", sans-serif;
    padding: 0;
    margin: 0;
}

h1, h2, h2, h3, h4, h5 { 
    color: #ff66cc; 
}

/* Navigation */
nav { 
    display: flex; 
    justify-content: space-between; 
    padding: 80px 25px 0 25px; /* Top Right Bottom Left */
}

.nav-menu { 
    display: flex; 
}

li { margin: 0px 15px;
    list-style-type: none; 
}

.nav-menu li a, .footer-menu li a { 
    text-decoration: none; 
    color: #ff66cc;
}

.menu li a:hover, .footer-menu li a:hover { 
    text-decoration: underline;
    color: #ff0000; 
}

/* Gallery */
.gallery {
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap; /* Wrap content into multiple lines, from top to bottom */
    gap: 10px; 
    justify-content: center; 
}

.thumbnail {
    width: 24%; /* 25% makes it a 3-column grid */
    position: relative;
    overflow: hidden; /* Ensure the image doesn't overflow its container */
}

.gallery img {
    width: 100%;
    height: 80%; /* 100% will make the images appear as a square */
    display: block;
}

.thumbnail p { 
    font-size: 10pt;
}

/* Footer */
footer { 
    display: flex; 
    justify-content: space-between; 
    padding: 0 25px 80px 25px; /* Top Right Bottom Left */
}

/* Media Query: 768px */
@media (max-width: 768px) {
    .thumbnail {
        width: 48%; /* Turning the grid into 2 columns */
    }
}