p {
    font-family: "PT Sans", sans-serif;
    font-stretch: 100%;
}


@keyframes blob {
    0% {
        transform: translate(20px, 20px) scale(1);
    }

    33% {
        transform: translate(70px, -40px) scale(1.1);
    }

    66% {
        transform: translate(-80px, 60px) scale(0.9);
    }

    100% {
        transform: translate(20px, 20px) scale(1);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}


@keyframes border-spin {
    /* 50% {
        transform: rotate(-720deg);
    } */

    100% {
        transform: rotate(360deg);
    }
}

.animate-border-spin {
    animation: border-spin 7s linear infinite;
}

.card-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 5rem;
    background: white;
    /* background: linear-gradient(to bottom, #334155, #1e293b); */
}

.card-wrapper::before {
    content: '';
    background: conic-gradient(rgba(245, 68, 23, 0.4) 0deg,
            rgba(236, 114, 43, 0.4) 0deg,
            transparent 40deg);
    position: absolute;
    left: -25%;
    top: -25%;
    height: 150%;
    width: 150%;
    animation: border-spin 7s linear infinite;
}

.card-content {
    position: absolute;
    left: 10px;
    top: 10px;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    border-radius: 5rem;
    background: white;
    /* background: linear-gradient(to bottom, #1e293b, #0f172a); */
}

@keyframes rock-a-by {
    0% {
        transform: translateX(50px) rotate(-5deg);
    }

    50% {
        transform: translateX(-50px) rotate(5deg);
    }

    100% {
        transform: translateX(50px) rotate(-5deg);
    }
}

.animate-rock-a-by {
    animation: rock-a-by 8s ease-in-out infinite;
}

.paused {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}