* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    font-family: "montserrat";
}

html,
body {
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0);


}

#main {
    width: 100%;
    height: 100%;

}

#page1 {
    width: 100%;
    height: 65vh;
    background-color: black;
    position: relative;

}


#nav {
    width: 100%;
    height: 10%;
    background-color: #00000037;
    z-index: 4;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1vw 2vw;
}

#nav h1 {
    width: 20%;
    color: wheat;
    font-family: "anurati";
}

#nav #nav-list {
    width: 80%;
    height: fit-content;
    /* background-color: #fff; */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4vw;
    
}

#nav-list a {
    color: white;

}

#page1 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

}

 #video{
    position: relative;
}

 #button{
    position: absolute;
    top: 90%;
    left: 90%;
}  

#button i{
    font-size: 1vw;
   background-color: #83040400;
}

#page1-hero {
    width: 350px;
    height: 200px;
    color: #ffffff;
    /* background-color: #fff; */
    /* border: 1px solid whitesmoke; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    left: 50;
    margin-bottom: 3vw;
    margin-left: 15vw;
    padding: 0.5vw;

}
#page1-hero #category{
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #fff; */
    width: 100%;
    height: 90%;
    font-size: 0.6vw;
}

#title{
    display: flex;
    align-items: start;
    justify-content: flex-start;
    width: 100%;
    height: 10%;
    font-size: 0.9vw;
    /* font-family: "Noto Serif JP", serif; */

}



#page2{
    margin-top: 2vw;
    width: 100%;
    min-height: 90vh;
    /* background-color: rgb(116, 101, 101); */
}
#page2 #page2-quote{
    width: 100%;
    height: 15vh;
    color: aliceblue;
    background-color: rgba(14, 14, 14, 0.475);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.3vw;
    border-bottom: 1px solid rgba(65, 65, 65, 0.499);
    /* margin: 2vh; */
    padding-bottom: 1.2vw;
}

#page2-quote h3{
    font-size: 1.5vw;
    font-family: "NerkoOne";
    font-style: italic;
}

#pag2-hero{
    width: 100%;
    height: 85vh;
}
#pg2-top{
    width: 100%;
    height: 45vh;
    /* background-color: #fff; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2vw;
}


#pg2-btm{
    width: 100%;
    height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: "Battambang", system-ui;
    font-size: 3vw;

    /* background-image: url(https://4kwallpapers.com/images/walls/thumbs_2t/7483.jpg); */
    /* background-size: cover; */
    /* background-position: center; */
    /* background-color: #ae9191; */

}

#pg2-top-left{
    width: 40%;
    height: 80%;
    /* background-color: #cf3131; */
    background-color: #830404;
    background-image: url(https://i.pinimg.com/564x/43/b0/1a/43b01a09f5a20e82636143f228d8f031.jpg);
    background-size: cover;
    background-position: center;

}

#pg2-top-right{
    width: 40%;
    height: 80%;
    background-color: #830404;
    background-image: url(https://i.pinimg.com/564x/c2/13/02/c21302388125314d765cdd3933971040.jpg);
    background-size: cover;
}


#page3{
    width: 100%;
   min-height: 100vh;
    /* background-color: #fff; */

}

#page3-title{
    width: 100%;
    height: 10%;
display: flex;
align-items: end;
justify-content: center;
color: #830404;
}

#page3-title h3{
    font-size: 2vw;
}


#page3 #page3-hero{
    width: 100%;
    min-height: 90%;
    background-color: black;
    display: flex;
align-items: center;
justify-content: center;
}

#page3 #pg3-movie-list{
width: 80%;
min-height: fit-content;
/* background-color: #fff; */
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 1.5vw;
padding: 4vw 4vw;
}

#pg3-movie-list .movie-poster{
    width: 220px;
    height: 300px;
    background-color: blue;
    /* background-image: url(https://i.pinimg.com/736x/67/2e/52/672e5200760c26de98a2e8d2007c8bb4.jpg); */
    background-position: center;
    background-size: cover;
    position: relative;
    /* padding: 1vw; */
}
.movie-poster img{
    width: 100%;
    height: 100%;
}

.movie-post-ovwrlay{
    width: 100%;
    height: 100%;
    background-color: #4b484848;
    position: absolute;
    top: 0;
}

.movie-poster .movie-txt{
    width: 100%;
    height: 20%;
    /* background-color: #830404; */
    position: absolute;
    bottom: 0%;
    background-color: #20202044;

}

