@import url(https://fonts.googleapis.com/css?family=Karla:400,700);

@font-face {
  font-family: 'entypo';
  src: url('../assets/fonts/entypo.eot?26149170');
  src: url('../assets/fonts/entypo.eot?26149170#iefix') format('embedded-opentype'),
       url('../assets/fonts/entypo.woff?26149170') format('woff'),
       url('../assets/fonts/entypo.ttf?26149170') format('truetype'),
       url('../assets/fonts/entypo.svg?26149170#entypo') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "entypo";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.entypo-github:before { content: '\e801'; }
.entypo-resize-full:before { content: '\e800'; }
.entypo-resize-small:before { content: '\e802'; }

* {
  box-sizing: border-box;
}

// ::-webkit-scrollbar {
//   width: 12px;
// }

// ::-webkit-scrollbar-track {
//   -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3); 
//   border-radius: 10px;
//   background: transparent;
// }

// ::-webkit-scrollbar-thumb {
//   border-radius: 10px;
//   background: transparent;
//   -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.5); 
// }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section, summary {
  display: block;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font: 18px/26px 'Karla', sans-serif;
  background: #f4f4f7;
  color: $textColor;
}

[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

h1, h2, h3, h4 {
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 48px;
  margin: 0;
}

h3, h4 {
  font-weight: 600;
}

a {
  text-decoration: none;
  word-wrap: break-word;
  color: $linkColor;
  &:visited {
    color: $visitedLinkColor;
  }
}

code, pre {
  font-family: "Source Code Pro", Monaco, Menlo, Consolas, "Courier New", monospace;
}

small {
  margin-top: 20px;
}

pre {
  border: 1px dashed #444;
  margin: 0;
  padding: 10px;
  line-height: 20px;
  word-wrap: break-word;
}

code {
  font-weight: bold;
  word-wrap: break-word;
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;  
}

pre code {
  font-weight: inherit;
}

.vigorjs-logo {
  $logoSize: 69px;
  position: relative;
  display: inline-block;
  line-height: 28px;
  font-size: 22px;
  text-align: left;
  padding-left: $logoSize + 20;
  font-weight: 900;
  &:after {
    position: absolute;
    content: '';
    display: block;
    width: $logoSize;
    height: $logoSize;
    top: 10px;
    left: 0;
    background: url(../assets/img/logo.svg);
    background-size: $logoSize $logoSize;
  }
}