$fadedOrange: #F6E3CE;

html, body {
  height: 100vh;
}

section {
  margin: 2rem 0;
}

.jslab-container {
  padding: {
    left: 5vw;
    right: 5vw;
  }
}

.btn-gh {
  a {
    color: white;
  }
}

.repl {
  padding: {
    top: 2rem;
    bottom: 2rem;
  }
}

.canvas {
  background-color: $fadedOrange;
}

.app-logo {
  height: 6em;
}

.ace_editor {
  height: 50vh;
  margin-top: 2vh;
}

pre {
  white-space: initial;
  padding-left: 2vw;
}

.warning,
.tip {
  padding: 1rem;
  margin: 2rem 0;
}

.code-example {
	white-space: pre-wrap;
}

._cssdeck_embed {
  border: 1px solid #3c404b;
  width: 101%;
  min-height: 95vh;
}

.gh-link {
  margin-top: 20vh;
}
$fadedOrange: #F6E3CE;

html, body {
  height: 100vh;
}

section {
  margin: 2rem 0;
}

.jslab-container {
  padding: {
    left: 5vw;
    right: 5vw;
  }
}

.btn-gh {
  a {
    color: white;
  }
}

.content {
  position: absolute;
  top: 0rem;
  left: 5rem;
  height: 100%;
  width: 45%;
  overflow-y: scroll;
}

.repl {
  position: absolute;
  top: 0rem;
  right: 0rem;
  height: 100%;
  width: 55%;
  overflow-y: scroll;
  padding: {
    top: 2rem;
    bottom: 2rem;
  }
}

.canvas {
  background-color: $fadedOrange;
}

.app-logo {
  height: 6em;
}

.ace_editor {
  height: 50vh;
  margin-top: 2vh;
}

pre {
  white-space: initial;
  padding-left: 2vw;
}

.warning,
.tip {
  padding: 1rem;
  margin: 2rem 0;
}

.code-example {
	white-space: pre-wrap;
}

._cssdeck_embed {
  border: 1px solid #3c404b;
  width: 101%;
  min-height: 95vh;
}

.gh-link {
  margin-top: 20vh;
}
Make the content and repl sections separately scrollable.
Make the content and repl sections separately scrollable.
