diff --git a/style.css b/style.css index 22b4d1d..f0dd9ff 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,6 @@ body { font-family: Arial, sans-serif; + background: linear-gradient(to bottom, #aeeeee, #006699); /* Water-like gradient */ } .tabs { @@ -44,12 +45,29 @@ body { background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.7), rgba(173,216,230,0.5)); border-radius: 50%; position: absolute; + bottom: -50px; /* Start below the view */ bottom: 0; animation: floatUp 5s infinite; text-align: center; line-height: 100px; cursor: pointer; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); + transition: transform 0.2s ease-in-out; +} +/* Bubble animation */ +@keyframes floatUp { + 0% { transform: translateY(0); } + 100% { transform: translateY(-500px); } /* Float higher */ +} + +/* Burst effect */ +.burst { + animation: burst 0.5s forwards; /* Create a burst animation */ +} + +@keyframes burst { + 0% { transform: scale(1); opacity: 1; } + 100% { transform: scale(2); opacity: 0; } } .modal {