* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    width: 100%;
    background-color: rgb(29, 29, 29);

}

#main {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}
.shadow{
    display: flex;
    justify-content: center;
    align-items: center;
   
}
.shadow:hover{
    box-shadow: rgba(72, 135, 202, 0.8) 0 0 90px 33px;
    width: 200px;
    height: 250px;
}
img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 .card {
   /* position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%); */
    width: 230px;
    height: 300px;
    border: 1px solid black;
    position: absolute;
    border-radius: 20px;
    overflow: hidden;
 
}
#card1{
    z-index: 4;
}


#card2{
    transform: rotate(-7deg);
    z-index: 3;
    
    
}
#card3{
    transform: rotate(-14deg);
    z-index: 2;
}
#card3{ 
    z-index: 1;
    transform: rotate(-20deg);
}

#card2:hover{
    z-index: 10;
    box-shadow: rgba(161, 63, 188, 0.8) 0 0 90px 33px;
    
   
}

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