tutorialStyle.css

* {
    font-family: 'Source Code Pro', Monaco, Consolas, "Lucida Console", monospace;
}
body {
    background-color: #666;
}
.header {
    background-color: #999; /*set the background-color*/
    font-size: 100%;    /*set the font-size to 100% (note the %)*/
    text-align: center; /*set the text-align value to center*/
    width: 50%; /*we'll establish the width at 50%*/
    margin-left: 25%; /*as we've set the width to 50% we can set the margin-left at 25% thereby centering the element*/ 
}

.container {
    border: thin solid black;
    height: 80%;
    width: 80%;
    display: flex; /* Hey Alex... FLEXBOX! */
    margin: auto;
}

#fixed {
    border: thin solid black;
    min-height: 10vh;
    margin: auto;
    text-align: center;
    padding: 2%;
    overflow: auto;
}

p#enter {
    font-size: 80%;
    line-height: 10%;
    vertical-align: top;
}

#inset {
   background-color: #1a1a1a;
   color: #2cbda9;
   height: 100%;
   width: 100%;
   min-width: 30vh;
   overflow: auto;
   align-self: center;
   display: flex;
   flex-direction: column-reverse;
 }

 .bottom {
   display: flex;
   background-color: #333;
   height: 40px;
   width: 80%;
   display: flex;
   margin: auto;
   font-size: 1.25em;
 }

input {
         border-style: none;
         background-color: #333;
     }
     #inputName {
         color: #ff323b;
         font-size: 1em;
         text-align: center;
     }
     #inputMsg {
         flex: 2;
         /*FLEXBOX! This flex setting allows us to span the input to the entire div*/
         font-size: 1em;
         padding-left: 1%;
         /*When adjusting the blank space, remember to stay responsive!*/
         background-color: #333;
         color: #ff323b;
     }
     li#msg {
         margin-right: 5%;
         list-style-type: none;
     }