.fly-in {
    animation-name: fly;
    animation-duration: 5s;
}
.fade-in {
    animation-name: fadein;
    animation-duration: 5s;
}
.dissolve {
    animation-name: dissolve;
    animation-duration: 5s;
}
.zoom-in {
    animation-name: zoomin;
    animation-duration: 5s;
}
.color-in {
    animation: color 5s infinite;
}
.slide-in {
    animation: slidein 5s ease-in-out; /* Adjust duration and easing as needed */
}


.slide-out {
    animation: slideout 0.5s ease-in-out; /* Adjust duration and easing as needed */
}


.bounce {
    animation: bounce 1s ease 5; /* Adjust duration and iteration as needed */
}


.rotate {
    animation: rotate 2s linear 1; /* Adjust duration and iteration as needed */
}


.pulse {
    animation: pulse 1.5s ease-in-out infinite; /* Adjust duration and iteration as needed */
}

.flip {
    animation: flip 1s ease-in-out 3; /* Adjust duration and iteration as needed */
    display: inline-block; /* Required for transform to work properly */
}
@keyframes fadein {
    
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.5;
    }
    75% {
        opacity: 0.75;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fly {
    0% {
        opacity: 0;
        transform: translateX(-100%); /* Start from the left */
    }

    100% {
        opacity: 1; /* Fully visible */
        transform: translateX(0); /* End at its original position */
    }
}
@keyframes color {
    0% {
        color: cadetblue;
    }

    25% {
        color: coral;
    }

    50% {
        color: goldenrod;
    }

    75% {
        color: mediumseagreen;
    }

    100% {
        color: darkblue;
    }
}
@keyframes dissolve {
    0% {
        color: cadetblue;
        opacity: 1; /* Fully visible */
    }

    25% {
        color: coral;
        opacity: 0.75; /* Partially transparent */
    }

    50% {
        color: goldenrod;
        opacity: 0.5; /* More transparent */
    }

    75% {
        color: mediumseagreen;
        opacity: 0.25; /* Almost transparent */
    }

    100% {
        color: darkblue;
        opacity: 0; /* Fully transparent */
    }
}
@keyframes zoomin {
    0% {
        transform: scale(0); /* Start from no size */
        opacity: 0; /* Fully transparent */
    }

    50% {
        transform: scale(1.1); /* Slightly larger */
        opacity: 0.5; /* Partially visible */
    }

    100% {
        transform: scale(1); /* Original size */
        opacity: 1; /* Fully visible */
    }
}
@keyframes slidein {
    0% {
        transform: translateX(-100%); /* Start off-screen to the left */
        opacity: 0; /* Fully transparent */
    }

    100% {
        transform: translateX(0); /* Slide into its original position */
        opacity: 1; /* Fully opaque */
    }
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0); /* Original position */
    }

    40% {
        transform: translateY(-30px); /* Move up */
    }

    60% {
        transform: translateY(-15px); /* Slightly bounce back down */
    }
}
@keyframes slideout {
    0% {
        transform: translateX(0); /* Start from its original position */
        opacity: 1; /* Fully opaque */
    }

    100% {
        transform: translateX(-100%); /* Slide off-screen to the left */
        opacity: 0; /* Fully transparent */
    }
}
@keyframes pulse {
    0% {
        transform: scale(1); /* Original size */
        opacity: 1; /* Fully visible */
    }

    50% {
        transform: scale(1.1); /* Slightly larger */
        opacity: 0.8; /* Partially transparent */
    }

    100% {
        transform: scale(1); /* Back to original size */
        opacity: 1; /* Fully visible */
    }
}
@keyframes rotate {
    from {
        transform: rotate(0deg); /* Start at 0 degrees */
    }

    to {
        transform: rotate(360deg); /* Rotate to 360 degrees */
    }
}
@keyframes flip {
    0% {
        transform: perspective(400px) rotateY(0deg); /* Start facing front */
    }

    50% {
        transform: perspective(400px) rotateY(180deg); /* Face backward */
    }

    100% {
        transform: perspective(400px) rotateY(360deg); /* Back to front */
    }
}
@keyframes typing {
    from {
        width: 0; /* Start with no width */
    }

    to {
        width: 100%; /* End with full width */
    }
}
@keyframes blink-caret {
    from, to {
        border-color: transparent; /* Invisible border */
    }

    50% {
        border-color: black; /* Visible border */
    }
}
@keyframes shake {
    0% {
        transform: translate(1px, 0);
    }

    25% {
        transform: translate(-1px, 0);
    }

    50% {
        transform: translate(1px, 0);
    }

    75% {
        transform: translate(-1px, 0);
    }

    100% {
        transform: translate(0, 0);
    }
}


