html,
body {
    overflow-x: hidden;
    font-family: Vazirmatn, sans-serif;
    scroll-behavior: smooth;
}

html {
    font-size: 100%; /* This sets the base to the browser's default (usually 16px) */
}

body {
    font-size: 1rem; /* This equals 16px by default */

}
.hide-scrollbar::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
}
.hide-scrollbar {
    -ms-overflow-style: none; /* Internet Explorer and Edge */
    scrollbar-width: none; /* Firefox */
}

@keyframes eye-mirror {
    0% {
        rotate: 0deg;
    }
    50% {
        rotate: 180deg;
    }

    100% {
        rotate: 0deg;
    }
}

.animate-mirror {
    animation: eye-mirror infinite; /* Adjust duration as needed */
    animation-timing-function: steps(1, end);
    animation-duration: 6.7999s;
}

.animate-mirror-2 {
    animation: eye-mirror infinite; /* Adjust duration as needed */
    animation-timing-function: steps(1, end);
    animation-duration: 9.564s;
}

@keyframes move {
    0% {
        transform: translateX(100%); /* Start off-screen to the left */
    }
    50% {
        transform: translateX(0); /* Move off-screen to the right */
    }
    100% {
        transform: translateX(-100%); /* Move off-screen to the right */
    }
}

.animate-move {
    animation: move 5s ease-in-out infinite; /* Adjust duration and timing as needed */
}

.animate-cloud-1 {
    animation: move 6s ease-out infinite; /* Adjust duration and timing as needed */
}

.animate-cloud-2 {
    transition-delay: 2s;
    animation: move 4s ease-in infinite; /* Adjust duration and timing as needed */
}

.animate-cloud-3 {
    animation: move 8s ease infinite; /* Adjust duration and timing as needed */
}

.animate-cloud-4 {
    animation: move 3.32s ease infinite; /* Adjust duration and timing as needed */
}

.bg-candy-orange {
    background: linear-gradient(137.64deg, #ff9e80 0, #ffc9ab 97.97%);
    box-shadow:
        -4px -20px 20px rgba(0, 0, 0, 0.08),
        11px 12px 20px rgba(0, 0, 0, 0.05),
        11px 9px 15px rgba(0, 0, 0, 0.05),
        inset 2px 2px 3px rgba(255, 255, 255, 0.42) !important;
}
.bg-candy-green {
    background: linear-gradient(145deg, #80c1b7 0, #8fceca 97.97%) !important;
    box-shadow:
        -4px -20px 20px rgba(0, 0, 0, 0.08),
        11px 12px 20px rgba(0, 0, 0, 0.05),
        11px 9px 15px rgba(0, 0, 0, 0.05),
        inset 2px 2px 3px rgba(255, 255, 255, 0.42) !important;
}
.bg-candy-pink {
    background: linear-gradient(
        137.64deg,
        #ffa2a2 0,
        #ffbab6 97.97%
    ) !important;
    box-shadow:
        -4px -20px 20px rgba(0, 0, 0, 0.08),
        11px 12px 20px rgba(0, 0, 0, 0.05),
        11px 9px 15px rgba(0, 0, 0, 0.05),
        inset 2px 2px 3px rgba(255, 255, 255, 0.42) !important;
}
.bg-candy-blue {
    background: linear-gradient(137.64deg, #81b3ff 14.8%, #9cc7ff 97.97%);
    box-shadow:
        -4px -20px 20px rgba(0, 0, 0, 0.08),
        11px 12px 20px rgba(0, 0, 0, 0.05),
        11px 9px 15px rgba(0, 0, 0, 0.05),
        inset -2px -2px 3px rgba(0, 0, 0, 0.09),
        inset 2px 2px 3px rgba(255, 255, 255, 0.42) !important;
}
.bg-candy-purple {
    background: linear-gradient(137.64deg, #b4a6ff 14.8%, #c7bcff 97.97%);
    box-shadow:
        -4px -20px 20px rgba(0, 0, 0, 0.08),
        11px 12px 20px rgba(0, 0, 0, 0.05),
        11px 9px 15px rgba(0, 0, 0, 0.05),
        inset -2px -2px 3px rgba(0, 0, 0, 0.09),
        inset 2px 2px 3px rgba(255, 255, 255, 0.42) !important;
}
.curved-left {
    border-radius: 8vh 0 0 8vh / 60vh 0 0 60vh;
}
.curved-top {
    border-radius: 150vw 150vw 0 0/22vw 22vw 0 0;
}

/* app/assets/stylesheets/application.css */

@keyframes shoot {
    0% {
        transform: translate3d(0, 0, 0) rotate(15deg); /* Start position */
    }

    100% {
        transform: translate3d(
                calc(5px * var(--randomX)),
                /* Random small movement on X axis */ -100vh,
                /* Move out of view vertically */ calc(-5px * var(--randomZ))
                    /* Random small movement on Z axis */
            )
            rotate(345deg);
    }
}

@keyframes fall {
    0% {
        transform: translateY(0) rotate(45deg); /* Start from the top */
    }

    100% {
        transform: translateY(150vh) rotate(225deg); /* Move down outside the bottom of the viewport */
    }
}

.violet,
.green {
    position: absolute; /* Ensure the elements can position themselves */
    animation-fill-mode: forwards; /* Retain the final animation state */
    /* Optional: Add perspective for better 3D effect */
    perspective: 500px;
}