.movie-txt .movie-txt-top{
    width: 100%;
    height: 50%;
    padding: 0 1vw;
    display: flex;
    align-items: end;
    justify-content: space-between;
}
.movie-txt-top h2 {
    font-size: 0.9vw;
    color: aliceblue;
}

.movie-txt-top i{
    font-size: 0.7vw;
    color: rgb(249, 235, 192);
}

.movie-txt .movie-txt-btm{
    width: 100%;
    height: 50%;
    /* background-color: #c03e3e; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1vw;
    
}

.movie-txt-btm h5,h6{
    font-size: 0.5vw;
    color: rgb(241, 123, 94);
}


#page4{
    margin-top: 2vw;
    width: 100%;
    height: 100Vh;
}

#page4 #page4-top{
    width: 100%;
    height: 80%;
}

#page4-top img{
    width: 100%;
    height: 100%;
    object-fit:cover;
    object-position:top;

}

#page4 #page4-btm{
    width: 100%;
    height: 20%;
    /* background-color: #fff; */
    display: flex;
    padding: 2vw;
    color: aliceblue;
    font-size: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
}




@media (max-width:768px){
    #page1 {
        width: 100%;
        height: 65vh;
        background-color: black;
        position: relative;
    
    }
    
    
    #nav {
        width: 100%;
        height: 10%;
        background-color: #00000037;
        z-index: 4;
        position: absolute;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1vw 2vw;
    }
    
    #nav h1 {
        width: 30%;
        color: wheat;
        font-size: 3.5vw;
        font-family: "anurati";
    }
    
    #nav #nav-list {
        width: 80%;
        height: fit-content;
        /* background-color: #fff; */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4vw;
        
    }
    
    #nav-list a {

        font-size:2.2vw;
        color: white;
    
    }
    
    #page1 video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    
    }
    
     #video{
        position: relative;
    }
    
     #button{
        position: absolute;
        top: 90%;
        left: 90%;
    }  
    
    #button i{
        font-size: 1vw;
       background-color: #83040400;
    }
    
    #page1-hero {
        width: 250px;
        height: 150px;
        color: #ffffff;
        /* background-color: #b60000; */
        /* border: 1px solid whitesmoke; */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        bottom: 10%;
        left: 50;
        margin-bottom: 3vw;
        margin-left: 15vw;
        padding: 0.5vw;
    
    }
    #page1-hero #category{
        display: flex;
        align-items: start;
        justify-content: center;
        /* background-color: #f5e615; */
        width: 100%;
        height: 60%;
        font-size: 1vw;
    }
    
    #title{
        display: flex;
        align-items: end;
        justify-content: flex-start;
        width: 100%;
        height: 40%;
        font-size: 1.5vw;
        /* background-color: #f02df0; */

        /* font-family: "Noto Serif JP", serif; */
    
    }
    
    
    #page2{
        margin-top: 2vw;
        width: 100%;
        min-height: 90vh;
        /* background-color: rgb(116, 101, 101); */
    }
    #page2 #page2-quote{
        width: 100%;
        height: 15vh;
        color: aliceblue;
        background-color: rgba(14, 14, 14, 0.475);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 0.3vw;
        border-bottom: 1px solid rgba(65, 65, 65, 0.499);
        /* margin: 2vh; */
        padding-bottom: 1.2vw;
    }
    
    #page2-quote h3{
        font-size: 4vw;
        font-family: "NerkoOne";
        font-style: italic;
    }
    
    #pag2-hero{
        width: 100%;
        min-height: 85vh;
    }
    #pg2-top{
        width: 100%;
        min-height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 2vw;
        padding: 2vw;
    }
    
    
    #pg2-btm{
        width: 100%;
        height:20%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-family: "Battambang", system-ui;
        font-size: 4vw;
    
        /* background-image: url(https://4kwallpapers.com/images/walls/thumbs_2t/7483.jpg); */
        /* background-size: cover; */
        /* background-position: center; */
        /* background-color: #ae9191; */
    
    }
    
    #pg2-top-left{
        width: 100%;
        height: 50%;
        /* background-color: #cf3131; */
        background-color: #830404;
        background-image: url(https://i.pinimg.com/564x/43/b0/1a/43b01a09f5a20e82636143f228d8f031.jpg);
        background-size: cover;
    
    }
    
    #pg2-top-right{
        width: 100%;
        height: 40%;
        background-color: #830404;
        background-image: url(https://i.pinimg.com/564x/c2/13/02/c21302388125314d765cdd3933971040.jpg);
        background-size: cover;
    }
    
    
    #page3{
        width: 100%;
       min-height: 100vh;
        /* background-color: #fff; */
    
    }
    
    #page3-title{
        width: 100%;
        height: 10%;
    display: flex;
    align-items: end;
    justify-content: center;
    color: #830404;
    }
    
    #page3-title h3{
        font-size: 5vw;
    }
    
    
    #page3 #page3-hero{
        width: 100%;
        min-height: 90%;
        background-color: black;
        display: flex;
    align-items: center;
    justify-content: center;
    }
    
    #page3 #pg3-movie-list{
    width: 80%;
    min-height: fit-content;
    /* background-color: #fff; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5vw;
    padding: 4vw 4vw;
    }
    
    #pg3-movie-list .movie-poster{
        width: 130px;
        height: 200px;
        background-color: blue;
        /* background-image: url(https://i.pinimg.com/736x/67/2e/52/672e5200760c26de98a2e8d2007c8bb4.jpg); */
        background-position: center;
        background-size: cover;
        position: relative;
        /* padding: 1vw; */
    }
    .movie-poster img{
        width: 100%;
        height: 100%;
    }
    
    .movie-post-ovwrlay{
        width: 100%;
        height: 100%;
        background-color: #4b484848;
        position: absolute;
        top: 0;
    }
    
    .movie-poster .movie-txt{
        width: 100%;
        height: 20%;
        /* background-color: #830404; */
        position: absolute;
        bottom: 0%;
        background-color: #20202044;
    
    }
    
    .movie-txt .movie-txt-top{
        width: 100%;
        height: 50%;
        padding: 0 1vw;
        display: flex;
        align-items: end;
        justify-content: space-between;
    }
    .movie-txt-top h2 {
        font-size: 3.5vw;
        color: aliceblue;
    }
    
    .movie-txt-top i{
        font-size: 3vw;
        color: rgb(249, 235, 192);
    }
    
    .movie-txt .movie-txt-btm{
        width: 100%;
        height: 50%;
        /* background-color: #c03e3e; */
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1vw;
        
    }
    
    .movie-txt-btm h5,h6{
        font-size: 1.5vw;
        color: rgb(241, 123, 94);
    }
    
    
    #page4{
        margin-top: 2vw;
        width: 100%;
        height: 40Vh;
    }
    
    #page4 #page4-top{
        width: 100%;
        height: 80%;
    }
    
    #page4-top img{
        width: 100%;
        height: 100%;
        object-fit:cover;
        object-position:top;
    
    }
    
    #page4 #page4-btm{
        width: 100%;
        height: 20%;
        /* background-color: #fff; */
        display: flex;
        padding: 2vw;
        color: aliceblue;
        font-size: 2vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
  }
    


