:root {
  --real-black: #000;
  --near-black: #111;
  --darkest-gray: #222;
  --dark-gray: #333;
  --light-gray: #999;
  --real-white: #fff;

  --dark-blue: #002;
  --dark-purple: #202;
  --dark-green: #020;
  --dark-maroon: #200;
  --dark-red: #600;
  --lavender: #99b;

  --purple: #c6f;
  --red: #f33;
  --orange: #f93;
  --cyan: #3cf;
  --green: #6c6;
  --blue: #33f;
}
* {
  box-sizing: border-box;
  cursor: inherit;
  margin: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
a, button {
  &:hover {
    translate: 0 -0.1rem;
  }
}
a.button, button {
  border: none;
  cursor: pointer;
  display: inline-block;
  font-family: monospace;
  font-size: 1rem;

  &.primary {
    background-color: var(--blue);
    border-radius: 0.5rem;
    color: var(--real-white);
    font-weight: bold;
    height: 3rem;
    line-height: 3rem;
    padding: 0 1.5rem;
    white-space: nowrap;
  }

  &.secondary {
    background-color: var(--near-black);
    border: 0.1rem solid var(--lavender);
    border-radius: 0.5rem;
    color: var(--real-white);
    font-weight: bold;
    height: 3rem;
    line-height: 3rem;
    padding: 0 1.5rem;
    white-space: nowrap;
  }

  &.ternary {
    background-color: transparent;
    border-bottom: 0.2rem solid var(--dark-gray);
    color: var(--lavender);
    padding: 0.5rem 1rem;

    &.active, &:hover {
      border-color: var(--orange);
      color: var(--real-white);
    }
  }
}
code {
  background-color: var(--dark-blue);
  border-radius: 0.5rem;
  box-shadow: 0 0 4rem var(--cyan);
  display: block;
  max-width: 100%;
  overflow: auto;
  padding: 0 1rem 1rem;
  white-space: pre-line;
  width: 30rem;

  .indented:before {
    content: "\a0\a0\a0\a0";
  }
}
footer {
  background-color: var(--real-black);
  border-top: var(--dark-gray) 0.1rem solid;
  color: var(--lavender);
  align-items: center;
  display: flex;
  font-family: monospace;
  gap: 1rem;
  justify-content: space-between;
  line-height: 1.5rem;
  padding: 1.75rem 2rem;

  .comment {
    white-space: normal;
  }

  .end-of-file {
    color: var(--real-white);
  }
}
h1, h2, h3 {
  letter-spacing: -0.03em;
  line-height: 0.95em;
}
h1 {
  font-size: 8vw;
}
h2 {
  font-size: 6vw;
}
h3 {
  font-size: 6vw;
}
html {
  background-color: var(--near-black);
  color: var(--real-white);
  font-family: sans-serif;
  font-size: 16px;
}
img#logo {
  border-radius: 0.25rem;
  display: block;
  height: 3rem;
  width: 3rem;
}
main {
  display: flex;
  flex-direction: column;

  &.index {
    > header {
      background-color: var(--real-black);
      border-bottom: var(--dark-gray) 0.1rem solid;
      align-items: center;
      display: flex;
      justify-content: space-between;
      padding: 0.5rem 2rem;

      a.button.primary {
        height: 2.5rem;
        line-height: 2.5rem;
        padding: 0 1rem;
      }
    }

    p {
      color: var(--lavender);
      margin: 2rem 0;
    }
  }

  &.trainer {
    gap: 1rem;
    margin: 0 2rem;

    > header {
      align-items: center;
      border-bottom: var(--dark-gray) 0.1rem solid;
      display: flex;
      gap: 4rem;
      margin: 0 -2rem;
      padding: 0.5rem 2rem;
    }
  }
}
nav {
  display: flex;
  font-family: monospace;
  gap: 2.5rem;

  @media (width < 48rem) {
    display: none;
  }

  a {
    color: var(--lavender);

    &:hover {
      color: var(--real-white);
    }
  }
}
section {
  padding: 4rem 2rem;

  > header {
    color: var(--orange);
    font-family: monospace;
    margin: 1rem 0;
  }
}
section#the-basics {
  background-image: linear-gradient(to right, var(--darkest-gray) 0.1rem, transparent 0.1rem),
                    linear-gradient(to bottom, var(--darkest-gray) 0.1rem, transparent 0.1rem);
  background-position: 1.5rem 1.5rem;
  background-size: 3rem 3rem;

  #basicbuttonrow {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
  }

  ul {
    color: var(--real-white);
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    list-style-type: none;
    margin: 2rem 0;

    li {
      &:before {
        color: var(--purple);
        content: "✓";
        font-size: 1.5rem;
      }
    }
  }
}
section#syntax {
  ul {
    color: var(--real-white);
    display: flex;
    flex-wrap: wrap;
    font-family: monospace;
    gap: 2rem;
    list-style-type: none;

    li {
      background-color: var(--dark-green);
      box-shadow: 0 0 1rem var(--green);
      border-radius: 1rem;
      flex-grow: 1;
      overflow: hidden;
      padding: 1rem 2rem 2rem;
      position: relative;
      width: max(18rem, calc((100% - 4rem) / 3));

      &::after {
        border-radius: 50%;
        bottom: 2rem;
        content: '';
        height: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        right: 2rem;
        transition: opacity 0.3s;
        width: 0;
      }

      &:hover::after {
        opacity: 0.4;
      }

      &:nth-child(5n+1) {
        h3 { color: var(--cyan); }
        &::after { box-shadow: 0 0 6rem 4rem var(--cyan); }
      }

      &:nth-child(5n+2) {
        h3 { color: var(--orange); }
        &::after { box-shadow: 0 0 6rem 4rem var(--orange); }
      }

      &:nth-child(5n+3) {
        h3 { color: var(--purple); }
        &::after { box-shadow: 0 0 6rem 4rem var(--purple); }
      }

      &:nth-child(5n+4) {
        h3 { color: var(--green); }
        &::after { box-shadow: 0 0 6rem 4rem var(--green); }
      }

      &:nth-child(5n+0) {
        h3 { color: var(--red); }
        &::after { box-shadow: 0 0 6rem 4rem var(--red); }
      }

      div:nth-child(2) {
        font-weight: bold;
        margin: 1rem 0 0.5rem;
      }

      div:nth-child(3) {
        color: var(--lavender);
      }
    }
  }
}
section#examples {
  #example-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 3rem 0;
  }
}
section#how-it-works {
  ul {
    color: var(--real-white);
    display: flex;
    flex-wrap: wrap;
    font-family: monospace;
    gap: 2rem;
    list-style-type: none;
    margin: 2rem 0;

    li {
      background-color: var(--dark-purple);
      box-shadow: 0 0 1rem var(--purple);
      border-radius: 1rem;
      flex-grow: 1;
      padding: 2rem;
      width: max(18rem, calc((100% - 4rem) / 3));

      h3 {
        font-size: 1.5rem;
      }

      p {
        color: var(--lavender);
        line-height: 1.25rem;
        margin: 1.5rem 0 0;
      }
    }
  }
  div {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
  }
}
span {
  white-space: nowrap;

  &.syntax-error, &.everything, &.repeat, &.use-it {
    color: var(--red);
  }

  &.python-program, &.tiny-things, &.check, &.learn-it {
    color: var(--green);
  }

  &.comment {
    color: var(--orange);
  }

  &.check, &.repeat, &.use-it, &.own-it {
    &:before {
      color: var(--real-white);
      content: "-\202F-\202F-\a0";
      display: inline-block;
      text-align: center;
    }
  }
}
#instruction {
  color: var(--lavender);
  font-size: 1rem;
  font-weight: normal;
  letter-spacing: normal;
  line-height: normal;
  margin: 0.5rem 0;
}
#editor {
  border: 0.1rem solid var(--dark-gray);
  border-radius: 0.5rem;
  display: flex;
  font-family: monospace;
  height: 14rem;
  max-width: 54rem;
  overflow: hidden;
  width: 100%;
}
#linenumbers {
  background-color: transparent;
  border-right: var(--dark-gray) 0.1rem solid;
  color: var(--lavender);
  font-family: monospace;
  line-height: 1.5rem;
  padding: 1rem;
  overflow: hidden;
  text-align: right;
  white-space: pre;
}
#code {
  background-color: var(--dark-blue);
  border: 0;
  box-sizing: border-box;
  color: var(--real-white);
  display: block;
  font-family: monospace;
  font-size: 1rem;
  line-height: 1.5rem;
  outline: none;
  overflow: hidden;
  padding: 1rem;
  width: 100%;
}
#buttonrow {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
#syntaxerror {
  background-color: var(--dark-maroon);
  border: 0.1rem solid var(--dark-red);
  border-radius: 0.5rem;
  box-sizing: border-box;
  color: var(--real-white);
  font-family: monospace;
  max-width: 54rem;
  padding: 1rem;
  white-space: pre;
  width: 100%;
}
.hidden {
  display: none !important;
}
.hint {
  color: var(--lavender);
}
.message {
  align-items: center;
  border-radius: 1rem;
  border: transparent 0.1rem solid;
  color: var(--real-white);
  display: flex;
  height: 2rem;
  padding: 0 1rem;
  position: absolute;
  right: 2rem;
  top: 1rem;

  &:before {
    content: "";
    border-color: inherit;
    border-style: solid;
    border-radius: 50%;
    border-width: 0.4rem;
    display: inline-block;
    height: 0;
    margin-right: 1rem;
    width: 0;
  }

  &.animate {
    opacity: 0;
    transition: opacity 5s ease-in;
  }

  &#loading {
    border-color: var(--blue);
  }

  &#success {
    border-color: var(--green);
  }

  &#failure, &#changed {
    border-color: var(--red);
  }

  &#mouseclick {
    border-color: var(--orange);
  }
}