body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            height: 100%;
            background-color: #555; /* Starting color */
      		background: url('https://sagaforge17.github.io/checkers-gradient-bg.svg') no-repeat center center;
      		background-size: cover;
        }
      	#gradient-bg {
      		margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
      		position: absolute;
      		z-index: 0;
      		animation: colorCycle 30s linear infinite;
      	}
        @keyframes colorCycle {
    0% { background-color: rgba(255, 0, 0, 0.4); } /* Red */
    12.5% { background-color: rgba(255, 127, 0, 0.4); } /* Orange */
    25% { background-color: rgba(255, 255, 0, 0.4); } /* Yellow */
    37.5% { background-color: rgba(0, 255, 0, 0.4); } /* Green */
    50% { background-color: rgba(0, 255, 255, 0.4); } /* Cyan */
    62.5% { background-color: rgba(0, 0, 255, 0.4); } /* Blue */
    75% { background-color: rgba(75, 0, 130, 0.4); } /* Indigo */
    87.5% { background-color: rgba(148, 0, 211, 0.4); } /* Violet */
    100% { background-color: rgba(255, 0, 0, 0.4); } /* Red */
        }
        .bubble {
            position: absolute;
            bottom: -100px;
            width: 30px; /* Increased size */
            height: 30px; /* Increased size */
            background: rgba(255, 255, 255, 0.7); /* More visible */
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Shadow for depth */
            animation: rise 10s infinite ease-in-out;
      		z-index: 1;
        }
        @keyframes rise {
            0% {
                transform: translateY(0);
                opacity: 1;
            }
            100% {
                transform: translateY(-1000px);
                opacity: 0;
            }
        }