*, *:after, *:before
  box-sizing: border-box

html, body
  width : 100%
  height: 100%

html
  font-size: 100%
  text-size-adjust: 100%

body
  overflow-x: hidden
  overflow-y: scroll
  background-color: $color-background
  min-height: 100%
  font-family: $font-helvetica
  font-size: $font-md
  line-height: $line-height-base
  font-weight: $font-weight-base
  color: $font-color-base
  text-rendering: optimizeLegibility
  scroll-behavior: smooth
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

// Selection
::-moz-selection
  background-color: $color-brand-lighter
  color: $color-white
::selection
  background-color: $color-brand-lighter
  color: $color-white

// Placeholder
::-webkit-input-placeholder
  color inherit
  opacity .7
::-moz-placeholder
  color inherit
  opacity .7
:-ms-input-placeholder
  color inherit !important
  opacity .7 !important
::-ms-input-placeholder
  color inherit
  opacity .7
::placeholder
  color inherit
  opacity .7

p
  margin: 0
  &:not(:last-child)
    margin-bottom: $space-base

// Links
a
  line-height: inherit
  transition: color 0.2s ease, border-bottom-color 0.2s ease
  border: none
  font-family: inherit
  color: $color-link
  text-decoration: none
  cursor: pointer
  &:focus
    outline: none
  &:hover
    color: $color-link-hover
  img
    border: 0
  &.router-exact-active // vue-router
    color: $color-gray-6
  h1, h2, h3, h4, h5
    color: $font-color-base

// Images
img
  width: 100%
  max-width: 100%
  height: auto

pre
  background-color: lighten($color-border, 60%)
  padding: $space-base
  line-height: 1.5

table
  width: 100%
  margin-bottom: $space-sm
th
  font-weight: 800
th, td
  padding-bottom: 16px
  text-align: center
  text-align: left
  vertical-align: middle

// layout
.flex
.column
  display: flex
  &.center
    justify-content: center
  &.between
    justify-content: space-between
  &.vcenter
    align-items: center

.column
  flex-direction: column

.col-50
  width: 50%
.col-25
  width: 25%

.relative
  position: relative

.container
  width: 960px
  max-width: 96%
  margin: 0 auto

.content-container
  width: 560px
  max-width: 96%

.cursor-pointer
  cursor: pointer