body {
    background: linear-gradient(to bottom, #8C7161 0%, #F2EDDC 40%, #91C4D9 100%);
    margin: 0;
    padding: 0;
}

.special-elite-regular {
    font-family: "Special Elite", system-ui, serif;
    font-weight: 500;
    font-style: normal;
  }

  
.roboto-mono-regular {
    font-family: "Roboto Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }

  
p,li {
    font-family: "Roboto Mono";
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
}

  h1,h2 {
    font-family: 'Special Elite', system-ui;
    font-weight: 600;
    font-style: normal;
  }


.container {
    display: grid;
    grid-template-areas:
        "banner"
        "title"
        "photos"
        "video"
        "explain"
        "list"
        "footer";
    grid-gap: 2em;
    padding: 10px;
    box-sizing: border-box;
}

.imgbanner {
    grid-area: banner;
    display: flex;
    justify-content: center;
    max-width: 100%;
}


.banner1 {
    position: relative;
    top: 20px;
    left: 80px;
    z-index: 4;
}

.banner2 {
    position: relative;
    bottom: 30px;
    z-index: 3;
}

.banner3 {
    position: relative;
    top: 20px;
    right: 20px;
    z-index: 2;
}

.banner4 {
    position: relative;
    bottom: 20px;
    right: 160px;
    z-index: 1;
}


.title {
    grid-area: title;
    text-align: center;
    font-size: 40px;
    padding: 20px;
}

h2 {
    font-size: 25px;
    padding-bottom: 15px;

}

p {
    margin-bottom:20px;
}

.imgtower {
    grid-area: photos;
    display: flex;
    justify-content: space-around ;
    flex-wrap: wrap;
}

img {
   width: 45%;
   height: auto;
}

.explain {
    grid-area: explain;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    font-size: 20px;
       
}

.video {
    grid-area: video;
    display: flex;
    justify-content: center;
}

iframe {  
    width: 100%; 
    height: 350px; 
    max-width: 600px;
}

.list {
    grid-area: list;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    font-size: 20px;
    
    
}

ul {
    list-style: none;   
}

a {
    color: #f1f1f1;
    background-color: black;
    text-decoration: none;
    
}

a:hover {
    background-color:#593A28;
    color: #f1f1f1;
}

.footer {
    grid-area: footer;
    text-align: center;
    background-color: #8C7161;
    color: #f1f1f1;
    padding: 10px;
}

.foottext {
    font-size: 15px;
    padding: 10px;
}

h1 {
    color:#260202 ;
}


@media screen and (min-width: 1024px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "banner banner"
            "title title"
            "photos explain"
            "photos explain"
            "video list"
            "footer footer";
    }

    img{
        width: 45%;
        height: fit-content;
        justify-content: space-around;
    }

    .explain, .list {
        width: 80%;
        padding-left: 80px;
        padding-right: 80px;
        padding-bottom: 20px;  
    }

    iframe {
    
        width: 100%; 
        height: 600px; 
        max-width: 900px;
    }

    .title {
        grid-area: title;
        text-align: center;
        font-size: 50px;
    }

    .banner1 {
        position: relative;
        top: 20px;
        left: 40px;
        z-index: 4;
    }
    
    .banner2 {
        position: relative;
        bottom: 30px;
        z-index: 3;
    }
    
    .banner3 {
        position: relative;
        top: 20px;
        right: 40px;
        z-index: 2;
    }
    
    .banner4 {
        position: relative;
        bottom: 30px;
        right: 80px;
        z-index: 1;
    }

    .picture1 {
        position: relative;
        top: 120px;
        z-index: 1;
        width: 50%;
        right: 60px;
         
    }
    
    .picture2 {
        position: relative;
        z-index: 2;
        bottom: 80px;
        width: 60%;
        left: 180px;
    }

    .title {
        grid-area: title;
        text-align: center;
        font-size: 60px;
        padding: 30px;
    }

    h2 {
        font-size: 30px;
        padding-bottom: 15px;
    }
    
    p {
        font-size: 20px;
    }
   
}