body 
        
        {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin: 0;
            font-family: garamond;
            color: #453D3D;
            text-align: left;
            padding-top: 50px;
            padding-left: 80px;
            padding-right: 80px;
            background: #d1ed9d;
            background: radial-gradient(circle,rgba(209, 237, 157, 1) 0%, rgba(247, 151, 25, 1) 100%);
            min-height:100vh;
        }
        
        
        #randomBtn {
          position: relative;
        padding: 20px 20px;
        font-size: 1.5em;
	    font-family: garamond;
	    Font-weight: bold;
	    color: #F0DECE;
        cursor: grab;
		border-radius: 200px;
		background: transparent;
		box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
        transition: transform 2s;
        }
            
        #randomBtn:active {
        transform: scale(3);
        }

        #sequentialBtn {
        position: relative;
        padding: 20px 20px;
        font-size: 1.8em;
	    font-family: garamond;
	    Font-weight: bold;
	    color: #F0DECE;
        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;
}

/* Container that holds the text */
#randomTextDisplay {
    position: relative; /* Keeps it as a positioning context if needed */
    margin: 10px;
    color: white; /* Set the text color */
    font-size: 1.5em;
    font-family: garamond;
    padding: 10px; /* Add some padding so the text isn't touching the edge */
    background: radial-gradient(circle,rgba(242, 99, 225, 1) 48%, rgba(250, 197, 147, 1) 80%, rgba(242, 99, 225, 1) 100%);
    border-radius: 200px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
    /* Remove text styles from here, they belong on the text elements */
}

/* Base styles for the animated text elements */
.fly-text {
    position: relative; /* Stays in the flow, allowing parent expansion */
     line-height: 1; /* Adjust line spacing */
    opacity: 0;
    /* Use transforms to move within the flow relative to its own position */
    transform: translateY(-200px); 
    transition: transform 1s ease-out, opacity 0.5s ease-out;

}

/* Class for flying in */
.fly-in {
    transform: translateY(0); /* Ends at its natural position */
    opacity: 1;
}

/* Class for flying out */
.fly-out {
    transform: translateY(100px) scale(80); /* Flies down and scales out */
    opacity: 0;
    transition: transform 2s ease-in, opacity .3s ease-in;
}


#sequentialTextDisplay {
    position: relative;
    margin-top: 20px;
    padding: 50px;
    color: white;
    font-size: 1.3em;
    border-radius: 200px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
    background: radial-gradient(circle,rgba(242, 99, 225, 1) 48%, rgba(250, 197, 147, 1) 80%, rgba(242, 99, 225, 1) 100%);
    white-space: pre-line;
    max-width: 50vw;
    max-height: 20vh;
  overflow-y: auto;
  display: flex;
    flex-direction: column;
}