body {
    font-family: 'Poppins', sans-serif;
}

.main {
    background: linear-gradient(to bottom right,
            rgba(49, 46, 129, 0.6),
            rgba(100, 31, 152, 0.5),
            rgba(16, 0, 22, 0.9));
    padding: 3rem 4rem;
}

.perspective {
    perspective: 1200px;
}

.card {
    transform-style: preserve-3d;
    transition: transform 0.9s cubic-bezier(0.45, 0, 0.15, 1);
}

.flipped {
    transform: rotateY(180deg);
}

.card-face {
    backface-visibility: hidden;
}

.card-back {
    transform: rotateY(180deg);
}

@keyframes gradient-x {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}