body {
  background-color: var(--color-bg-default);
  color: var(--color-text-default);
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: var(--line-height);
}

#main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#main__header {
  flex: 0 0 auto;
}
#main__content {
  flex: 1 0 auto;
}
#main__footer {
  flex: 0 0 auto;
}

.wrapper {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 2vw;
}

@block wrapper-with-sidebar {
  @media (--breakpoint-desktop) {
    display: flex;
    align-items: flex-start;
  }

  @element sidebar {
    @media (--breakpoint-desktop) {
      flex: 0 0 220px;
      padding: var(--grid-gutter);
      border-radius: 7px;
      box-shadow: var(--card-box-shadow);

      & > h2 {
        margin-bottom: calc(var(--grid-gutter) * 3);
      }
    }
  }

  @element content {
    padding: var(--grid-gutter) 0;

    @media (--breakpoint-desktop) {
      flex: 1 1 auto;
      margin-left: var(--grid-gutter);
      overflow: hidden;
    }
  }
}

.grid-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 calc(var(--grid-gutter) / 2 * -1);

  & > * {
    box-sizing: border-box;
    margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
    flex: 0 0 calc(50% - var(--grid-gutter));

    @media (--breakpoint-desktop) {
      flex: 0 0 calc(33% - var(--grid-gutter));
    }
  }
}

.grid-list-small {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 calc(var(--grid-gutter) / 2 * -1);

  & > * {
    box-sizing: border-box;
    margin: 0 calc(var(--grid-gutter) / 2) var(--grid-gutter);
    flex: 0 0 calc(50% - var(--grid-gutter));
  }
}

.table-of-contents {
  & ul {
    list-style: none;
    margin: var(--grid-gutter) 0;
    padding: 0;
    padding-left: calc(var(--grid-gutter) * 2);

    & li {
      margin: 0 0 var(--grid-gutter);
      padding: 0;
    }

    & a {
      display: block;

      &.active {
        position: relative;
        font-weight: bold;

        &:before,
        &:after {
          position: absolute;
          top: 0;
        }
        &:before {
          content: '';
          left: calc(var(--grid-gutter) * 3 * -1);
          bottom: 0;
          width: 3px;
          background: var(--color-course-active);
        }
        &:after {
          content: '👁';
          left: calc(var(--grid-gutter) * 2 * -1);
        }
      }
    }
  }
}

.sidebar-menu {
  & ul {
    list-style: none;
    margin: var(--grid-gutter) 0;
    padding: 0;

    & li {
      margin: 0 0 var(--grid-gutter);
      padding: 0;
    }

    & a {
      display: block;

      &.active {
        font-weight: bold;
      }
    }
  }
}

@block main-navigation {
    & ul {
      display: flex;
      list-style: none;
      flex-wrap: wrap;
      justify-content: center;
      margin: 0;
      padding: 0;

      @media (--breakpoint-desktop) {
        justify-content: flex-end;
      }

      & li {
        margin: 0;

        & + li {
          margin-left: calc(var(--grid-gutter) / 4);
        }

        & a {
          display: block;
          text-transform: uppercase;
          font-weight: bold;
          padding: 0.7em 1em;
          color: var(--color-text-grey);
          border-radius: var(--border-radius);

          &.active,
          &:hover {
            background: var(--color-bg-grey);
          }

          &.active {
            color: var(--color-text-default);
          }
        }
      }
    }
  }