.text-container {
  p:first-of-type {
    margin-bottom: $size-64;
  }

  p:last-of-type {
    margin-top: $size-24;
  }

  .intro {
    margin-bottom: $size-64;
  }

  p,
  h1,
  h2,
  h3,
  ul {
    max-width: $size-512 + $size-128;
    background-color: $white;
    padding: $size-16 $size-32;
    margin: 0;

    &:last-of-type:not(ul) {
      margin-bottom: $size-32;
    }

    @include touch {
      padding: $size-16;
    }
  }

  h2 {
    display: inline-block;
    margin-top: $size-64;
    margin-bottom: $size-32;
  }

  ul {
    font-size: $size-14;

    li {
      list-style: inside;
      @include padding-horizontal($size-12);
      line-height: $size-24;

      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }

  sup a {
    text-decoration: none;
    // color: $turquoise;
  }

  a {
    color: $turquoise;

    &:visited {
      color: $highlight-darker;
    }
  }
}

h2 {
  margin-top: $size-32;

  @include touch {
    margin-top: 0;
  }
}

.page-content {
  @include touch {
    @include margin-horizontal($size-32);
  }
}

.side-title {
  position: fixed;
  transition: all 0.2s ease-in-out;
  color: $text;
  margin: 0;
  width: 100vh;
  bottom: 0;
  text-align: center;

  &.side-title--left {
    transform: rotate(270deg);
    left: 5%;
    transform-origin: left;

    @include touch {
      left: 15px;
    }
  }

  &.side-title--right {
    transform: rotate(90deg);
    right: 5%;
    transform-origin: right;

    @include touch {
      right: 15px;
    }
  }

  &.hidden {
    opacity: 0.0001;
  }

  a {
    color: $text;
  }
}