apply everything to ts; add temp layout

public/stylesheets/style.css

@@ -1,8 +1,107 @@
+
 body {
-  padding: 50px;
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+
+    scroll-behavior: smooth;
 }
 
-a {
-  color: #00B7FF;
+#overlay {
+    color: white;
 }
+
+#overlay #top {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 9%;
+    background-color: #1F5E5F;
+    color: white;
+}
+
+#title, #time {
+    width:50%;
+    float:right;
+    text-align:left;
+}
+#time {
+    width:100%;
+    font-size: 1.9em;
+    text-align:center;
+}
+
+
+#overlay #bottom {
+    display: block;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 9%;
+    background-color: #1F5E5F;
+}
+
+#overlay #bottom #menuBtn {
+    height: 100%;
+    width: 10%;
+    background-color: blue;
+    padding: 1px;
+    font-size: 1.5em;
+    border: 0;
+    border-radius: 3px;
+    color: white;
+}
+
+
+#container {
+    position: absolute;
+    top: 10%;
+    left: 1%;
+    background-color: lightseagreen;
+    right: 1%;
+    height: 80%;
+}
+
+
+#menu {
+    display: none;
+    background-color: blue;
+    width: 100%;
+    height: 100%;
+}
+
+
+#settings {
+    display: none;
+    background-color: red;
+    width: 100vw;
+    height: 100vh;
+}
+
+
+#main::-webkit-scrollbar {
+    display: none;
+}
+
+
+#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%;
+    overflow: auto;
+    ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+    scroll-behavior: smooth;
+}
+
+
+#main .drink {
+    grid-row: span 1;
+    grid-column: span 1;
+    background-color: black;
+    width: 100%;
+    height: 100%;
+}