body 
        
        {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            height: 100vh;
            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.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;
        }
            
        #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;
}

#randomTextDisplay {
            position: relative;
            margin: 30px; 
            font-family: garamond;
            padding: 20px;
            color: white; /* Set the text color */
            font-size: 2em;
            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-radius: 200px;
            box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
            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: 80px;
    color: white;
     font-size: 2em;
    border-radius: 200px;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
    background: transparent;
}