update

Took 4 hours 31 minutes

public/stylesheets/inputs.css

@@ -6,7 +6,8 @@
     border-radius: 2px;
     cursor: none !important;
     font-weight: 500;
-    margin-right: 2%;
+    margin-right: 1%;
+    margin-left: 1%;
     transition: 0.2s all;
 
 }

public/stylesheets/main.css

@@ -23,7 +23,7 @@
     grid-row-gap: 4%;
     text-align: center;
     border-radius: 30px 10px 30px;
-    color: black;
+    color: white;
     /*box-shadow: 3px 3px 3px;*/
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.29);
     transition: 0.4s;
@@ -55,4 +55,78 @@
     grid-column: span 1;
     grid-row: span 1;
     font-size: 150%;
+}
+
+
+
+
+/* Water animation */
+body {
+    margin: 50px;
+}
+
+.water {
+    position: relative;
+    width: 130px;
+    height: 150px;
+    background-color: #23417B;
+    box-shadow: inset 0 0 80px #18566D;
+    clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
+
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: auto 83%;
+    margin: auto auto 3%;
+}
+
+.water::before {
+    content: "";
+    width: 200%;
+    height: 200%;
+    background-color: #ececec;
+    position: absolute;
+    top: -90%;
+    left: -50%;
+    border-radius: 40%;
+    animation: animWater 10s linear infinite, animFillIn 15s linear forwards;
+}
+
+.water::after {
+    content: "";
+    width: 204%;
+    height: 204%;
+    background-color: #ececec80;
+    position: absolute;
+    top: -90%;
+    left: -52%;
+    border-radius: 40%;
+    animation: animWater 10s linear infinite, animFillIn 15s linear forwards;
+    animation-delay: 0.4s;
+}
+
+.waterCancel {
+    background-color: red;
+    transition: background-color 1s;
+}
+
+@keyframes animFillIn {
+    0% {
+        top: -90%;
+    }
+    100% {
+        top: -190%;
+    }
+}
+
+@keyframes animWater {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+#main_fillTxt {
+    margin-bottom: 3%;
 }

public/stylesheets/menu.css

@@ -1,9 +1,8 @@
 #menu {
     padding-left: 5%;
-    padding-right: 5%;
     padding-top: 10%;
     display: grid;
-    grid-template-columns: repeat(2, calc(100% / 2));
+    grid-template-columns: repeat(2, calc(95% / 2));
     grid-template-rows: repeat(2, calc(95% / 2));
     grid-gap: 2% 2%;
     color: white;

public/stylesheets/style.css

@@ -12,15 +12,23 @@
     /*cursor: none !important;*/
 }
 
+
 ul {
     list-style: circle;
 }
 
+
 html * {
     /*cursor: none !important*/
     -webkit-user-select: none; /* Safari */
     -ms-user-select: none; /* IE 10 and IE 11 */
     user-select: none; /* Standard syntax */
+    cursor: none;
+}
+
+
+html *::-webkit-scrollbar {
+    display: none;
 }
 
 
@@ -39,6 +47,7 @@ body {
     user-select: none; /* Standard syntax */
 }
 
+
 h1 {
     font-size: 1.74em;
     font-weight: 500;
@@ -63,7 +72,9 @@ h1 {
     font-size: 2em;
     padding-right: 3px;
     padding-left: 3px;
-    background-color: #167fcc;
+    background-color: #167FCC;
+    box-shadow: inset 11px 45px 50px 3px rgba(181, 15, 15, 0.66);
+
 }
 
 
@@ -102,14 +113,15 @@ h1 {
     left: 0;
     right: 0;
     height: 9%;
-    background-color: #167fcc;
+    background-color: #167FCC;
+    box-shadow: inset 11px -45px 50px 3px rgba(223, 12, 42, 0.66);
 }
 
 
 #overlay #bottom #menuBtn {
     height: 100%;
     width: 10%;
-    background-color: #21212d;
+    background-color: #21212D;
     padding: 1px;
     font-size: 1.5em;
     border: 0;
@@ -117,13 +129,17 @@ h1 {
     color: white;
     float: left;
     transition: all 0.4s;
+    margin-left: 0;
 }
+
+
 #menuBtn:hover {
     background-color: #313147 !important;
 }
 
+
 #menuBtn:disabled {
-    background-color: #777 !important;
+    background-color: #777777 !important;
     color: #C1C1C1 !important;
 }
 
@@ -143,9 +159,10 @@ h1 {
     right: 0;
     height: 82%;
     color: white;
-    background-color: #0e1f31;
+    background-color: #0E1F31;
 }
 
+
 .pane {
     height: 100%;
     padding: 1% 2%;
@@ -155,9 +172,15 @@ h1 {
     scroll-behavior: smooth;
     color: white;
     /*animation: showPane 0.3s forwards;*/
-
+    -ms-overflow-style: none; /* IE and Edge */
 }
 
+
+.pane::-webkit-scrollbar {
+    display: none;
+}
+
+
 @keyframes showPane {
     0% {
         display: none;
@@ -171,11 +194,14 @@ h1 {
     }
 }
 
+
 .hiddenPane {
     transition: 0.4s;
     display: none !important;
     /*animation: hidePane 0.4s forwards;*/
 }
+
+
 @keyframes hidePane {
     0% {
         opacity: 1;
@@ -190,6 +216,7 @@ h1 {
     }
 }
 
+
 #settings {
     display: none;
     background-color: red;