diff --git a/src/resources/css/animations/bubbleup.css b/src/resources/css/animations/bubbleup.css
new file mode 100644
index 0000000..59b5acc
--- /dev/null
+++ b/src/resources/css/animations/bubbleup.css
@@ -0,0 +1,59 @@
+/**
+
+**/
+
+.bubbles-container {
+ background: hsl(216, 57.1%, 11%);
+ min-height: 100%;
+ overflow: hidden;
+ position: relative;
+ width: 100%;
+}
+
+.bubbles {
+ position: relative;
+ display: flex;
+}
+
+.bubbles span {
+ border-radius: 50%;
+ height: 30px;
+ margin: 0 4px;
+ position: relative;
+ width: 30px;
+ /*animation: bubble 15s linear infinite;*/
+ /*animation-name: bubbleup;
+ animation-timing-function: linear;
+ animation-iteration-count: infinite;
+ animation-duration: calc(300s / calc(var(--i) * 5));*/
+}
+
+.bubbles span:nth-child(odd) {
+ background: hsl(191, 66.8%, 58.6%);
+ box-shadow: 0 0 0 10px hsla(191, 66.8%, 58.6%, 0.3), 0 0 50px hsl(191, 66.8%, 58.6%), 0 0 100px hsl(191, 66.8%, 58.6%);
+}
+
+.bubbles span:nth-child(even) {
+ background: hsl(339, 100%, 58.8%);
+ box-shadow: 0 0 0 10px hsla(339, 100%, 58.8%, 0.3), 0 0 50px hsl(339, 100%, 58.8%), 0 0 100px hsl(339, 100%, 58.8%);
+}
+
+.animate-bubble {
+ animation-name: bubbleup;
+ animation-duration: calc(300s / calc(var(--i) * 5));
+ animation-timing-function: linear;
+ animation-iteration-count: infinite;
+}
+
+@keyframes bubbleup {
+ 0% { transform: translateY(100px) scale(0); }
+ 100% { transform: translateY(-100px) scale(1); }
+}