@import './fonts.sass'
@import './mediaqueries.sass'
@import './variables.sass'

// http://meyerweb.com/eric/tools/css/reset/
// v2.0 | 20110126
// License: none (public domain)

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
  margin: 0
  padding: 0
  border: 0
  font-size: 100%
  font: inherit
  vertical-align: baseline

// HTML5 display-role reset for older browsers

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
  display: block

body
  line-height: 1
  // set max height to more than 100vh to remove shift produced by scrollbar
  min-height: calc(100vh + 2px)

ol, ul
  list-style: none

blockquote, q
  quotes: none

blockquote
  &:before, &:after
    content: ''
    content: none

q
  &:before, &:after
    content: ''
    content: none

table
  border-collapse: collapse
  border-spacing: 0

// Global styles starts

html
  font-size: 14px

body
  background: $background-color

*, p, h4, h5, h6, a
  font-size: 1rem
  letter-spacing: 1px
  font-family: roboto, helvetica, sans-serif
  line-height: 2
  text-decoration: none
  outline: none
  word-break: break-word


h1, h2, h3
  text-transform: uppercase
  font-weight: 900
  letter-spacing: 4px
  line-height: 1.5
  font-family: roboto_mono, helvetica, sans-serif

h1
  font-size: 1.5rem

h2
  letter-spacing: 3px
  font-size: 1.5rem
  font-weight: 400

h3
  font-size: 1.2rem
  letter-spacing: 2px

h4
  letter-spacing: 2px
  font-size: 1.2rem
  font-weight: 400

h5
  letter-spacing: 2px
  font-size: 1.2rem
  font-family: roboto_mono, helvetica, sans-serif

h6
  font-size: 1rem
  font-weight: 800
  text-transform: uppercase
  letter-spacing: 1px

p
  font-weight: 400
  letter-spacing: 1px

.frm
  font-family: roboto_mono, helvetica, sans-serif

.marB10
  margin-bottom: 10px

.marT10
  margin-top: 10px

.marB20
  margin-bottom: 20px

.marT20
  margin-top: 20px

.marL10
  margin-left: 10px

.marL20
  margin-left: 20px

.text-center
  text-align: center

.text-left
  text-align: left

.text-right
  text-align: right

.has-link
  color: $grey

.has-link > a
  text-decoration: none
  color: $black
  border-bottom: 1px dotted $black
  &:hover
    border-bottom: 1px solid $black

.normal
  text-transform: none
  letter-spacing: 1px
  font-size: 1rem

input, textarea
  padding: .5rem 1rem
  border: none
  color: $grey
  margin: 1rem 0
  font-size: .9rem
  font-weight: 400
  border-bottom: solid 2px $light-grey
  transition: color .3s, border-color .3s
  background: #fff
  &:active, &:focus
    outline: none
    color: $black
    border-color: $black

label
  font-size: .9rem
  line-height: 1
  font-weight: 500
  font-family: roboto_mono, helvetica, sans-serif

button
  outline: none
  border: none
  border-radius: 0
  &:focus, &:active
    outline: none
  &::-moz-focus-inner
    border: 0

.unCap
  text-transform: none

a
  white-space: nowrap
  cursor: pointer
  outline: none
  &:active, &:focus
    outline: none

input
  outline: none
  box-sizing: border-box
  width: 100%
  &:invalid
    box-shadow: none

.modal-opened
  overflow: hidden

.scrollbar-measure
  width: 100px !important
  height: 100px !important
  overflow-y: scroll
  position: absolute
  top: -9999px
