button, a.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(--near-white);
    font-weight: bold;
    padding: 1rem 1.5rem;
  }

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

  &.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;
  overflow: hidden;
  padding: 0 1rem 1rem;
  white-space: pre-line;
  width: 30rem;

  .indented:before {
    content: "\a0\a0\a0\a0";
  }
}
h1, h2, h3 {
  letter-spacing: -0.03em;
  line-height: 0.95em;
}
h1 {
  font-size: 8vw;
}
h2 {
  font-size: 6vw;
}
h3 {
  font-size: 6vw;
}
main {
  > header {
    background-color: var(--real-black);
    border-bottom: var(--dark-gray) 0.1rem solid;
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 1rem 2rem;
  }

  > 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;
    justify-content: space-between;
    padding: 3rem 2rem;

    .end-of-file {
      color: var(--real-white);
    }
  }
}
nav {
  display: flex;
  font-family: monospace;
  gap: 2.5rem;

  a {
    color: var(--lavender);

    &:hover {
      color: var(--real-white);
    }
  }
}
p {
  color: var(--lavender);
  margin: 2rem 0;
}
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;

  #buttonrow {
    display: flex;
    gap: 2rem;
  }

  ul {
    color: var(--real-white);
    display: flex;
    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;
    }
  }
}
.hidden {
  display: none;
}