/**
 * Reset some basic elements
 */
html {
  overflow-x: hidden;
  width: 100%;
}

body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
  letter-spacing: .1px;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  font-family: $base-font-family;
}

/**
 * Basic styling
 */
body {
  min-height: 100vh;
  overflow-x: hidden; 
  position: relative;
  background: $neutral;
  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
  -webkit-text-size-adjust: 100%;
  -webkit-font-feature-settings: "kern" 1;
     -moz-font-feature-settings: "kern" 1;
       -o-font-feature-settings: "kern" 1;
          font-feature-settings: "kern" 1;
  font-kerning: normal;
}

/**
 * Set `margin-bottom` to maintain vertical rhythm
 */
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure,
%vertical-rhythm {
  margin-top: $spacing-unit - 20;
  margin-bottom: $spacing-unit - 20;
}

kbd {
  -moz-border-radius:3px;
  -moz-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px $white inset;
  -webkit-border-radius:3px;
  -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px $white inset;
  background-color:#f7f7f7;
  border:1px solid #ccc;
  border-radius:3px;
  box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px $white inset;
  color:#333;
  display:inline-block;
  font-family: Roboto;
  font-size:14px;
  line-height:1.4;
  margin:0 .1em;
  padding:.1em .6em;
  text-shadow:0 1px 0 $white;
}

/**
 * Images
 */
img {
  max-width: 100%;
  vertical-align: middle;
  -webkit-user-drag: none;
}

/**
 * Figures
 */
figure {
  position: relative;
}


/**
 * Images
 */
figure > img {
  display: block;
  position: relative;
}

/**
 * Caption Image
 */
figcaption {
  font-size: 13px;
  text-align: center;
}

/**
 * Lists
 */
ul, ol {
  margin-left: $spacing-unit;
}

li {
  padding-bottom: 1px;
  padding-top: 1px;
  > ul,
  > ol {
    margin-bottom: 2px;
    margin-top: 0;
  }
}

/**
 * Headings
 */
h1, h2, h3, h4, h5, h6 {
  font-weight: $base-font-weight;
}

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
  text-decoration: none;
  border: none;
  &:hover {
    text-decoration: none;
    border: none;
  }
}


/**
 * Links
 */
a {
  color: $black;
  border-bottom: 1px solid #1635de;
  text-decoration: none;

  &:hover {
    color: $black;
    border-bottom: 2px solid #1635de;
  }
}

/**
 * Del
 */
del {
  color: inherit;
}

/**
 * Em
 */
em {
  color:inherit;
}

/**
 * Blockquotes
 */
blockquote {
  color: $grey;
  border-left: 4px solid $black;
  padding: 5px 5px 5px 15px;
  border-radius: 2px;
  @include relative-font-size(1);

  > :last-child {
    margin-bottom: 0;
    margin-top: 0;
  }
}

/**
 * Wrapper
 */
.wrapper {
  max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
  max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));
  position: relative;
  margin-right: auto;
  margin-left: auto;
  padding-right: $spacing-unit;
  padding-left: $spacing-unit;
  @extend %clearfix;

  @include media-query($on-laptop) {
    max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
    max-width:         calc(#{$content-width} - (#{$spacing-unit}));
    padding-right: $spacing-unit / 2;
    padding-left: $spacing-unit / 2;
  }
}


/**
 * Table
 */
table {
  margin: 0 auto;
  border-collapse: collapse;
  background: $white;
  font-family: 'Roboto Mono';
  font-size: $small-font-size;
  th { 
    font-weight: 400;
    background: #f5f5f5;
  }
  th, td, tr {
    border: 1px solid $light;
    padding: 4px 8px;
  }
}

/**
 * Clearfix
 */
%clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/**
 * When mouse block a text set this color
 */
::selection {
    background: #D6EDFF;
}

/**
 * Github Gist clear border 
 */
.gist {
  table {
    border: 0;
    tr, td {
      border: 0;
    }
  }
}