.typing-container {
    background-color: white; /* Background for the text */
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.typing {
    border-right: 2px solid black; /* Cursor effect */
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden; /* Hide overflow */
    animation: typing 4s steps(30, end), blink-caret 0.75s; /* Typing effect */
}


.hover-button {
    /*background-color: coral;*/ /* Initial background color */
    color: white; /* Text color */
    border: none; /* Remove border */
    padding: 15px 30px; /* Padding for button */
    font-size: 18px; /* Font size */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s, transform 0.3s; /* Smooth transition */
}

    .hover-button:hover {
        /*background-color: darkorange;*/ /* Change color on hover */
        transform: scale(1.1); /* Slightly enlarge the button */
    }
.shake-button {
    /*background-color: mediumseagreen;*/ /* Initial button color */
    color: white; /* Text color */
    border: none; /* Remove border */
    padding: 15px 30px; /* Padding for button */
    font-size: 18px; /* Font size */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor */
    transition: background-color 0.3s; /* Smooth transition for background color */
}

    .shake-button:hover {
        /*background-color: darkgreen;*/ /* Change color on hover */
        animation: shake 0.5s; /* Trigger shake animation on hover */
    }
/* Extended animation utilities */
.fade-in-up{animation:fadeInUp .8s ease-out both}.fade-in-down{animation:fadeInDown .8s ease-out both}.fade-in-left{animation:fadeInLeft .8s ease-out both}.fade-in-right{animation:fadeInRight .8s ease-out both}.fade-in-scale{animation:fadeInScale .8s ease-out both}
.zoom-in-up{animation:zoomInUp .8s ease-out both}.zoom-in-down{animation:zoomInDown .8s ease-out both}.zoom-in-left{animation:zoomInLeft .8s ease-out both}.zoom-in-right{animation:zoomInRight .8s ease-out both}.zoom-out{animation:zoomOut .8s ease-in-out both}
.slide-up{animation:slideUp .8s ease-out both}.slide-down{animation:slideDown .8s ease-out both}.slide-right{animation:slideRight .8s ease-out both}.slide-up-fade{animation:slideUpFade .8s ease-out both}
.wobble{animation:wobble 1s ease-in-out}.swing{transform-origin:top center;animation:swing 1s ease-in-out}.jello{animation:jello .9s both}.rubber-band{animation:rubberBand 1s both}.heartbeat{animation:heartBeat 1.3s ease-in-out infinite}.tada{animation:tada 1s both}
.flip-x{animation:flipX 1s ease-in-out both}.flip-y{animation:flipY 1s ease-in-out both}.flip-in-x{backface-visibility:visible;animation:flipInX 1s both}.flip-in-y{backface-visibility:visible;animation:flipInY 1s both}
.float{animation:float 3s ease-in-out infinite}.float-slow{animation:float 5s ease-in-out infinite}.bob{animation:bob 1.8s ease-in-out infinite}.sway{transform-origin:center;animation:sway 3s ease-in-out infinite}.drift{animation:drift 6s ease-in-out infinite alternate}
.spin{animation:spin 1.5s linear infinite}.spin-slow{animation:spin 5s linear infinite}.rotate-in{animation:rotateIn .8s ease-out both}.rotate-in-left{animation:rotateInLeft .8s ease-out both}.rotate-in-right{animation:rotateInRight .8s ease-out both}
.blur-in{animation:blurIn 1s ease-out both}.blur-out{animation:blurOut 1s ease-in both}.reveal{animation:reveal 1s ease-out both}.glow{animation:glow 1.8s ease-in-out infinite alternate}.glow-pulse{animation:glowPulse 1.5s ease-in-out infinite}.color-pulse{animation:colorPulse 2s ease-in-out infinite}
.gradient-flow{background-size:300% 300%;animation:gradientFlow 6s ease infinite}.background-pan{background-size:200% 100%;animation:backgroundPan 5s ease-in-out infinite alternate}.border-pulse{animation:borderPulse 1.5s ease-in-out infinite}
.text-wave{display:inline-block;animation:textWave 2s ease-in-out infinite}.text-pop{display:inline-block;animation:textPop .7s cubic-bezier(.2,.8,.2,1) both}.lift{transition:transform .25s ease,box-shadow .25s ease}.lift:hover{transform:translateY(-8px);box-shadow:0 12px 30px rgba(0,0,0,.18)}
.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s}.delay-5{animation-delay:.5s}.delay-6{animation-delay:.6s}.delay-7{animation-delay:.7s}.delay-8{animation-delay:.8s}.delay-9{animation-delay:.9s}.delay-10{animation-delay:1s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,35px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fadeInDown{from{opacity:0;transform:translate3d(0,-35px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-35px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(35px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fadeInScale{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}
@keyframes zoomInUp{from{opacity:0;transform:scale(.4) translateY(50px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes zoomInDown{from{opacity:0;transform:scale(.4) translateY(-50px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes zoomInLeft{from{opacity:0;transform:scale(.4) translateX(-50px)}to{opacity:1;transform:scale(1) translateX(0)}}
@keyframes zoomInRight{from{opacity:0;transform:scale(.4) translateX(50px)}to{opacity:1;transform:scale(1) translateX(0)}}
@keyframes zoomOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.55)}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes slideRight{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes slideUpFade{from{opacity:0;transform:translateY(45px)}to{opacity:1;transform:translateY(0)}}
@keyframes wobble{0%,100%{transform:translateX(0)}15%{transform:translateX(-15px) rotate(-4deg)}30%{transform:translateX(10px) rotate(3deg)}45%{transform:translateX(-8px) rotate(-2deg)}60%{transform:translateX(5px) rotate(1deg)}75%{transform:translateX(-2px)}}
@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}100%{transform:rotate(0)}}
@keyframes jello{0%,100%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.2,.8,1)}40%{transform:scale3d(.8,1.2,1)}50%{transform:scale3d(1.1,.9,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}}
@keyframes rubberBand{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}}
@keyframes heartBeat{0%,40%,80%,100%{transform:scale(1)}20%,60%{transform:scale(1.12)}}
@keyframes tada{0%{transform:scale(1) rotate(0)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes flipX{from{transform:perspective(600px) rotateX(0)}to{transform:perspective(600px) rotateX(360deg)}}
@keyframes flipY{from{transform:perspective(600px) rotateY(0)}to{transform:perspective(600px) rotateY(360deg)}}
@keyframes flipInX{from{opacity:0;transform:perspective(400px) rotateX(90deg)}to{opacity:1;transform:perspective(400px) rotateX(0)}}
@keyframes flipInY{from{opacity:0;transform:perspective(400px) rotateY(90deg)}to{opacity:1;transform:perspective(400px) rotateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes sway{0%,100%{transform:rotate(0)}25%{transform:rotate(3deg)}75%{transform:rotate(-3deg)}}
@keyframes drift{0%{transform:translate3d(-12px,0,0)}50%{transform:translate3d(12px,-8px,0)}100%{transform:translate3d(-12px,0,0)}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes rotateIn{from{opacity:0;transform:rotate(-180deg) scale(.5)}to{opacity:1;transform:rotate(0) scale(1)}}
@keyframes rotateInLeft{from{opacity:0;transform:rotate(-90deg) translateX(-80px)}to{opacity:1;transform:rotate(0) translateX(0)}}
@keyframes rotateInRight{from{opacity:0;transform:rotate(90deg) translateX(80px)}to{opacity:1;transform:rotate(0) translateX(0)}}
@keyframes blurIn{from{opacity:0;filter:blur(15px);transform:scale(1.05)}to{opacity:1;filter:blur(0);transform:scale(1)}}
@keyframes blurOut{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(15px)}}
@keyframes reveal{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes glow{from{filter:drop-shadow(0 0 2px currentColor)}to{filter:drop-shadow(0 0 12px currentColor)}}
@keyframes glowPulse{0%,100%{filter:drop-shadow(0 0 0 currentColor)}50%{filter:drop-shadow(0 0 14px currentColor)}}
@keyframes colorPulse{0%,100%{filter:saturate(1);opacity:1}50%{filter:saturate(2);opacity:.8}}
@keyframes gradientFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes backgroundPan{from{background-position:0 center}to{background-position:100% center}}
@keyframes borderPulse{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,.05)}50%{box-shadow:0 0 0 8px rgba(0,0,0,.08)}}
@keyframes textWave{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-5px) rotate(-2deg)}50%{transform:translateY(0) rotate(2deg)}75%{transform:translateY(5px) rotate(-1deg)}}
@keyframes textPop{0%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.12)}100%{transform:scale(1)}}