#editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

*, *:after, *:before { box-sizing: inherit; }

article, aside { position: relative; }

html, body {
  box-sizing: border-box;
  font-family: arial, helvetica, tahoma, sans-serif;
  height: 100%;
  margin: 0;
  padding: 0;
}

main {
  align-items: stretch;
  display: flex;
  height: 100%;
}

main > * { flex: 1 0 50%; }

.btn-begin {
  background: #F0F0F0;
  border-radius: 12px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: block;
  font-weight: bold;
  margin: 0 auto;
  padding: 2ex 3ex;
  text-align: center;
  transition: background 2000ms, box-shadow 200ms;
}

.btn-begin:hover {
  background: lightSteelBlue;
  box-shadow: 0 6px 5px 0 rgba(0, 0, 0, 0.1);
}

.code { flex: 1 1 50%; }

.congratulations {
  opacity: 0;
  display: none;
}

.content {
  flex: 1 1 50%;
  height: 100%;
  overflow: scroll;
  padding: 0 1em 3em;
}

.koan h3 { padding: 0.5ex 0; }

[class*="test--"] {
  display: flex;
  padding: 1ex;
}

.test--failing {
  border-left: 5px solid lightSalmon;
  display: none;
}

.test--failing:first-of-type,
.test--passing + .test--failing { display: flex; }

.test-index { flex: 0 1 4em; text-align: right; }
.test-title { flex: 1 0; }
.test-title p:first-of-type { margin-top: 0; }

.test-index, .passing-test-title { opacity: 0.3; transition: 200ms; }

.test--passing:hover .test-index, .test--passing:hover .passing-test-title { opacity: 1; }

.passing-test-title {
  display: inline-block;
}

blockquote {
  font-family: serif;
  font-size: 1.3em;
  opacity: 0.4;
  transition: 1s;
}
blockquote:hover { opacity: 1; }

blockquote:after,
blockquote:before { content: "\""; display: inline; }

h1 { font-size: 1.75em; }
h2 { font-size: 1.55em; }
h3 { font-size: 1.35em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1.15em; }
h6 { font-size: 1em; }

.walking-the-path .content { padding-top: 1em; transition: 200ms; }

.walking-the-path .content > section,
.walking-the-path .the-path,
.walking-the-path .btn-begin { display: none; }

.results { opacity: 0; transition: 1s; }
.walking-the-path .results { opacity: 1; }

.walking-the-path h1,
.walking-the-path h2,
.walking-the-path h3,
.walking-the-path h4,
.walking-the-path h5,
.walking-the-path h6 { font-weight: 100; margin: 0; }

.walking-the-path h1 { font-size: 1.2em; transition: 200ms; }

.walking-the-path .intro h2 { display: none; }

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.finished h3 { font-size: 1em; transition: 1s; }

.finished .content > .congratulations {
  animation: 1s 400ms fadeIn;
  animation-fill-mode: forwards;
  display: block;
}

.finished .koan > *:not([data-koan]) {
  opacity: 0;
  transition: 1s;
}