html {
  height: 100%;
}

body {
  display: grid;
  gap: 1em;
  grid-template-areas: 'header header' 'code mocha';
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr;
  height: calc(100% - 2em);
  margin: 1em;
}

@media (orientation: portrait) {
  body {
    grid-template-areas: 'header' 'code' 'mocha';
    grid-template-columns: unset;
    grid-template-rows: auto 1fr 1fr;
  }
}

h1 {
  font-family: monospace;
  grid-area: header;
  margin: 0;
}

#code {
  grid-area: code;
}

#mocha {
  grid-area: mocha;
}

#mocha,
#test-code {
  background-color: #111;
  border: solid 1px #333;
  border-radius: 4px;
  overflow: auto;
  position: relative;
  scrollbar-width: thin;
}

#test-code {
  padding: 2em 1em 1em;
}

#test-code__code {
  margin: 0;
}

#mocha {
  margin: 0;
  padding-top: 0.5em;
}

#mocha-report {
  margin-right: 1em !important;
}

#mocha-stats {
  float: right;
  position: relative;
  margin-right: 0.5em !important;
  margin-top: -0.5em !important;
}

.badge {
  background: #333;
  border-radius: 4px;
  font-family: sans-serif;
  font-size: 12px;
  left: 0;
  line-height: 1em;
  padding: 0.3em 0.5em;
  position: absolute;
  top: 0;
}

.shiki {
  margin: 0;
}