:root {
  --black: #282828;
  --dark-grey: #707070;
  --grey: #A9B0C3;
  --light-grey: #DEE7FF;
  --white: #FFFFFF;
  --green: #58FF8B;
  --red: #FF6E57;
  --yellow: #FFE25F;
  --blue: #009EFF;
}

main a:link, main a:visited {
  color: inherit;
  background-color: var(--blue);
  text-decoration: none;
  padding: 0 4px 1px 4px;
  border-radius: 3px;
}

main a:hover, main a:active {
  color: var(--black);
  background-color: var(--yellow);
}

body {
  color: var(--white);
  background-color: var(--black);
  font-size: 14px;
}

p {
  line-height: 1.3em;
  margin: 1.3em 0;
}

nav {
  font-size: 14px;
  line-height: 1.3em;
  background-color: var(--green);
  color: var(--black);
  text-transform: uppercase;
  margin: 5ch;
  padding: 2ch;
  width: 50ch;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  user-select: none;
}

nav a:link, nav a:visited {
  color: inherit;
  text-decoration: none;
}

nav a:hover, nav a:active {
  color: var(--green);
  background-color: var(--black);
}

nav > * {
  padding: 1px 6px;
  display: block;
}

nav .exercise::before {
  content: '» ';
}

nav .exercise.done::after {
  content: ' ✓';
  float: right;
}

nav .title {
  font-weight: bold;
}

nav .disabled {
  opacity: 0.5;
}

main {
  margin: 0ch 5ch 10ch 60ch;
  max-width: 80ch;
}

iframe {
  height: 450px;
  min-height: 350px;
  max-height: 80vh;

  width: 700px;
  min-width: 600px;
  max-width: 100%;

  resize: both;
}

:not(a) > code {
  border-radius: 3px;
  background-color: var(--dark-grey);
  padding: 0 4px 1px 4px;
}

code.hljs {
  padding: 1.5em;
}

/* Highlight.js styles */
.hljs-comment,.hljs-quote{color:#969896}.hljs-variable,.hljs-template-variable,.hljs-tag,.hljs-name,.hljs-selector-id,.hljs-selector-class,.hljs-regexp,.hljs-deletion{color:#d54e53}.hljs-number,.hljs-built_in,.hljs-builtin-name,.hljs-literal,.hljs-type,.hljs-params,.hljs-meta,.hljs-link{color:#e78c45}.hljs-attribute{color:#e7c547}.hljs-string,.hljs-symbol,.hljs-bullet,.hljs-addition{color:#b9ca4a}.hljs-title,.hljs-section{color:#7aa6da}.hljs-keyword,.hljs-selector-tag{color:#c397d8}.hljs{display:block;overflow-x:auto;background:black;color:#eaeaea;padding:.5em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}