smooth scroll and more mobile

css/main.css

@@ -98,10 +98,15 @@ textarea {
     box-sizing: border-box;
 }
 
+header{
+    display: none;
+}
+
+
 body{
     background-color: #dadae6;
     font-family: monospace;
-    padding-left: 14rem
+    padding-left: 14rem;
 }
 
 
@@ -169,8 +174,8 @@ nav li ul li ul li{
 main{
     padding: 2rem;
     max-width: 50rem;
-    margin-left: auto;
-    margin-right: auto;
+    margin-left: 12rem;
+    padding-top: 4rem;
 }
 
 h3{
@@ -267,13 +272,48 @@ button.color-button{
     background-color: green;
 }
 
-@media only screen and (max-width: 49em) {
+@media only screen and (max-width: 64.5rem) {
     nav{
-        display: none;
+        bottom: 0;
+        height: calc(100vh - 3.2rem);
+        left: -24rem;
+        transition: left 0.5s ease;
     }
+
+    nav.show{
+        left: 0;
+        z-index: 5;
+
+    }
+
     body{
         padding: 0;
     }
+    main{
+
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    header{
+        display: block;
+    background-color: #bdbdcc;
+    position: fixed;
+    top: 0;
+    left: 0;
+        width: 100%;
+        padding: .5rem;
+        z-index: 10;
+}
+button#menu{
+    background-color: transparent;
+    background-repeat: no-repeat;
+    border: none;
+    font-size: 1.1rem;
+}
+    buton img{
+        background-color: transparent;
+    }
 }
 
 @media only screen and (max-width: 37em) {