.container{
    display:grid;
    height: 100vh;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(1, 3fr) repeat(11, 50fr);
    grid-template-areas: 
    "nav nav nav nav"
    "main main main main"
    "content1 content1 content1 content1"
    "content2 content2 content2 content2"
    "content3 content3 content3 content3"
    "content4 content4 content4 content4"
    "content5 content5 content5 content5"
    "content5 content5 content5 content5"
    "content6 content6 content6 content6"
    "content7 content7 content7 content7"
    "content8 content8 content8 content8"
    "content9 content9 content9 content9"
    "content10 content10 content10 content10"
    "content11 content11 content11 content11"
    "footer footer footer footer";
    grid-gap: .5rem;
    
    ;
    
}

.slideshow-container {
    position: relative;
    max-width: 1200px;
    width: 100%;
    height: 600px;
    overflow: hidden;
    border: 2px solid #ddd;
    border-radius: 10px;
}

.slide {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    font-size: 24px;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
}

@keyframes fade {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

.slide:nth-child(1) { animation: fade 12s infinite; animation-delay: 0s; }
.slide:nth-child(2) { animation: fade 12s infinite; animation-delay: 4s; }
.slide:nth-child(3) { animation: fade 12s infinite; animation-delay: 8s; }

.border{
    background-color: black;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #333;
    padding: 10px 20px;
    color: white;
    position: relative;
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 50px; /* Adjust as needed */
    height: auto;
    margin-right: 10px;
}

.logo span {
    font-size: 24px;
    font-weight: bold;
}

.menu-icon {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.menu-icon .bar {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 3px 0;
    transition: 0.3s;
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.nav-links a:hover {
    text-decoration: underline;
}

/* Responsive styles */
@media (max-width: 768px) {
    .menu-icon {
        display: flex;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #333;
        position: absolute;
        top: 60px; /* Adjust based on your navbar height */
        left: 0;
        text-align: center;
    }

    .nav-links li {
        margin: 15px 0;
    }

    #menu-toggle:checked + .menu-icon + .nav-links {
        display: flex;
    }

    #menu-toggle:checked + .menu-icon .bar:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    #menu-toggle:checked + .menu-icon .bar:nth-child(2) {
        opacity: 0;
    }

    #menu-toggle:checked + .menu-icon .bar:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }
}

.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 50px; /* Adjust as needed */
    height: auto;
    margin-right: 10px;
}

.logo span {
    font-size: 24px;
    font-weight: bold;
}

.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.nav-links a:hover {
    text-decoration: underline;
}


main{
    background-color: rgb(255, 255, 255);
    grid-area: main;
}

.mario{
    width: 150px;
    position: relative;
}

.stars{
    width: 150px;
    position: relative;
}

.galaxy{
    width: 150px;
    position: relative;
}


#content1{
    background-color: rgb(255, 255, 255);
    grid-area: content1;
}

.why{
    width: 150px;
    position: relative;
}

#content2{
    background-color: rgb(255, 255, 255);
    grid-area: content2;
}

#content3{
    background-color: rgb(255, 255, 255);
    grid-area: content3;
}

#content4{
    background-color: rgb(255, 255, 255);
    grid-area: content4;
}

#content5{
    background-color: rgb(255, 255, 255);
    grid-area: content5;
}

#content6{
    background-color: rgb(255, 255, 255);
    grid-area: content6;
}

#content7{
    background-color: rgb(255, 255, 255);
    grid-area: content7;
}

#content8{
    background-color: rgb(255, 255, 255);
    grid-area: content8;
}

#content9{
    background-color: rgb(255, 255, 255);
    grid-area: content9;
}

#content10{
    background-color: rgb(255, 255, 255);
    grid-area: content10;
}

#content11{
    background-color: rgb(255, 255, 255);
    grid-area: content11;
}
footer{
    background-color: rgb(255, 255, 255);
    grid-area: footer;
}

@media only screen and (max-width:550px) {
    .container{
        grid-template-columns: 1fr;
        grid-template-rows:  0.4fr 20fr 20fr 20fr 20fr 20fr 20fr 20fr 20fr 20fr 20fr 20fr 0.4fr;
        grid-template-areas: 
        "nav"
        "main"
        "content1"
        "content2"
        "content3"
        "content4"
        "content5"
        "content6"
        "content7"
        "content8"
        "content9"
        "content10"
        "content11"
        "footer"

        ;
    }
}