body{
    margin: 0px;
    padding: 0px;
}

.scrollwatcher {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background-color: red;
    transform-origin: left;
    scale: 0 1;
    animation: scrollwatcher linear;
    animation-timeline: scroll();
    z-index: 99;
}

@keyframes scrollwatcher {
    to { scale: 1 1; }
}

@keyframes scrollwatcher {
    to {scale: 1 1;}
}


.body{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.scroll-flex-box{
    display: flex;
    flex-direction: column;
    gap: 50vh;
}
.item{
    border: 1px solid black;
    height: 100vh;

}

.card-heading{
    color: aliceblue;
    font-size: xx-large;
}

.movie-card{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card0{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.521), rgba(0,0,0,0.44)),
    url(./Background_Images/amazing_spaiderman.jpg);
    background-size: cover;
    opacity: 1;
    transition-property: opacity;
    transition-duration: 1s;
} 


.card1{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.521), rgba(0,0,0,0.44)),
    url(./Background_Images/Dear_comarde/image8.jpg);
    background-size: cover;
}
.card2{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.521), rgba(0,0,0,0.44)),
    url(./Background_Images/fight_club.png);

    background-size: cover;
}
.card3{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.521), rgba(0,0,0,0.44)),
    url(./Background_Images/joker.jpg);

    background-size: cover;
}
.card4{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.521), rgba(0,0,0,0.44)),
    url(./Background_Images/social_netowrk.jpg);

    background-size: cover;
}
.card5{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.521), rgba(0,0,0,0.44)),
    url(./Background_Images/avatar.jpg);

    background-size: cover;
}
.card6{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.521), rgba(0,0,0,0.44)),
    url(./Background_Images/the_dark_knight.webp);

    background-size: cover;
}
.card7{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.521), rgba(0,0,0,0.44)),
    url(./Background_Images/bladerunner.avif);

    background-size: cover;
}
.card8{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.521), rgba(0,0,0,0.44)),
    url(./Background_Images/blader\ runner.png);

    background-size: cover;
}
.card9{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.521), rgba(0,0,0,0.44)),
    url(./Background_Images/tron.avif);
    background-size: cover;
}
.card10{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.521), rgba(0,0,0,0.44)),
    url(./Background_Images/yourname.jpg);

    background-size: cover;
}
.card11{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.521), rgba(0,0,0,0.44)),
    url(./Background_Images/znmd.jpg);

    background-size: cover;
}
.card12{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.521), rgba(0,0,0,0.44)),
    url(./Background_Images/uri.jpg);

    background-size: cover;
}
.card13{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.521), rgba(0,0,0,0.44)),
    url(./Background_Images/martian.jpg);

    background-size: cover;
}
.card14{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.521), rgba(0,0,0,0.44)),
    url(./Background_Images/de-dhakka.webp);

    background-size: cover;
}
.card15{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.521), rgba(0,0,0,0.44)),
    url(./Background_Images/moneyball.webp);

    background-size: cover;
}
.card16{
    background-image:
    linear-gradient(rgba(0, 0, 0, 0.521), rgba(0,0,0,0.44)),
    url(./Background_Images/Talaash-Underwater-Scene.png.webp);

    background-size: cover;
}

img{
    height: 50vh;
    transition-duration: 0.5s;
}
img:hover{
    transform: scale(1.01);
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.775);
}