fix some responsiveness issues and width

css/main.css

@@ -133,6 +133,9 @@ span>a:active {
     min-height: 100vh;
     z-index: 1;
     background-color: #424242;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 #wrapper:before {
@@ -170,7 +173,8 @@ section h1 {
     margin-top: 0.5em;
 }
 
-section h2 {
+section h2,
+#intro-title {
     width: 100%;
     font-size: 2.1em;
     font-weight: bold;
@@ -180,10 +184,6 @@ section h2 {
     text-align: left;
 }
 
-#intro-title {
-    width: 100%;
-}
-
 #intro-text {
     text-align: center;
     width: calc(50% - 8vw);
@@ -218,9 +218,8 @@ section h2 {
 }
 
 #letter {
-    width: calc(100% - 2em);
+    width: 100%;
-    margin: 0 1em;
+    font-size: 1.2em;
-    font-size: 1.1em;
     display: inline-block;
     text-align: left;
     color: #fff;

css/responsive.css

@@ -2,25 +2,19 @@
     #dome {
         display: none;
     }
-    #banner > h1 {
+    #banner>h1 {
         display: none;
     }
-    #wrapper {
+    #wrapper,
+    footer {
         top: 48px;
     }
+    #intro-text {
+        margin: 0 5vw;
+    }
 }
 
-@media screen and (max-width: 950px) {
+@media screen and (max-width: 1100px) {
-    #intro-text,
-    #intro-image,
-    #tweets,
-    #tweets,
-    #feedback {
-        width: 100%;
-    }
-    #letter {
-        font-size: 1.4em;
-    }
     #dome:after {
         background-position-y: 5vh;
         background-size: 100%;
@@ -30,6 +24,7 @@
         display: block;
         top: 0;
         position: fixed;
+        box-shadow: 0 28rem 79rem 0 rgba(91, 194, 182, .08), 0 40rem 32rem 0 rgba(0, 0, 0, .04);
     }
     #menu-toggle {
         position: absolute;
@@ -64,7 +59,7 @@
         height: 100vh;
         top: 0;
         left: -30vw;
-        padding-top: 10vh;
+        padding-top: 5vh;
         display: block;
         position: fixed;
         z-index: 2;
@@ -74,6 +69,27 @@
     }
 }
 
+@media screen and (max-width: 1000px) {
+    #intro-text,
+    #intro-image,
+    #tweets,
+    #feedback {
+        width: 100%;
+    }
+    section {
+        max-width: 750px;
+    }
+}
+
+@media screen and (min-width: 1100px) {
+    #intro-text,
+    #intro-image,
+    #tweets,
+    #feedback {
+        max-width: 550px;
+    }
+}
+
 @media screen and (min-width: 1800px) {
     #letter {
         font-size: 1.4em;

js/sidebar.js

@@ -3,17 +3,29 @@ var mb = document.querySelector("#menu-toggle"),
     tb = document.querySelector("#banner h1"),
     wr = document.querySelector("#wrapper");
 
-mb.addEventListener("click", function(){toggleSidebar(true)}, false);
+mb.addEventListener("click", function () {
-wr.addEventListener("click", function(){toggleSidebar(false)}, false);
+    toggleSidebar(true)
-tb.addEventListener("click", function(){toggleSidebar(false)}, false);
+}, false);
-mb.addEventListener("touchleave", function(){toggleSidebar(true)}, false);
+wr.addEventListener("click", function () {
-wr.addEventListener("touchleave", function(){toggleSidebar(false)}, false);
+    toggleSidebar(false)
-tb.addEventListener("touchleave", function(){toggleSidebar(false)}, false);
+}, false);
+tb.addEventListener("click", function () {
+    toggleSidebar(false)
+}, false);
+mb.addEventListener("touchleave", function () {
+    toggleSidebar(true)
+}, false);
+wr.addEventListener("touchleave", function () {
+    toggleSidebar(false)
+}, false);
+tb.addEventListener("touchleave", function () {
+    toggleSidebar(false)
+}, false);
 sb.style.disabled = true;
 
 
 function toggleSidebar(toggleOpenAllowed) {
-    if((sb.style.left == "" || sb.style.left == "-30vw") && toggleOpenAllowed) {
+    if ((sb.style.left == "" || sb.style.left == "-30vw") && toggleOpenAllowed) {
         sb.style.disabled = false;
         sb.style.left = "0px";
     } else {