@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500');
@import url('https://fonts.googleapis.com/css?family=Fira+Mono');
@import './normalize';
@import './variables';

html,
body {
  font-family: 'Helvetica Neue', 'Roboto';
  font-weight: 400;
  font-size: 14px;
  color: $color-text-regular;
}

pre {
  padding: 0;
  border: none;
  font-family: 'Fira Mono', monospace;
}

code {
  border-radius: 3px;
  font-family: 'Fira Mono', monospace;
  background-color: #eee;
  padding: 0 5px;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 26px;
  margin-top: 40px;
}

h1,
h2,
h3 {
  font-weight: 400 !important;
  > a {
    color: inherit;
    text-decoration: none;
    &:hover {
      text-decoration: none;
      color: inherit;
    }
  }
}

h2 {
  .anchor {
    position: relative;
    cursor: pointer;
    &::before {
      content: '#';
      position: absolute;
      left: -25px;
      color: #ccc;
      transition: all 0.3s;
    }
    &:hover {
      &::before {
        color: $color-primary;
      }
    }
  }
}

p {
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 1140px;
  margin: 0 auto;
}
