@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap');
*{
    margin: 0;
    padding: 0;
}
#main{
 
    text-align: center;
}
.maindiv{
display: flex;
justify-content: center;
align-items: center;
display: inline-block;
margin: 20px auto;
height: 400px !important;
text-align: left;


}
.card{
position: relative;
width: 320px;
height: 420px;
margin: 10px;
background:  rgb(55, 55, 97);
border-radius: 20px ;
overflow: hidden;
display: inline-block;

}

.card::before{
    content: "";
    position: absolute;
    top: -50%;
    width: 100%;
    height: 100%;
    background: gainsboro;
    transform: skewy(345deg);
    transition:0.5s ;
}
.card:hover::before{
    top: -70%;
    transform: skewy(390deg);

}
.card::after{
    content: 'MATJAR.COM';
    position: absolute;
    bottom: 0;
    left: 0;
    font-weight: 600;
    font-size: 3em;
    color: rgba(0, 0, 0, 0.1);
}
 .card .imgbox{
     position: relative;
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     padding-top: 20px; 
     z-index: 1;
 }
 .card .imgbox img{
    max-width:90%;
    height: 300px;
    transition: 0.5s;
    margin-top: 10px;
  
 }
 .card:hover .imgbox img{
    max-width: 50%;
    height: 152px;

 }
 .card .contentbox{
     position: relative;
     padding: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     z-index: 1;
 }
 .card .contentbox h3{
     font-size: 18px;
     color: seashell;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 1px;
 }
 .card .contentbox .price{
     font-size: 24px;
     color: seashell;
     font-weight: 500;
     letter-spacing: 1px;
 }

 .card .contentbox .buy{
     position: relative;
     top: 200px;
     opacity: 0;
     padding: 10px 30px;
     margin-top: 15px;
     color: #fff;
     text-decoration: none; 
     background-color :rgb(231, 72, 197);
     border-radius: 30px;
     text-transform: uppercase;
     letter-spacing: 1px;
     transition: 00.5s;
 }
 .card:hover .contentbox .buy{
    top: 0;
    opacity: 1;
 }