body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: "Open Sans";
}

/* Header */

header {
  display: flex;
  justify-content: center;
  border-bottom: 4px solid var(--border-color);
  padding: 24px 24px 0;
  margin-bottom: var(--spacing-standard);
  background: var(--grey-500);
}

.header-content {
  width: 100%;
  max-width: var(--content-width);
}

/* Footer */

footer {
  display: flex;
  justify-content: center;
  background: var(--grey-500);
  border-top: 4px solid var(--border-color);
  color: var(--white);
  padding: var(--spacing-big) var(--spacing-standard);
  margin-top: var(--spacing-small);
}

.footer-content {
  width: 100%;
  max-width: var(--content-width);

  display: flex;
  flex-direction: column;
}

.footer-link {
  color: var(--blue-100);
}

p.sign-off {
  margin: 0 0 0 var(--spacing-big);
}

/* Main navigation */

.main-navigation {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.main-navigation-list {
  width: 100%;
  list-style: none;
  margin: 0;
}

.main-navigation-item {
}

.main-navigation-item.active {
  font-weight: 700;
}

/* Logo */

.logo {
  font-family: "Fredoka One";
  font-size: 36px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--accent-300);
}

/* Headings */

h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: var(--spacing-standard);
}

h2 {
  font-size: 20px;
  font-weight: 700;
  margin: var(--spacing-small) 0;
}

h3 {
  font-size: 16px;
  font-weight: 700;
  margin: var(--spacing-small) 0;
}

/* Text */

p {
  font-size: 16px;
  margin-bottom: var(--spacing-small);
  line-height: 1.5;
}

/* Lists */

ol,
ul {
  margin-bottom: var(--spacing-small);
  padding: 0;
  list-style-position: inside;
}

li {
  padding: 8px 0;
  line-height: 1.5;
}

/* Table */

table {
  border-collapse: collapse;
  /* Parent flexbox with align-items start or stretch causes
  table to be full width. */
  display: block;
}

table > thead {
  text-align: left;
  background: var(--grey-100);
}

td,
th {
  width: 200px;
}

td,
th {
  border: 1px solid var(--grey-200);
  padding: 4px;
  font-size: 14px;
}

/* Grid stuff mainly copied from MDN */
.layout {
  margin: 0 auto;
  max-width: 1200px;
  display: grid;
  gap: var(--spacing-big);
  grid-template-areas: "toc main empty";
  grid-template-columns: 128px var(--content-width) 128px;
  justify-content: center;
}

@media screen and (max-width: 1024px) {
  .layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px;
  }
}

/* Aside */

aside {
  border-left: 4px solid var(--border-color);
  padding-left: 16px;
  margin-bottom: var(--spacing-small);
}

aside > p {
  color: var(--accent-500);
  font-style: italic;
}

aside > p:last-child {
  margin-bottom: 0;
}

/* Sections */

.content {
  overflow: auto;
  grid-area: main;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 1024px) {
  .content {
    width: 100%;
    max-width: var(--content-width);
  }
}

/* Links */

a {
  outline: none;
  text-decoration: underline;
}

a:link {
  color: var(--link-color);
}

a:visited {
  color: var(--link-color);
}

a:focus {
  background: var(--link-color);
  color: var(--link-color-inverted);
}

a:hover {
  background: var(--link-color);
  color: var(--link-color-inverted);
}

a:active {
  background: var(--link-color);
  color: var(--link-color-inverted);
}

/* Code */

/* Inline code */
code {
  background: var(--code-inline-bg-color);
  color: var(--code-inline-text-color);
  padding: 1px 4px;
  white-space: nowrap;
  font-size: 16px;
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  border-radius: 2px;
}

/* pre + code = code block */
pre {
  background: var(--code-output-bg-color);
  padding: 1em;
  margin: 0 0 var(--spacing-standard);
  overflow: auto;
  border-radius: 0.3em;
}

pre > code {
  background: var(--code-output-bg-color);
  color: var(--code-output-text-color);
  padding: 0;
  white-space: pre;
}

/* Overriding prism.js css */

pre[class*="language-"] {
  margin: 0 0 var(--spacing-standard);
  background: var(--grey-500);
}

.token.comment {
  color: var(--grey-200);
}

.token.keyword {
  color: var(--pink-200);
}

.token.boolean,
.token.number {
  color: var(--blue-100);
}

.token.builtin,
.token.string {
  color: var(--orange-200);
}

/* Exercises */

.exercise {
  border: 1px solid var(--grey-200);
  border-radius: 8px;
  padding: 0 var(--spacing-small);
  margin-bottom: var(--spacing-standard);
}

/*
Hard code numbering because of bad browsers. There's a ::marker pseudo-element which is
apparently not fully implemented on Safari. To make some sort of numbering work on all
browsers you have to mess around with ::before, counter and absolute positioning. Annoying!
*/
.exercise-list {
  list-style-type: none;
}

/* ***************** */
/* Table of contents */
/* ***************** */

.toc {
  grid-area: toc;
  position: sticky;
  top: var(--spacing-big);
  margin-top: 8px;
  height: 320px; /* This is just a random height. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.toc-title {
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.toc-list {
  list-style-type: none;
}

.toc-item {
  padding: 4px 0;
}

.toc-link,
.toc-link:visited,
.toc-link:link {
  color: var(--toc-link-color);
  text-decoration: none;
}

.toc-link.active,
.toc-link:hover {
  color: var(--toc-link-active-color);
  background: none;
}

/* Responsive toc */

/*
  When the hidden checkbox is enabled, the side menu should be shown.
  The checkbox is enabled by toggling the #toc-toggle which is a label
  for the checkbox.
*/
#toc-toggle-hidden-checkbox {
  display: none;
}

#toc-toggle {
  display: none;
  position: fixed;
  top: var(--spacing-small);
  left: var(--spacing-small);
  z-index: 100;
  background: var(--white);
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 8px;
  outline: 2px solid var(--accent-300);
  transition: outline-color 200ms ease-in-out;
}

/* This is a rectangular span. Combine multiple in html to make an icon. */
.toc-toggle-label {
  background: var(--black);
  height: 3px;
  transition: all 100ms;
}

@media screen and (max-width: 1024px) {
  #toc-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 9px;
  }

  #toc-toggle-hidden-checkbox:checked ~ #toc-toggle {
    border: none;
    outline: none;
  }

  /*
    Reworked from: https://codepen.io/leifriksheim/pen/QMmXjN
    The spans make up the icon. Avoid changing values here.
  */
  #toc-toggle-hidden-checkbox:checked
    ~ #toc-toggle
    > .toc-toggle-label:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  #toc-toggle-hidden-checkbox:checked
    ~ #toc-toggle
    > .toc-toggle-label:nth-child(2) {
    opacity: 0;
  }

  #toc-toggle-hidden-checkbox:checked
    ~ #toc-toggle
    > .toc-toggle-label:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  .toc {
    position: fixed;
    margin-top: 0;
    background: var(--white);
    transition: opacity 200ms ease-in-out;
    top: var(--spacing-small);
    left: var(--spacing-small);
    width: 240px;
    height: 300px;
    opacity: 0;
    border-radius: 8px;
    outline: 2px solid var(--accent-300);
    padding-top: 11px; /* To visually line up close icon */
    visibility: hidden;
  }

  .toc-title {
    margin-left: 60px;
  }

  .toc-list {
    margin-left: 60px;
    width: 128px;
  }

  #toc-toggle-hidden-checkbox:checked ~ .toc {
    opacity: 1;
    visibility: visible;
  }
}