@import url(
  https://fonts.googleapis.com/css?family=Roboto:400,
  100,
  100italic,
  300,
  300italic,
  400italic,
  500,
  700,
  900|Roboto+Mono:400,
  700
);

body {
  background-color: $shadeBlue;
  color: $grey;
  font-family: $roboto;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  @media screen and (min-width: $tablet) {
    text-align: left;
  }
}

.page {
  flex-grow: 1;
}

h1 {
  font-weight: $bold;
  font-size: 36px;
  line-height: 48px;
  margin: 0 0 $small 0;

  @media screen and (min-width: $tablet) {
    font-size: 42px;
    line-height: 56px;
  }
}

h2 {
  font-family: $roboto;
  font-size: 36px;
  font-weight: $bold;
  color: $darkGrey;
  margin-bottom: $tiny;

  &.subhead {
    font-weight: $regular;
  }
}

h3 {
  font-family: $roboto;
  font-size: 18px;
  font-weight: $bold;
  line-height: 26px;
  padding-bottom: $micro;
  margin: 0;
}

p,
ul {
  font-size: 18px;
  line-height: 26px;
  margin-top: 0;
}

a {
  color: $darkGreen;
  text-decoration: none;
  font-weight: $bold;
}

ul {
  margin: $tiny 0 $tiny $small;
  padding: 0;
}

.contained {
  margin: 0 auto;
  max-width: $display;
  padding: 0 $small;

  @media screen and (min-width: $tablet) {
    padding: 0 $medium;
  }
}

*[class^='btn-'] {
  border-radius: $borderRadius;
  box-sizing: border-box;
  display: inline-block;
  font-family: $roboto;
  font-size: $tiny;
  font-weight: $bold;
  margin: 0;
  padding: $tiny $small;
  position: relative;
  overflow: hidden;

  &:after {
    content: '';
    position: absolute;
    top: -40%;
    left: -210%;
    width: 200%;
    height: 200%;
    opacity: 0;
    transform: rotate(30deg);
    background: rgba(255, 255, 255, 0.2);
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.2) 77%,
      rgba(255, 255, 255, 0.6) 92%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  &:hover:after {
    opacity: 1;
    left: 110%;
    transition-property: left, opacity;
    transition-duration: 0.6s, 0.1s;
    transition-timing-function: ease;
  }

  &:active:after {
    opacity: 0;
  }

  &.small {
    padding: $micro $tiny;
  }
}

.btn-primary {
  background-image: linear-gradient(0deg, $lightGreen 14%, $green 94%);
  color: $darkerGrey;
}

.btn-secondary {
  border: 1px solid white;
  color: white;
}

pre {
  border-radius: $borderRadius;
  line-height: 1 !important;
}

/* fixes overflowing code example in widgets */
.widget pre {
  box-sizing: border-box;
  width: 100%;
}

.code,
code {
  font-family: 'Roboto Mono', monospace !important;
  font-size: 80%;
  text-transform: none;
  line-height: 1 !important;
}