/* font */
@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playball&display=swap");

/* css font */
.font-great-vibes {
    font-family: "Great Vibes", cursive !important;
}

.font-engagement {
    font-family: "Playball", cursive !important;
}

/* maps */
#maps-embed iframe {
    width: 100%;
    height: 300px;
    border: 0;
    border-radius: 8px;
}

/* animation */
@keyframes float-left {
    0%,
    100% {
        transform: translateX(0) scale(1);
    }

    50% {
        transform: translateX(-10px) scale(1.05);
    }
}

@keyframes float-right {
    0%,
    100% {
        transform: translateX(0) scale(1);
    }

    50% {
        transform: translateX(10px) scale(1.03);
    }
}

@keyframes float-updown {
    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-8px) scale(1.04);
    }
}

.animate-float-left {
    animation: float-left 4s ease-in-out infinite;
}

.animate-float-right {
    animation: float-right 6s ease-in-out infinite;
}

.animate-float-updown {
    animation: float-updown 5s ease-in-out infinite;
}

.animate-delay-1 {
    animation-delay: 0.5s;
}

.animate-delay-2 {
    animation-delay: 1s;
}

.animate-delay-3 {
    animation-delay: 1.5s;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

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

.spin {
    animation: spin 40s linear infinite;
}

/* Custom Properties */
:root {
    --vh: 1vh;
}

.dynamic-h {
    height: calc(var(--vh, 1vh) * 100);
}