/*

* Base. These are element styles — no classes or IDs. Base typography styles go here, as well as anything needed to style raw elements.
* See https://medium.com/@jordankoschei/how-i-shrank-my-css-by-84kb-by-refactoring-with-itcss-2e8dafee123a#.tbp9yocm3 for details.
*/

html {

font-size: $fontSize;

// body-border shenanigans from https://css-tricks.com/body-border/
body:before, body:after {
  content: "";
  position: fixed;
  background: $material500;
  left: 0;
  right: 0;
  height: 5px;
}

body:before {
    top: 0;
}

body:after {
    bottom: 0;
}

body {
  font-family: $systemSansSerif;
  line-height: $lineHeight;
  max-width: $maxWidth;
  margin: $margin;
  padding: $padding;
  color: $materialGray900;
  background-color: $materialWhite;
  -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;

  h1, h2, h3, h4, h5, h6 {
    color: $material900;
    line-height: $headingLineHeight;
    font-family: $systemSerif;
  }

  code, pre {
    font-family: $systemMonospace;
  }

  h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, %vertical-rhythm {
    margin-bottom: $spacing-unit / 2;
  }

  /**
  * Blockquotes
  */
  blockquote {
    color: $material700;
    border-left: 4px solid $material200;
    padding-left: $spacing-unit / 2;
    font-style: italic;

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

  footer {
    font-size: .75rem;
  }

  /**
    * Code formatting
    */
  pre {
    margin-left: 0;
    margin-right: 0;
    padding: .25rem;
    width: 100%;
    max-width: 100%;
    border: 1px solid $material200;
    background-color: $materialWhite;
    overflow: auto;
  }

  form, figure {
    margin-left: 0;
    margin-right: 0;
    border-width: 1px; 
    border-style: solid;
    padding: .5rem;
    max-width: 100%;
  }

  figcaption {
    font-size: .85rem;
    text-align: right;
  }

  img, iframe {
    max-width: 100%;
    vertical-align: middle;
    border: 1px solid $material300;
  }

  nav {
    width: 100%;
    ul { 
      list-style: none; 
      padding: 0px; 
      margin: 0px;
      li {
        line-height: 2;
      }
    }
  }
}

}