@media(max-width: 415px){
    :root{
        width: 100%;
        --cardWidth: calc(100% - 20px);
        font-size: 16px;
    }
    .title{
        height: 6vh;
        padding: 0 1%;
     }
     #current{
         font-size: 1.1em;
     }
     #searchBox{
        /* width: 20%; */
        height: 70%;
     }
     #searchImg{
         /* width: 25%; */
         /* width: 100%; */
        }
     #searchBox input{
         font-size: 0.7em;
     }


    .nav li{
        font-size: 0.8em;
    }
    main{
        padding: 0px 0px;
    }

    .imageBanner{
        height: 20vh;
        padding: 0;
    }

    .hero{
        height: 20vh;
        width: 100%;
    }
    .hero div h1{
        font-size: 1.1em;
    }
    .hero div h3{
        /* border: 1px solid white; */
        font-size: 0.4em;
        margin-left: 1%;
    }
    .heroLeft{
        padding: 3% 1% 0% 2.5%;
    }
    .hero div p{
        margin-top: 1%;
        height: 50%;
        font-size: 0.6em;
        overflow-y:scroll;
        display: block;
    }
    .heroButtons{
        height: 20%;
        /* border: 1px solid white; */
    }
    .heroLeft button{
        width: 20%;
        height:15px;

        margin: 1% 2% 0 0;
        border: none;
        font-size: 0.4em;
    }
    
.seeMoreSeries button, .seeMoreMovies button{
    width: 45%;
    height: 30px;
}
    .mainbox{
        width: 100%;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 10px;
        row-gap: 15px;
        padding: 5px 20px;
        /* border: 1px white solid; */
    }
    .card{
        width: 100%;
        height: 100%;
    }
    .card-img{
        /* height: 65%; */
    }
    .card-desc h1{
        font-size: 0.7em;
    }

    .page-box{
        width: 70%;
        height: 80%;
    }

    .showCharacter1{
        display: block;
    }
    .leftGrid1{
        /* background-color: rgb(243, 20, 39); */
    }
    .leftGrid1 div{
        padding:3%;
    }
    .leftGrid1 div h3{
        font-size: 1em;
    }
    .leftGrid1 div h1{
       font-size: 1.6em;
    }
    .leftGrid1 div p{
        line-height: 1.2em;
        font-size: 0.7em;
    }
    .rightGrid1{
        /* border: 1px solid white; */
        /* background-color: black; */
    background: linear-gradient(45deg, rgb(7, 6, 104), black,black,black, purple);

    }
    .rightGrid1 img{
        /* position: relative; */
        width: 50%;
        left: 50%;
        transform: translateX(50%);
    }
    .moviesTrailer{
        height: 40vh;
    }
    .foot{
        padding: 2% 3%;
        display: block;
    }
    .foot p{
        font-size: 0.6em;
        margin-top: 5px;
    }
    .footList li{
        margin: 5px;
        font-size: 0.8em;
    }
.icons img{
    width: 20px;
    margin-left: 10px;
    border: none;
}
}