@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');

/* General styles */
body {
    margin: 0;
    font-family: 'Raleway', sans-serif;
    color: #fff;
    background-color: #87CEEB; /* Slightly darker blue background color */
}

/* Header styles */
header {
    background: linear-gradient(180deg, #FFC0CB, #FF0000);
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    flex-wrap: wrap;
}

.logo {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
    color: white;
    font-family: 'Bona Nova SC', serif;
}

.logo img {
    margin-right: 15px;
    height: 80px;
}

.logo span {
    font-size: 3vw;
    color: transparent;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 
                 4px 4px 8px rgba(0, 0, 0, 0.4), 
                 6px 6px 12px rgba(0, 0, 0, 0.3), 
                 8px 8px 16px rgba(0, 0, 0, 0.2), 
                 10px 10px 20px rgba(0, 0, 0, 0.1), 
                 12px 12px 24px rgba(0, 0, 0, 0.1), 
                 14px 14px 28px rgba(0, 0, 0, 0.1), 
                 16px 16px 32px rgba(0, 0, 0, 0.1), 
                 18px 18px 36px rgba(0, 0, 0, 0.1), 
                 20px 20px 40px rgba(0, 0, 0, 0.1); /* Add more shadow */
    letter-spacing: 2px;
    opacity: 0;
    transform: scale(0.8);
}

/* Navigation styles */
nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-weight: 400;
    font-family: 'Garamond', serif;
    font-size: 1.2rem;
}

nav a:hover {
    text-shadow: 0 0 10px rgba(153, 6, 244, 1);
    color: #9906f4;
}

/* Active link styles */
nav a.active {
    color: #ff69b4; /* Pink color for active link */
    text-shadow: 0 0 10px rgba(255, 105, 180, 1);
}

/* Hamburger menu styles */
.hamburger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.hamburger-menu span {
    height: 3px;
    width: 25px;
    background: white;
    margin: 4px 0;
    transition: 0.4s;
}

/* Gallery styles */
.gallery {
    padding: 40px 20px;
    text-align: center;
}

.gallery h1, .book-fair h1 {
    font-size: 10vw;
    color: aliceblue;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), 4px 4px 8px rgba(0, 0, 0, 0.3), 6px 6px 12px rgba(0, 0, 0, 0.2);
}

.gallery h3, .book-fair h3 {
    font-size: 5vw;
    color: rgb(210, 233, 255);
    text-shadow: 2px 2px 50px rgba(0, 0, 0, 0.5), 4px 4px 8px rgba(0, 0, 0, 0.3), 6px 6px 12px rgba(0, 0, 0, 0.2);
}

/* Book Fair styles */
.book-fair {
    padding: 40px 20px;
    text-align: center;
}

.book-fair-content {
    margin-top: 30px;
}

.gallery-grid {
    display: grid;
    gap: 20px;
}

.gallery-grid img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.gallery-grid img:hover {
    transform: scale(1.05);
}

/* Footer styles */
footer {
    background: linear-gradient(180deg, #FFC0CB, #FF0000); /* Same color as header */
    padding: 20px;
    text-align: center;
    color: white;
    font-family: 'Garamond', serif;
}

/* Responsive styles */
@media (min-width: 1025px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columns for large screens */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for medium screens */
    }
}

@media (max-width: 768px) {
    .hamburger-menu {
        display: flex;
    }

    nav {
        display: none;
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    nav.open {
        display: flex;
    }

    nav a {
        padding: 10px;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
    }

    nav a:first-child {
        border-top: none;
    }

    nav a:last-child {
        border-bottom: none;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 7px;/* 2 columns for small screens */
    }
    .gallery-grid img{
        border-radius: 5px;
    }
}