@import url('https://fonts.googleapis.com/css2?family=Beiruti:wght@200..900&display=swap');
 body {
    background: linear-gradient(135deg, #ec4899, #8b5cf6, #3b82f6);
    background-size: 400% 400%;
    animation: gradientMove 12s ease infinite;
    position: relative;
    font-family: "Beiruti", sans-serif;
}
h1, p, a {
    font-family: "Beiruti", sans-serif;
}
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

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

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

.pattern {
    background-image: url('https://cdn-icons-png.flaticon.com/512/892/892458.png'), url('https://cdn-icons-png.flaticon.com/512/892/892781.png'), url('https://cdn-icons-png.flaticon.com/512/892/892783.png');
    background-repeat: repeat;
    background-size: 100px;
    opacity: 0.08;
    position: absolute;
    inset: 0;
    z-index: 0;
}

.overlay {
    position: relative;
    z-index: 10;
}