index.css

.head-img{
    height: 120px;
}
.head:hover{
    transform: scale(1.1);
    opacity: 1.5;
    transition: 1s;
}
.card-img{
    opacity: 0.7;
}

.card{
    box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
}
.card img{
    height: 240px;
}
.button{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.9);
        display: none;
        /* justify-content: space-between; */
        padding: 10px;
        transition: background-color 0.3s;
}


.card-button{
width: 100%;
height: 40px;
cursor: pointer;
transition: background-color 0.3s,color 0.3s;
}
.card:hover .button{
    display: block;
}
.popular-text{
    top: 40;
}
.news{
    height: 60px; 
}
.news:hover{
    scale: 1.1;
    transition: 1s;
}
.popular-img{
    height: 600px;
}
.popularimg1{
    height: 380px;
}
.popularimg2{
    height: 224px;
}
.popularimg3{
    height: 350px;
}
.radius{
    border-radius: 50%;

}
.radius:hover{
    border-color: black;
}
.body-dark{
    background-color: #00050d;
    color: white;
}

.body-light{
    background-color: white;
    color: black;
}
.body-dark .textcolor{
   color: white;
}

@media(max-width:500px){
    .newschannel{
      margin-left:  50px;
    }
    .popular-img{
      height: 210px;  
    }
    .popularimg1{
     height: 270px;
    }
    
    .popularimg2{
        height: 240px;
        width: 320px;
    }
    .popularimg3{
        height: 250px;
    }
}