// Breakpoint Vars
$x-small: 20em; // 320px
$small: 30em; // 480px
$medium: 40em; // 640px
$large: 52.5em; // 840px
$x-large: 65em; // 1040px
$primaryColor: #ee9966;

@import url(http://fonts.lug.ustc.edu.cn/css?family=Open+Sans);

/* ======================================================= */

* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}

body {
  padding: .5em;
  background-color: #EFFFE5;
}

section {
  border-bottom: 1px solid #1D1F20;
  padding-bottom: 20px;
}

img {
  display: block;
  max-width: 100%; // responsive images FTW
}

code {
  background: papayawhip;
  border-radius: .3em;
  padding: 0 .2em;
  border: 1px solid rgba(0,0,0,.1);
}

a {
  text-decoration: none;
}

ul {
  li {
    list-style: none;
  }
}

pre {
  background-color: #F5F2F0;
  padding: 0.1em 0.5em 0.3em 0.7em;
  border: .1em solid $primaryColor;
  border-left: 1em solid $primaryColor;
  margin: 1.7em 0 1.7em 0.3em;
  overflow: auto;
  width: 93%;
  background: url(http://perishablepress.com/wp/wp-content/themes/wire/img/pre.png) repeat 0 -0.9rem;
  line-height: 1.3em;
}

pre[class]:before {
  content: attr(class);
  display: block; text-align: right;
  font-size: 1em;
  padding-top: .4em;
  padding-right: .1em;
}