@import url('https://fonts.googleapis.com/css2?family=Poppins:ital@1&display=swap');
*{
    margin: 0; padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;

}
body{
    background-image: none;
    background: rgb(234,202,255);   
    background: linear-gradient(90deg, rgba(234,202,255,1) 0%, rgba(255,91,91,1) 50%, rgba(255,191,101,1) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.card{
    width: 250px;
    height: 250px;
    margin: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    transition: all .4s;

    
}
.card:hover{
    color: rgba(255, 255, 255, 0.342);
}
.card::before, .card::after{
    content: ''; position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(243, 243, 243, 0.37);
    z-index: -1;
    border-radius: 10px;
    transition: all .4s;
    
}
.card::after{
    background: #f8485d;
    transform-origin: right bottom;
    transform: translate(10%, 10%) scale(0.3);
    border-radius: 50%;
    transition: all .4s;
}
.card:hover::after{
    transform: translate(0); scale:(1) ;
    border-radius: 0;
    border-radius: 10px;
}
.card:hover::before{
    transform-origin: right bottom;
    transform: translate(10%, 10%) scale(0.3);
    border-radius: 50%;
    z-index: 1;
}