update

Took 25 hours 49 minutes

public/stylesheets/style.css

@@ -5,7 +5,7 @@
 
 
 :root {
-    cursor: none;
+    cursor: none !important;
 }
 
 
@@ -22,7 +22,7 @@ body {
     scroll-behavior: smooth;
     font-family: "Roboto", serif;
     font-style: normal;
-    cursor: none;
+    cursor: none !important;
 }
 
 
@@ -40,15 +40,35 @@ body {
     height: 9%;
     background-color: #1F5E5F;
     color: white;
+    font-size: 2em;
+    padding-right: 3px;
+    padding-left: 3px;
+
 }
 
 
-
 #title {
-    float: right;
-    width: 100%;
-    font-size: 1.9em;
     text-align: center;
+    float: left;
+    width: calc(100% / 3);
+}
+
+
+#left {
+    font-size: 0.5em;
+    float: left;
+    width: calc(100% / 3);
+    text-align: left;
+    padding-top: 1.2%;
+}
+
+
+#right {
+    float: left;
+    width: calc(100% / 3);
+    text-align: right;
+    font-size: 0.5em;
+    padding-top: 1.2%;
 }
 
 
@@ -108,7 +128,7 @@ body {
 #main {
     display: grid;
     height: 100%;
-
+    padding: 1% 2%;
     grid-template-columns: repeat(3, calc(90% / 3));
     grid-template-rows: repeat(2, calc(90% / 2));
     grid-gap: 10% 5%;
@@ -122,26 +142,44 @@ body {
 #main .drink {
     grid-row: span 1;
     grid-column: span 1;
-    background-color: black;
-    width: 100%;
-    height: 100%;
+    background-color: rgba(57, 57, 57, 0.6);
+    width: 90%;
+    height: 97%;
     display: grid;
     grid-template-columns: 100%;
     grid-template-rows: repeat(3, calc(100% / 3));
-    grid-row-gap: 5%;
+    grid-row-gap: 4%;
     text-align: center;
     border-radius: 30px 10px 30px;
+    color: black;
+    /*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;
+    overflow: hidden;
+    padding-bottom: 1%;
+}
+
+#main .drink:hover {
+    background-color: rgba(57, 57, 57, 0.8);
+    width: 100%;
+    height: 100%;
 }
 
 
 .drink .thumbnail {
     grid-column: span 1;
     grid-row: span 2;
+    margin-left: auto;
+    margin-right: auto;
+    max-height: 100%;
+    overflow: hidden;
+    transition: 0.5s;
 }
 
 
-.drink .name {
+.drink .drinkName {
+    font-family: Ubuntu, sans-serif;
     grid-column: span 1;
     grid-row: span 1;
-    font-size: 140%;
+    font-size: 150%;
 }