:root {
  --monospace: "Roboto Mono", monospace;
  --editor-selection-color: #bad8ec;
}

* {
  box-sizing: border-box;
}

input[type="checkbox"] {
  vertical-align: middle;
}

body {
  background-color: #ecf0f1;
  font-family: "Roboto", sans-serif;
}

h1 {
  text-align: center;
}

.main {
  background-color: white;
  width: 1024px;
  margin: auto;
  padding: 12px 24px;
}

.split {
  display: flex;
}

.toolbar {
  text-align: center;
}

.code-view,
.memory-view {
  display: inline-block;
  vertical-align: top;
}

.code-view {
  width: calc(100% - 460px);
}

.memory-view {
  width: 460px; /* 5 * 92px */
}

.memory-view h3 {
  text-align: center;
  margin-top: 0;
}

.editor {
  font-family: var(--monospace);
  font-size: 16px;
  border: 1px solid #34495e;
  margin: 0;
  position: relative;
  height: 480px;
  width: 100%;
  position: relative;
}

.editor .highlight {
  background-color: #f1c40f;
}

.memory-table {
  border-collapse: collapse;
  width: 100%;
}

.memory-table td {
  border: 1px solid #bdc3c7;
  width: 92px;
  height: 38px;
  vertical-align: bottom;
  text-align: center;
  position: relative;
  font-family: var(--monospace);
}

.memory-table .memory-description {
  position: absolute;
  background-color: #2c3e50;
  color: #ecf0f1;
  font-size: 12px;
  padding: 2px 4px;
  text-align: left;
  top: -4px;
  left: 2px;
  border-radius: 2px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: calc(100% - 4px);
}

.memory-table .memory-description:hover {
  text-overflow: initial;
  max-width: none;
  z-index: 51;
}

.memory-table th {
  font-weight: normal;
  vertical-align: bottom;
  padding-right: 4px;
  text-align: right;
  width: 54px;
}

.output {
  margin: 24px 0;
}

.output .error {
  background-color: #ffe3e0;
  color: #c0392b;
  padding: 4px 12px;
  margin: 12px 0;
}

.examples {
  text-align: center;
}

.examples a {
  color: #3c6ebd;
  margin: 0 4px;
}

.share {
  font-style: italic;
  text-align: center;
}

footer {
  text-align: center;
  color: #34495e;
  font-family: var(--monospace);
  font-size: 14px;
}

footer a {
  color: #102233;
}

.CodeMirror-selected {
  background-color: var(--editor-selection-color);
}
.CodeMirror-focused .CodeMirror-selected {
  background-color: var(--editor-selection-color);
}