@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Mono'), local('RobotoMono-Regular'),
       url(/static/fonts/RobotoMono-Regular.ttf);
}

// Emojicode Brand Colors

$white: #fff;
$black: #000;
$p-intermediate: hsl(244, 39%, 29%);
$p-soft: hsl(253, 70%, 68%);
$p-gray: lighten($p-intermediate, 68%);

// General Colors

$background-color: rgb(254, 254, 254);
$text-color: rgb(55, 55, 55);
$link-color: desaturate(darken($p-soft, 11%), 6%);
$code-font: Roboto Mono, Monaco, monospace;
$code-background: desaturate(lighten($p-intermediate, 69%), 14%);

$border-radius: 4px;

// Heading Settings

$heading-color: darken($p-intermediate, 3%);

// Global Menu Colors

$menu-height: 36px;
$menu-color: $p-intermediate;

// Table Settings

$table-alternative-color: #f8f8f8;
$table-border-color: #ddd;
$table-row-border-top-color: #ccc;

$footer-color: #7f7f7f;
$break: 880px;

%display-font {
  font-family: AvenirNextRoundedPro-Med;
  letter-spacing: -0.04em;
  font-weight: 500;
}

%text-font {
  font-family: HelveticaNeueLTPro, 'Helvetica Neue', Arial, sans-serif;
  font-weight: normal;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  padding: 0;
  font-size: 16px;
}

body {
  @extend %text-font;
  padding: 0;
  margin: 0;

  vertical-align: baseline;
  -webkit-font-smoothing: antialiased;
  color: $text-color;
  text-rendering: optimizelegibility;

  background-color: $background-color;
  padding-top: $menu-height;
}

a {
  text-decoration: none;
  color: $link-color;

  &:hover {
    text-decoration: underline;
  }
}

p {
  line-height: 1.5;
}

h1 {
  font-size: 2.8em;
  margin-bottom: 0.66666rem;
}

h1,
h2,
h3,
h4 {
  @extend %display-font;
  color: $heading-color;
  margin-top: 2rem;
  margin-bottom: 0.3333rem;
}

pre,
code {
  font-family: $code-font;
  background-color: $code-background;
}

pre {
  padding: 1.3333rem;
  font-size: 16px;
  overflow-x: auto;
  position: relative;

  code {
    padding: 0;
    background: none;
    // font-size: 1em;
  }
}

code {
  display: inline-block;
  padding: 0 0.2em;
  font-size: 0.9em;
  border-radius: 2px;
}

.menu {
  @extend %display-font;
  -webkit-font-smoothing: subpixel-antialiased;
  padding: 0 0.5em;
  color: $white;
  position: absolute;
  background-color: $menu-color;
  top: 0;
  right: 0;
  left: 0;
  height: $menu-height;
  line-height: $menu-height;

  a {
    display: inline-block;
    padding: 0 10px;
    color: $white;
    text-decoration: none;

    &:hover,
    &.active {
      text-decoration: none;
      background-color: lighten($menu-color, 10%);
    }
  }
}

.menu-right {
  float: right;
}
