/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
}



header {
    background-color: #FFB6C1;
    color: white;
    padding: 20px;
    text-align: center;
}

nav {
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    background-color: #FFC0CB;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
    display: block;
    transition: background 0.3s;
}

nav ul li a:hover {
    background-color: #E75480;
    border-radius: 5px;
}

/* Sticky nav */
nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #FFC0CB;
}

/* Container for flex and hamburger */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Hamburger icon */
.hamburger {
    display: none;
    font-size: 28px;
    cursor: pointer;
    color: white;
}

/* Hide the checkbox */
.nav-toggle {
    display: none;
}

/* Nav links */
.nav-links {
    list-style-type: none;
    display: flex;
    gap: 15px;
    margin: 0;
    padding: 0;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
    display: block;
    border-radius: 5px;
    transition: background 0.3s;
}

.nav-links li a:hover {
    background-color: #E75480;
}

/* Mobile styles */
@media screen and (max-width: 768px) {
    .hamburger {
        display: block;
    }

    .nav-links {
        flex-direction: column;
        width: 100%;
        display: none; /* hidden by default */
        background-color: #FFC0CB;
        margin-top: 5px;
    }

    .nav-links li {
        margin: 10px 0;
        text-align: center;
    }

    /* Show nav-links when checkbox is checked */
    .nav-toggle:checked + .hamburger + .nav-links {
        display: flex;
    }
}

main {
    padding: 20px;
    text-align: center;
}

footer {
    background-color: #FFB6C1;
    color: rgb(206, 20, 196);
    text-align: center;
    padding: 10px;
}

.responsive-img {
    width: 50%;
    height: auto;
    max-width: 600px;
}

@media screen and (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }

    nav ul li {
        margin: 10px 0;
    }

    nav ul li a {
        font-size: 16px;
    }

    main p {
        font-size: 16px;
    }
}


.parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 8px;
}



/* Individual colors */
.div1 {
    background: #FF1493;grid-row: span 100 / span 100/*  */
    ;border-radius: 20px
}

.div2 {
    background: #FFE6EE; grid-column: span 3 / span 3;
    grid-row: span 3 / span 20; border-radius: 20px/* */
}

.div3 {
    background: #FF1493; grid-row: span 100 / span 100;
    grid-column-start: 5; border-radius: 20px /*  */
}

.div4 {
    background: #FFE6EE; grid-column: span 3 / span 3;
    grid-row: span 50 / span 50;
    grid-column-start: 2;
    grid-row-start: 4; border-radius: 20px/*  */
}
        
.div5 {
    background: #FF1493;grid-row: span 100 / span 100 /*  */
}

.div6 {
    background: #FFE6EE; grid-column: span 3 / span 3;
    grid-row: span 3 / span 3; /* */
}

.div7 {
    background: #FF1493; grid-row: span 100 / span 100;
    grid-column-start: 5; /*  */
}

.div8 {
    background: #FFE6EE; grid-column: span 3 / span 3;
    grid-row: span 50 / span 50;
    grid-column-start: 2;
    grid-row-start: 4; /*  */
}

body::-webkit-scrollbar {
  display: none; /* Hide scrollbar */
}