body {
    font: 15px/1.3 'Courier New', Courier, monospace;
    padding: 0;
    margin: 0;
}

/* Global Container */
.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

/* Header */
header {
    width: 100%;
    height: 45px;
    padding: 20px;
    margin: 45px 0px 25px 0px;
    background: magenta;
    position: relative;
}

header h1 {
    margin: 5px 50px 0px 50px;
    color: #FFFFFF;
    float: left;
}

header a {
    color: #000000;
    text-decoration: none;
}

header a:hover {
    color: #FFFFFF;
}

header h2 {
    margin: 10px 150px 0px 0px;
    color: #FFFFFF;
    float: right;
}

/* Navigation Styling */
nav {
    font: 15px/1.8 'Courier New', Courier, monospace;
    float: left;
    border: #000000 3px solid;
    margin: 20px;
    padding: 20px 60px;
    color: black;
    background-color: magenta;
}

nav:hover {
    background-color: white;
    color: black;
}

nav a {
    font: 35px/1.8 'Courier New', Courier, monospace;
    color: #000000;
    text-decoration: none;
}

nav a:hover {
    color: white;
    background-color: magenta;
}

/* Masonry Layout for Gallery */
.gallery {
    column-count: 4; /* Number of columns */
    column-gap: 16px; /* Space between images */
    padding: 10px;
    margin: 0 auto;
}

@media (max-width: 1200px) {
    .gallery {
        column-count: 2; /* Fewer columns for smaller screens */
    }
}

@media (max-width: 768px) {
    .gallery {
        column-count: 1; /* One column for very small screens */
    }
}

/* Image Container Styling */
.img-container {
    margin-bottom: 16px;
    break-inside: avoid; /* Prevent images from breaking across columns */
    overflow: hidden;
}

/* Image Size and Styling */
.img-container img {
    width: 100%; /* Make image fill container */
    height: auto; /* Maintain aspect ratio */
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* Hover Effect for Images */
.img-container:hover img {
    filter: grayscale(100%);
    transform: scale(1.05); /* Slight zoom-in effect on hover */
}

/* Article Styling */
article {
    color: #3b3b3b;
    margin: 0 auto;
    width: 28em;
}

article h1 {
    color: #494949a6;
}

/* Centering Images */
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Adding Margin to Div */
div {
    padding: 20px;
    margin: 4px;
    background-blend-mode: multiply;
}

/* Remove border around anchor tags */
.gallery a {
    border: none; /* Remove border around anchor tags */
}

/* Apply grayscale to all images by default
.gallery .img-container img {
    width: 100%;
    transition: filter 0.3s ease; /* Smooth transition for grayscale 
    filter: grayscale(100%);*/

/* When hovering over an image, only that one remains in color */
.gallery .img-container:hover img {
    filter: grayscale(0%);
}

/* Apply grayscale to all sibling images when hovering on one */
.gallery .img-container:hover ~ .img-container img {
    filter: grayscale(100%); /* Make all siblings grayscale */
}

/* Make sure other images are grayscale when hovering over one */
.gallery .img-container:not(:hover) img {
    filter: grayscale(100%);
}