@media only screen and (max-width: 425px) {
    #main {
        width: 100%;
        height: 100%;
    
    }
    
    #page1 {
        width: 100%;
        height: 65vh;
        background-color: black;
        position: relative;
        
    }
    
    #nav {
        width: 100%;
        height: 10%;
        background-color: #00000037;
        z-index: 4;
        position: absolute;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1vw 2vw;
    }
    
    #nav h1 {
        width: 20%;
        color: wheat;
        font-size: 4.5vw;
    }
    
    #nav #nav-list {
        width: 80%;
        height: fit-content;
        /* background-color: #fff; */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4vw;
    }
    
    #nav-list a {
        color: white;
        font-size: 3vw;
    }
    
    #page1 video {
        width: 100%;
        height: 100%;
    
    }
    
     /* #page1-hero {
        width: 300px;
        height: 100px;
        
        border: 1px solid #f5f5f5;
        position: absolute;
        bottom: 0;
        left: 50;
        margin-bottom: 3vw;
        margin-left: 15vw;
    }   */

    #page1-hero {
        width: 200px;
        height: 120px;
       top: 60%;
       left:2%;
        /* background-color: #fff; */
        /* border: 1px solid whitesmoke; */
       
       
        
    
    }
    #page1-hero #category{
        display: flex;
        align-items: center;
        justify-content: center;
        /* background-color: #fff; */
        width: 100%;
        height: 90%;
        font-size: 1.6vw;
    }
    
    #title{
        display: flex;
        align-items: start;
        /* justify-content: flex-start; */
        width: 100%;
        height: 10%;
        font-size: 1.9vw;
        /* font-family: "Noto Serif JP", serif; */
    
    }
    
    #page2{
        margin-top: 2vw;
        width: 100%;
        min-height: 90vh;
        /* background-color: rgb(116, 101, 101); */
    }
    #page2 #page2-quote{
        width: 100%;
        height: 15vh;
        color: aliceblue;
        background-color: rgba(14, 14, 14, 0.475);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 0.3vw;
        border-bottom: 1px solid rgba(65, 65, 65, 0.499);
        /* margin: 2vh; */
        padding-bottom: 1.2vw;
    }
    
    #page2-quote h3{
        font-size: 4vw;
        font-family: "NerkoOne";
        font-style: italic;
    }
    
    #pag2-hero{
        width: 100%;
        min-height: 85vh;
    }
    #pg2-top{
        width: 100%;
        min-height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 2vw;
        padding: 2vw;
    }
    
    
    #pg2-btm{
        width: 100%;
        height:20%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-family: "Battambang", system-ui;
        font-size: 4vw;
    
        /* background-image: url(https://4kwallpapers.com/images/walls/thumbs_2t/7483.jpg); */
        /* background-size: cover; */
        /* background-position: center; */
        /* background-color: #ae9191; */
    
    }
    
    #pg2-top-left{
        width: 100%;
        height: 50%;
        /* background-color: #cf3131; */
        background-color: #830404;
        background-image: url(https://i.pinimg.com/564x/43/b0/1a/43b01a09f5a20e82636143f228d8f031.jpg);
        background-size: cover;
    
    }
    
    #pg2-top-right{
        width: 100%;
        height: 40%;
        background-color: #830404;
        background-image: url(https://i.pinimg.com/564x/c2/13/02/c21302388125314d765cdd3933971040.jpg);
        background-size: cover;
    }
    
    
    #page3{
        width: 100%;
       min-height: 100vh;
        /* background-color: #fff; */
    
    }
    
    #page3-title{
        width: 100%;
        height: 10%;
    display: flex;
    align-items: end;
    justify-content: center;
    color: #830404;
    }
    
    #page3-title h3{
        font-size: 5vw;
    }
    
    
    #page3 #page3-hero{
        width: 100%;
        min-height: 90%;
        background-color: black;
        display: flex;
    align-items: center;
    justify-content: center;
    }
    
    #page3 #pg3-movie-list{
    width: 80%;
    min-height: fit-content;
    /* background-color: #fff; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5vw;
    padding: 4vw 4vw;
    }
    
    #pg3-movie-list .movie-poster{
        width: 130px;
        height: 200px;
        background-color: blue;
        /* background-image: url(https://i.pinimg.com/736x/67/2e/52/672e5200760c26de98a2e8d2007c8bb4.jpg); */
        background-position: center;
        background-size: cover;
        position: relative;
        /* padding: 1vw; */
    }
    .movie-poster img{
        width: 100%;
        height: 100%;
    }
    
    .movie-post-ovwrlay{
        width: 100%;
        height: 100%;
        background-color: #4b484848;
        position: absolute;
        top: 0;
    }
    
    .movie-poster .movie-txt{
        width: 100%;
        height: 20%;
        /* background-color: #830404; */
        position: absolute;
        bottom: 0%;
        background-color: #20202044;
    
    }
    
    .movie-txt .movie-txt-top{
        width: 100%;
        height: 50%;
        padding: 0 1vw;
        display: flex;
        align-items: end;
        justify-content: space-between;
    }
    .movie-txt-top h2 {
        font-size: 3.5vw;
        color: aliceblue;
    }
    
    .movie-txt-top i{
        font-size: 3vw;
        color: rgb(249, 235, 192);
    }
    
    .movie-txt .movie-txt-btm{
        width: 100%;
        height: 50%;
        /* background-color: #c03e3e; */
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 1vw;
        
    }
    
    .movie-txt-btm h5,h6{
        font-size: 1.5vw;
        color: rgb(241, 123, 94);
    }
    
    
    #page4{
        margin-top: 2vw;
        width: 100%;
        height: 40Vh;
    }
    
    #page4 #page4-top{
        width: 100%;
        height: 80%;
    }
    
    #page4-top img{
        width: 100%;
        height: 100%;
        object-fit:cover;
        object-position:top;
    
    }
    
    #page4 #page4-btm{
        width: 100%;
        height: 20%;
        /* background-color: #fff; */
        display: flex;
        padding: 2vw;
        color: aliceblue;
        font-size: 2vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
  }