*{
    margin: 0%;
    padding: 0%;
}

html,body{
    height: 100%;
    width: 100%;
}

h1{
    justify-self: center;
}

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

.card{
    width: 230px;
    height: 300px;
    border: 1px solid cyan;
    border-radius: 20px;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
}
img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
#card1:hover{
   z-index: 10;
}

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

#card2{
    rotate: -7deg;
}

#card3{
    rotate: -14deg;
}
#card4{
    rotate: -21deg;
}