html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  color: #606c76;
  font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: 1.6em;
  font-weight: 300;
  letter-spacing: .01em;
  line-height: 1.6;
  --border-color: #ccc;
}

.title {
  padding: 0 1.0rem;
}

.dark {
  background-color: #0c1021;
}

.h-100 {
  height: 100%;
}

.h-50 {
  height: 50%;
}

.w-50 {
  flex: 0 0 50%;
}

.grow {
  flex-grow: 1;
}

.row {
  display: flex;
  width: 100%;
}

.CodeMirror {
  height: 100%;
}

#code {
  overflow: auto;
}

#result {
  white-space: pre;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1 0 0;
}

.card {
  display: flex;
  flex-direction: column;
}

.b-gap-x > * {
  border-right: 1px solid var(--border-color);
}

.b-gap-x > *:last-child {
  border-right: none;
}

.b-gap-y > * {
  border-bottom: 1px solid var(--border-color);
}

.b-gap-y > *:last-child {
  border-bottom: none;
}