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

html body {
    height: 100%;
    width: 100%;
   /* background: linear-gradient(to bottom,#ff7e5f,#feb47b);*/
   background: radial-gradient(circle,#f372e8,#e5e378);
    height:100px;
    margin: 0;
}

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

.card{
    position: absolute;
    margin-top: 50%;
    /*top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);*/
    height: 300px;
    width: 230px;
    border: 2px solid black;
    border-radius: 20px;
    overflow: hidden;
}

#card1{
    z-index: 10;
}

#card2{
    z-index: 8;
    rotate: -7deg;
}

#card3{
    z-index: 6;
    rotate: -14deg;
}

#card4{
    z-index: 4;
    rotate: -21deg;
}

#card5{
    z-index: 2;
    rotate: -28deg;
}

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

#card2:hover{
    z-index: 12;
}

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

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

#card5:hover{
    z-index: 12;
}