*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
    width: 100%;
}
#main{
    height:100%;
    width: 100%;
}
.card{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% ,-50%);
    height:380px;
    width : 280px;
    border: 1px solid salmon;
    border-radius: 20px;
    overflow: hidden;
    
} 
#card1{
    z-index: 4;
    background-color: aqua;

    
}
#card2{
    z-index: 3;
    transform: translate(-50%,-50%) rotate(-6deg);
    background-color: azure;

}
#card3{
    z-index: 2;

        transform: translate(-50%,-50%) rotate(-12deg);
        background-color: blueviolet;

}
#card4{
    z-index: 1;
     transform: translate(-50%,-50%) rotate(-18deg);
     background-color: burlywood;
}
#card1:hover{
    z-index: 10;
    
}
#card2:hover{
    z-index: 10;
    

}
#card3:hover{
    z-index: 10;
    

}
#card4:hover{
    z-index: 10;
    

}
img{
    
    height: 100%;
    width: 100%;
    object-fit: cover;

}