body 
        
        {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            min-height: 100vh;
            margin: 0;
            font-family: garamond;
            color: white;
            text-align: left;
            padding-top: 20px;
            padding-left: 80px;
            padding-right: 80px;
            background: #0d8c71;
background: linear-gradient(103deg,rgba(13, 140, 113, 1) 23%, rgba(176, 155, 235, 1) 77%);
        }
        

        #sequentialBtn {
        position: relative;
        padding: 20px 20px;
        font-size: 1em;
	    font-family: garamond;
	    Font-weight: bold;
	    color: #F0DECE;
	    border: 0px solid;
        cursor: grab;
		border-radius: 200px;
		background: transparent;
		box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
        transition: transform 2s;
        }
        #sequentialBtn:active {
        transform: scale(3);}
     
     
     /*text activities */ 
     
     
     .hidden {
    display: none;
}

#randomTextDisplay {
            position: relative;
            margin: 30px; 
            font-family: garamond;
            padding: 20px;
            color: white; /* Set the text color */
            font-size: 1em;
            min-height: 20px;
            background: radial-gradient(circle,rgba(58, 122, 242, 1) 48%, rgba(250, 197, 147, 1) 80%, rgba(242, 99, 225, 1) 100%);
            background: transparent;
              border: 18px solid #F0DECE;
            border-radius: 200px;
            box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
            line-height: 1.2; /* Adjust line spacing */
}
/* Base styles for the animated elements */
.fly-text {
    position: absolute;
    top: 30%;
    left: 10%;
    right: 10%;
    transform: translateX(0%) translateY(-200%);
    opacity: 0;
    transition: transform 1s ease-out, opacity 0.5s ease-out;
}

/* Class for flying in */
.fly-in {
    transform: translateX(0%) translateY(-10%);
    opacity: 1;

}

/* Class for flying out */
.fly-out {
    transform: translateX(0) translateY(100%) rotate(0deg) scale(80);
    opacity: 0;
    transition: transform 2s ease-in, opacity .3s ease-in;
}


#sequentialTextDisplay {
    position: relative;
    margin-top: 20px;
    padding: 10px;
    font-size: 1em;
    color: white;
    border: 0px solid #F0DECE;
    border-radius: 200px;
    background: transparent;
    white-space: pre-line;
}