/* CSS for Cool Pics Gallery */
/*
    This CSS file styles the Cool Pics Gallery webpage, ensuring a responsive design that adapts to different screen sizes. 
    It includes base styles for the body, header, navigation, gallery layout, and footer. 
    Media queries are used to adjust the layout for tablet and desktop views.
*/
/* base styles */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #CCCCCC; /* Light grey background from the example */
    text-align: center;
}

header {
    background-color: #2981E2;/* Blue header from the example */
    color: white;
    padding: 15px 0;
}

/* Navigation Styles */
nav {
    display: none; /* Hidden by default on mobile */
    background-color: #2981E2;/* Same blue as header for consistency */
}

nav a {
    color: white;
    text-decoration: none;
    padding: 10px;
}

nav ul {
    display: flex;
    flex-direction: row;
    gap: 20px;
    list-style-type: none;
}

/* Gallery Layout  */
.gallery {
    display: grid;
    grid-template-columns: 1fr; /* 1 Column (Mobile) */
    gap: 20px;
    padding: 20px;
    justify-items: center;
}

.gallery img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    border: 5px solid white;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
    box-sizing: border-box; /* Ensures border doesn't add to the width */
}

footer {
    background-color: #2981E2; /* Same blue as header for consistency */
    color: white;
    padding: 10px;
    margin-top: 20px;
}


/*  Tablet View */
@media (min-width: 700px) {
    .gallery {
        grid-template-columns: 1fr 1fr; /* 2 Columns */
        justify-content: space-around;
        gap: 30px 80px;
    }

}

/*  Desktop View   */
@media (min-width: 1000px) {

    .menu-label { 
        display: none; 
    }
    nav {
        display: flex; /* Show nav on desktop */
        justify-content: space-around;
        gap: 20px;
    }
    nav ul {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .gallery {
        grid-template-columns: 1fr 1fr 1fr; /* 3 Columns */
        max-width: 1000px;
        margin: 0 auto;
        justify-content: space-around;
        gap: 30px 50px;
    }
}