*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
}
body{
    width:100%;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color: #161623;
}
body::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(#f00,#f0f);
    clip-path: circle(20% at right 70%);
}

body::after{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(#2196f3,#e91e63);
    clip-path: circle(15% at 5% 10%);
}

.container{
    position:relative;
    display:flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    flex-wrap:wrap;
    z-index:1;
}
.card{
    position:relative;
    width:300px;
    height:400px;
    margin:30px;
    box-shadow:20px 20px 50px rgba(0, 0, 0, 0.5);
    border-radius:15px;
    background-color: rgba(255, 255, 255, 0.1);
    overflow:hidden;
    display:flex;
    justify-content: center;
    align-items: center;
    border-top:1px solid rgba(255, 255, 255, 0.5);
    border-left:1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
}
.card-content{
    padding:20px;
    text-align:center;
    position:relative;
    bottom:-100%;
    transition:1s;
}
.card:hover .card-content{
    bottom:0px;
}
.card-title{
    position:absolute;
    top:-100px;
    right:30px;
    font-size:8em;
    color:rgba(255, 255, 255, 0.1);
    pointer-events: none;
}
.card-subtitle{
    font-size:30px;
    text-transform: capitalize;
    color:#fff;

}
.matter{
    font-size:16px;
    text-align:justify;
    color:#fff;
    margin:10px 0;
}
button{
    border:none;
    text-decoration: none;
    color:#000;
    background-color: #fff;
    padding:10px 20px;
    border-radius:30px;
    box-shadow:0 5px 15px rgba(0, 0, 0, 0.5)
}