Header/footer creation, css updates, buffer clear on mode change

src/css/App.css

@@ -1,10 +1,13 @@
-html, body {
-  margin: 0px;
-  padding: 0px;
-  height: 100%;
-  width: 100%;
+* {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
+  margin: 0px;
+  padding: 0px;
+}
+
+html, body {
+  height: 100%;
+  width: 100%;
   background: #444;
 }
 
@@ -13,13 +16,31 @@ html, body {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   width: 100%;
+  border: 3px solid green;
+}
+
+header {
+  margin-top: 100px;
+}
+
+#main-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  width: 95vw;
+  border: 1px solid red;
 }
 
 .mode-picker {
@@ -74,18 +95,6 @@ html, body {
   margin: 4px;
 }
 
-#main-content {
-  width: 95vw;
-  border: 1px solid red;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-}
-
 #morseButton {
   width: 100px;
   height: 100px;
@@ -114,7 +123,8 @@ html, body {
 }
 
 .paddle {
-  font-size: 60px;
+  font-size: 1rem;
+  color: transparent;
   width: 100px;
   height: 100px;
   background: goldenrod;
@@ -125,24 +135,29 @@ html, body {
 }
 
 .paddle#left {
-  border-radius: 20% 0 0 20%;
-}
-
-.paddle#right {
-  border-radius: 0 20% 20% 0;
-}
-
-.paddle.showPaddles {
-  width: 250px;
-  height: 100px;
+  border-radius: 50px 0 0 50px;
 }
 
 .paddle#left.showPaddles {
   margin-right: 7px;
+  border-radius: 20px 0 0 20px;
+}
+
+.paddle#right {
+  border-radius: 0 50px 50px 0;
 }
 
 .paddle#right.showPaddles {
   margin-left: 7px;
+  border-radius: 0 20px 20px 0;
+}
+
+.paddle.showPaddles {
+  color: #000;
+  font-size: 2.5rem;
+  font-weight: bold;
+  width: 250px;
+  height: 100px;
 }
 
 #challengeWord {
@@ -186,11 +201,6 @@ html, body {
   background: rgba(0, 200, 0, 0.7);
 }
 
-.strike {
-  text-decoration: line-through;
-  opacity: 30%;
-}
-
 #morseBufferDisplay, #challengeBufferDisplay {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -287,6 +297,11 @@ html, body {
   font-size: 20px;
 }
 
+.strike {
+  text-decoration: line-through;
+  opacity: 30%;
+}
+
 .morseError {
   background: rgba(255, 0, 0, 0.4);
   color: #780000;