add modals and menus

public/stylesheets/style.css

@@ -1,13 +1,19 @@
+@import url("https://fonts.gaminggeneration.de/Roboto.css");
+
 
 body {
-
+    color: white;
     scroll-behavior: smooth;
+    font-family: "Roboto", serif;
+    font-style: normal;
 }
 
+
 #overlay {
     color: white;
 }
 
+
 #overlay #top {
     display: block;
     position: fixed;
@@ -19,15 +25,13 @@ body {
     color: white;
 }
 
-#title, #time {
-    width:50%;
-    float:right;
-    text-align:left;
-}
-#time {
-    width:100%;
+
+
+#title {
+    float: right;
+    width: 100%;
     font-size: 1.9em;
-    text-align:center;
+    text-align: center;
 }
 
 
@@ -41,6 +45,7 @@ body {
     background-color: #1F5E5F;
 }
 
+
 #overlay #bottom #menuBtn {
     height: 100%;
     width: 10%;
@@ -48,7 +53,7 @@ body {
     padding: 1px;
     font-size: 1.5em;
     border: 0;
-    border-radius: 3px;
+    border-radius: 0 8px 0 0;
     color: white;
 }
 
@@ -57,7 +62,6 @@ body {
     position: absolute;
     top: 10%;
     left: 1%;
-    background-color: lightseagreen;
     right: 1%;
     height: 80%;
 }
@@ -87,7 +91,7 @@ body {
 #main {
     display: grid;
     height: 100%;
-    background-color: red;
+
     grid-template-columns: repeat(3, calc(90% / 3));
     grid-template-rows: repeat(2, calc(90% / 2));
     grid-gap: 10% 5%;
@@ -104,4 +108,20 @@ body {
     background-color: black;
     width: 100%;
     height: 100%;
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: repeat(3, calc(100% / 3));
+    grid-row-gap: 5%;
+    text-align: center;
+    border-radius: 30px 10px 30px;
+}
+
+.drink .thumbnail {
+    grid-column: span 1;
+    grid-row: span 2;
+}
+.drink .name {
+    grid-column: span 1;
+    grid-row: span 1;
+    font-size: 140%;
 }