body {
    animation: 10s ease-in-out 5s infinite normal none running gradient-background;
    background: linear-gradient(90deg, #2980b9 0%, #2c3e50 100%) 0% 0% / 180% 180%;
}
.flip-card {
    perspective: 1000px;
}
.flip-card-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
    height: 100%;
}
.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
    backface-visibility: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.flip-card-back {
    transform: rotateY(180deg);
}

@keyframes gradient-background {
    0% {
        background-position: 0 50%
    }

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

    to {
        background-position: 0 50%
    }
}