:w

@import "./bourbon/bourbon";
@import "./neat/neat";
@import "./custom_mixins/custom_mixins";

@import "./partials/_colors";
@import "./partials/_fonts";

@import "./partials/_base";

@import "./partials/_header";
@import "./partials/_site-nav";
@import "./partials/_footer";
@import "./partials/_card";
@import "./partials/_post";
@import "./partials/_table";

@import "./partials/_profile";
@import "./partials/_snippet";
@import "./partials/_topic";
@import "./partials/_chart";


.main {
  padding: em(8) em(16);
  @include row();

  @include media($mobile){
    padding: em(8);
    padding-top: em(0);
  }
}

.slides {
  height: 90%;
  overflow: hidden;
  margin-bottom: 0;
}

.slide {
  padding: 100px 0;
  header {
    position: fixed;
    top: 0;
    h1 {
      font-size: em(24);
    }
    h2 {
      text-align: center;
      color: $base1;
    }
  }

  p, li {
    font-size: em(32);
  }

  h1 {
    font-size: em(36);
    line-height: em(36, 36);
  }

  li {
    line-height: em(24);

  }

  section {
    padding: 100px 0;
  }

  ul {
    li {
      p {
        font-size: em(24);
      }
    }
  }
  
  width: em(800); 
  height: em(600);
  &:not(.active) {
    opacity: 0.5;
  }
  &.title, &.section-title {
    padding: 100px  0;
    header {
      position: relative;
      padding: em(30) 0;
      width: 100%;
      h1 {
        font-size: em(48);
      }
    }
  }
  @for $i from 1 through length($labelColors) {
    &.section-title:nth-of-type(#{$i}) {
      header {
        background: nth($labelColors, $i); 
      }
    }
  }
}