close #11 and fix bugs on timers

Took 1 hour 14 minutes

public/stylesheets/main.css

@@ -8,6 +8,7 @@
     grid-template-columns: repeat(3, calc(90% / 3));
     grid-template-rows: repeat(2, calc(90% / 2));
     grid-gap: 9% 5.5%;
+    overflow-x: hidden;
 }
 
 
@@ -33,9 +34,9 @@
 
 
 #main .drink:hover {
-    background-color: rgba(57, 57, 57, 0.8);
-    width: 100%;
-    height: 100%;
+    background-color: rgba(22, 67, 113, 0.8);
+    /*width: 100%;
+    height: 100%;*/
 }
 
 

public/stylesheets/style.css

@@ -187,7 +187,7 @@ h2 {
 #overlay #bottom #menuContainers {
     height: 100%;
     display: grid;
-    grid-template-columns: repeat(14,1fr);
+    grid-template-columns: repeat(14, 1fr);
     grid-auto-flow: column;
     direction: rtl;
     grid-template-rows: 100%;
@@ -195,15 +195,16 @@ h2 {
     padding: 1% 2% 0.2%;
 }
 
+
 #menuContainers .container {
     text-align: center;
     border-radius: 0 0 30% 30%;
     border: 1px solid black;
     border-top-color: transparent;
     padding-top: 18%;
-    background-color: #5b5b9b;
+    background-color: #5B5B9B;
     transition: all 1s;
-    transition: background-color 3s;
+    transition: background-color 9s;
     direction: ltr;
 
 }
@@ -279,28 +280,40 @@ h2 {
     transition: visibility 0.8s;
 }
 
+
 .tooltip {
     position: relative;
     display: inline-block;
 }
 
+
 .tooltip .tooltiptext {
-    visibility: hidden;
-    width: 100px;
+    opacity: 0;
+    width: 110px;
     background-color: #214B74;
-    color: #fff;
+    color: #FFFFFF;
     text-align: center;
     border-radius: 8px;
     padding: 5px 0;
-
     /* Position the tooltip */
     position: absolute;
     z-index: 1;
-    bottom: 45%;
+    bottom: 40%;
     left: 50%;
-    margin-left: -60px;
+    margin-left: -80px;
 }
 
+
+@keyframes blendIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 100%;
+    }
+}
+
+
 .tooltip:hover .tooltiptext {
-    visibility: visible;
+    animation: blendIn 0.5s ease forwards;
 }