// Index

.route-index{
  .main{
    section{ position: relative;}
    .heading{ text-align: center;}
  }
  @include on($laptop) {
    .icon{ display: none;}
    .main{ @include align-items(center); @include display(flex); @include flex-direction(column); @include justify-content(center); min-height: 100vh; padding: 2rem 4rem 4rem;
      section{ max-width: 86rem; width: 100%;}
    }
  }
}

// Sections

.section-web{
  .table-of-contents a{ color: $web;}
  .content{
    a{ color: $web;
      &:visited{ color: $visited;}
    }
    h3 a:visited{ color: $web;}
  }
  .pagination a{ background: $web;}
}

.section-html{
  .table-of-contents a{ color: $html5;}
  .content{
    a{ color: $html5;
      &:visited{ color: $visited;}
    }
    h3 a:visited{ color: $html5;}
  }
  .pagination a{ background: $html5;}
}

.section-sass{
  .table-of-contents a{ color: $sass;}
  .content{
    a{ color: $sass;
      &:visited{ color: $visited;}
    }
    h3 a:visited{ color: $sass;}
  }
  .pagination a{ background: $sass;}
}

// Chapters

.route-chapter{ background: $blue;
  .toggle{
    &:before,
    &:after,
    span{ background: rgba(black, 0.2);}
  }
  .logo{ display: none;}
  .heading{ max-width: 50%;
    h1{ color: rgba(black, 0.4);
      strong{ color: rgba(black, 0.7);}
    }
    h2{ color: white; text-shadow: 0 1px 2px rgba(black, 0.1);
      strong{ color: white;}
    }
  }
  .content{ color: rgba(white, 0.7); font-size: 1.2rem; text-shadow: 0 1px 2px rgba(black, 0.1);
    strong{ color: white; font-weight: 400;}
  }
  .pagination a{ background: white; color: $blue;
    &:hover{ background: white; color: $blue;}
  }
  .navigation a{
    &:hover{ background: $black;}
    &:before,
    &:after{ background: rgba(black, 0.2);}
  }
  .footer{ display: none;}
  &.section-web{ background: $web;
    .pagination a{ color: $web;
      &:hover{ color: $web;}
    }
  }
  &.section-html{ background: $html5;
    .pagination a{ color: $html5;
      &:hover{ color: $html5;}
    }
  }
  &.section-sass{ background: $sass;
    .pagination a{ color: $sass;
      &:hover{ color: $sass;}
    }
  }
  @include on($laptop) {
    .main{ @include display(flex); @include flex-direction(column); @include justify-content(center); padding: 4rem 6rem 6rem;
      .heading h1{ left: 6rem; position: fixed; top: 2rem;}
      .content{ max-width: 50%;
        p{ max-width: none;}
      }
    }
  }
}