app.css

*{
    margin:0;box-sizing:border-box ;
}
body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: #111;

}
.rowPoster {
    width:100%;
    object-fit:contain;
    max-height:100px;
    margin-right:10px;
    transition: transform 450ms;
}
.rowPosters{
    display:flex;
    overflow-y:hidden;
    overflow-x:scroll;
    padding:20px;
}

.rowPoster:hover{
    transform:scale(1.08);
}
.rowPosters::-webkit-scrollbar{
    display:none;
}
.rowPosterLarge{
    max-height:250px;
}
.rowPosterLarge:hover{
    transform:scale(1.1);
}
.row{
    color:#fff;
    margin-left:20px;
}
.banner{
    background-image: url(banner2.jpg);
    background-size:cover;
    background-position:center ;
    color:#fff;
    object-fit:contain;
    height:450px;
}
.bannerContents{
    margin-left:30px;
    padding-top:140px;
    height:190px;
}
.bannerTitle{
    font-size:3rem;
    font-weight:800;
    padding-bottom:0.3rem;
}
.bannerDesc{
    width:45rem;
    line-height:1.3rem;
    padding-top:1rem;
    font-size:1rem;
    max-width:360px;
    height:180px;
}
.bannerButton{
    cursor:pointer;
    color:#fff;
    outline:none;
    border:none;
    font-weight:700;
    border-radius:0.2vw;
    padding:2rem 2rem;
    margin-right:1rem;
    padding-top:0.5rem;
    padding-bottom:0.5rem;
    background-color:#222;
}
.bannerButton:hover{
    color:#000;
    background-color: #e6e6e6;
    transition:all 0.2s;
}
.bannerFadeBottom{
    margin-top:125px;
    height:7.8rem;
    background-image:linear-gradient(180deg, transparent, rgba(37,37,37,0.61),#111);
}
.navLogo{
    width:80px;
    object-fit:contain;
}
.navAvatar{
    width:30px;
    object-fit:contain;
}
.nav{
    position:fixed;
    top:0;
    width:100%;
    display:flex;
    justify-content:space-between;
    padding:20px;
    z-index:1;
    transition-timing-function: ease-in;
    transition:all 0.5s;
}
.navBlack {
    background-color: #1f1f1f;
}