@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap')
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap')
@import "utils/animationTimer"

body
  margin: 0
  padding: 0
  font-family: Roboto, sans-serif
  font-size: 14px
  font-weight: 400
  line-height: 1.5
  color: #212529
  background: #000
  // this transition is used to animate mobile safari address bar's transparent bg
  transition: background-color $bodyBackgroundColorTransitionDuration ease-in-out

h1, h2, h3, h4, h6
  line-height: 1.2

h2, h3, h4, h6
  font-family: Avenir-Roman, sans-serif
  margin-top: 0
  margin-bottom: .5rem

h1
  font-size: 2.5rem
  font-weight: 500

h4
  font-size: 1.5rem
  font-weight: 900

h3
  font-weight: 900
  font-size: 1.75rem

h6
  font-size: 1rem
  font-weight: 900

a
  color: #007bff
  text-decoration: none
  &:hover
    text-decoration: underline
    color: #0057aa

@font-face
  font-family: 'Avenir-Roman'
  src: local('Avenir-Roman'), url('fonts/Avenir-Roman.woff') format('woff')
  font-display: swap

*
  -webkit-font-smoothing: antialiased
  box-sizing: border-box
  -webkit-tap-highlight-color: transparent

img, svg
  vertical-align: middle