update

Took 5 hours 35 minutes

public/stylesheets/main.css

@@ -72,11 +72,11 @@ body {
     background-color: #23417B;
     box-shadow: inset 0 0 80px #18566D;
     clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
-
+    --fillTime: 45s;
     background-repeat: no-repeat;
     background-position: center;
     background-size: auto 83%;
-    margin: auto auto 3%;
+    margin: auto auto 2%;
 }
 
 .water::before {
@@ -88,7 +88,7 @@ body {
     top: -90%;
     left: -50%;
     border-radius: 40%;
-    animation: animWater 10s linear infinite, animFillIn 15s linear forwards;
+    animation: animWater 8s linear infinite, animFillIn var(--fillTime) linear forwards;
 }
 
 .water::after {
@@ -97,10 +97,10 @@ body {
     height: 204%;
     background-color: #ececec80;
     position: absolute;
-    top: -90%;
+    top: -100%;
     left: -52%;
     border-radius: 40%;
-    animation: animWater 10s linear infinite, animFillIn 15s linear forwards;
+    animation: animWater 8s linear infinite, animFillIn var(--fillTime) linear forwards;
     animation-delay: 0.4s;
 }
 
@@ -111,10 +111,10 @@ body {
 
 @keyframes animFillIn {
     0% {
-        top: -90%;
+        top: -100%;
     }
     100% {
-        top: -190%;
+        top: -188%;
     }
 }
 

public/stylesheets/modal.css

@@ -26,6 +26,7 @@
     text-align: center;
     background-color: #FEFEFE;
     margin-bottom: 5px;
+    font-size: 1.2em;
 }