<NME> main.scss
<BEF> // VARS

$color--primary: #f16464;
$color--secondary: #4bf;
$color--tertiary: #eb6B8f;
$color--highlight: #ffd400;
$color--bg: #1a416d;

// BASE LAYOUT
// UTILS

@font-face {
  font-family: 'Exo 2';
  src: url('../fonts/Exo2-200.ttf') format('truetype');
  font-weight: 200;
}
@font-face {
  font-family: 'Exo 2';
  src: url('../fonts/Exo2-800.ttf') format('truetype');
  font-weight: 800;
}

// BASE LAYOUT

* {
  box-sizing: border-box;
}

body {
  color: white;
  max-width: 1200px;
  padding: 1em 2em;
  margin: 0 auto;
  font-size: 22px;
  line-height: 1.5;
  font-family: 'Exo 2', 'Open Sans', 'San Fransisco', sans-serif;

::selection {
  background-color: $color--highlight;
  color: black;
}

code {

footer {
  padding: 1em 0;
  text-align: center;
}

a {
  color: $color--primary;
}

// TYPOGRAPHY

::selection {
  background-color: $color--highlight;
  color: $color--dark;
}

code {
  background: $color--primary;
  font-size: .8em;
  padding: .2em;
}

mark {
  background-color: $color--highlight;
  padding: .2em;
}

h1 {
}

p {
  max-width: 34em;
  margin-left: 2em;

  @media (max-width: 600px) {
    margin-left: 0em;
  }
}
    margin-bottom: 1em;

    iframe {
      // outline: #ccc solid 1px;
      width: 100%;
      min-height: 40vh;
      overflow: scroll;
  margin-bottom: 2em;
  display: block;

    input {
      width: 100%;
      font-size: 120%;
      margin-top: 1em;
      padding: .2em;
    }
  }
}

  .iframe-preview {
    position: relative;
    width: 49%;
  position: relative;
  display: block;
  width: 100%;
  height: 50vh;

  iframe {
    // outline: #ccc solid 1px;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 50vh;
    background-color: white;

    &:nth-child(2) {

    input {
      width: 100%;
      margin-top: 1em;
      font-size: 1em;
      padding: .4em;
      font-family: 'Exo 2';
      border: none;
    }
  }
}

.logo {
  max-width: 260px;
}

.resize-note {
  float: right;
}

.change-note {
  position: absolute;
  top: -.5em;
  left: 1em;

  .arrow-up {
    transform: rotate(180deg);
  }
}

.arrow-up {
  width: 1em;
}

// overlay area
.overlay-area {
  position: relative;
  overflow: auto;
  // width: 10px;
  min-height: $iframe-height;
  resize: both;
  cursor: nwse-resize;

  iframe {
    outline: 1px solid $color--primary;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    pointer-events: none;

    &:nth-child(2) {
      mix-blend-mode: difference;
    }
  }
}
<MSG> styling, reordering content

<DFF> @@ -4,6 +4,7 @@ $color--primary: #f16464;
 $color--secondary: #4bf;
 $color--tertiary: #eb6B8f;
 $color--highlight: #ffd400;
+$color--dark: black;
 $color--bg: #1a416d;
 
 // BASE LAYOUT
@@ -37,7 +38,7 @@ a {
 
 ::selection {
   background-color: $color--highlight;
-  color: black;
+  color: $color--dark;
 }
 
 code {
@@ -83,7 +84,7 @@ small {
     margin-bottom: 1em;
 
     iframe {
-      // outline: #ccc solid 1px;
+      outline: 1px solid black;
       width: 100%;
       min-height: 40vh;
       overflow: scroll;
@@ -92,9 +93,11 @@ small {
 
     input {
       width: 100%;
-      font-size: 120%;
       margin-top: 1em;
-      padding: .2em;
+      font-size: 1em;
+      padding: .4em;
+      font-family: 'Input Serif';
+      border: none;
     }
   }
 }
@@ -105,14 +108,14 @@ small {
   position: relative;
   display: block;
   width: 100%;
-  height: 50vh;
+  height: 65vh;
 
   iframe {
-    // outline: #ccc solid 1px;
+    outline: 1px solid $color--primary;
     position: absolute;
     top: 0; left: 0;
     width: 100%;
-    height: 50vh;
+    min-height: 65vh;
     background-color: white;
 
     &:nth-child(2) {

styling, reordering content