@import variables

// Base

*
  @include box-sizing(border-box)

html, body
  height: 100%
  width: 100%

body
  @include font-smoothing
  background: $body
  color: $text
  font: 17px / 1.7 $font
  &:after
    content: ""
    display: table
    clear: both

img
  height: auto
  border-radius: $radius

// Typography

h1, h2, h3, h4, h5, h6
  font-weight: 400

h1, h2, h3, h4, h5, h6, p, ul, ol
  margin: 1em 0
  margin: 1rem 0

h1, h2, h3, h4, h5, h6
  line-height: 1.5

ul, ol
  padding: 0
li
  list-style: none

a
  color: $link
  text-decoration: none
  outline: 0
  &:hover
    color: $hover
    transition: $color
  &:focus
    outline: none

blockquote
  margin: 1em 0
  padding: 0 1em
  border-left: 0.4em solid $gray-lighter

strong, b, .bold
  font-weight: $bold

hr
  border: none
  background: $gray-lighter
  clear: both
  margin: 1.5em auto
  height: $border-width
  &.half
    width: 50%
  &.small
    width: 5em

pre
  white-space: pre-wrap
  word-break: break-all

code
  color: $gray-dark
  font-family: $code
  font-size: 0.7em
  background: $gray-lighter
  padding: 0.9em 0.8em
  margin: 0 0.3em 0 0.2em
  border-radius: $radius
  display: inline-block
  word-break: break-word
  p &
    display: inline
    padding: 0.1em 0.4em 0.1em 0.3em
    margin: 0 0.3em 0 0

dl
  display: table
  width: 100%
dt, dd
  display: table-cell
  vertical-align: top
  float: left
  clear: both
dt
  color: $gray
  font-size: 0.85em
dd
  color: black
  font-weight: 400
  padding-bottom: 0.3em
  &:after
    content: $non-breaking-space
  i
    margin: 0 1em 0 0

.contents
  background: white
  min-height: 24em

.row
  clear: both
  width: 100%

.section
  padding: 1em
  margin: 0 auto
  width: 90%

@media screen and (min-width: $desktop)

  .section
    width: 70%

@media screen and (min-width: $desktop-large)

  .section
    width: 60%

@media screen and (max-width: $phablet)

  .section
    width: 100%