.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 */
    }