@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
    h1 {
        @apply text-4xl;
        @apply font-bold;
    }
    h2 {
        @apply text-3xl;
        @apply font-bold;
    }
    h3 {
        @apply text-2xl;
        @apply font-bold;
    }
    h4 {
        @apply text-xl;
        @apply font-semibold;
    }
    h5 {
        @apply text-lg;
        @apply font-semibold;
    }
    h6 {
        @apply text-sm;
        @apply font-semibold;
    }
}

@layer utilities {
    .overlay-mask {
        mask-image: linear-gradient(0deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 0%) 40%);
    }
}

html,
body {
    overscroll-behavior: none;
}

body {
    overflow-y: hidden;
}

@keyframes slowVideo {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* Rocket animation CSS */
.rocket {
    position: fixed;
    top: -100px; /* Start above the screen */
    left: 50%;
    transform: translateX(-90%) rotate(160deg); /* Tilt the rocket 160 degrees to the right */
    width: 250px; /* Increase size of the rocket */
    z-index: 999;
    transition: top 0.5s ease-out; /* Smooth transition effect */
}