$container-max-widths = {
  sm: 100%,
  md: 100%,
  lg: 100%,
  xl: 100%
}
invisible()


:root
  
  --header-font: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif
  --mono-font: 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace
  --color-text: #000000
  --color-link: #5d00ff

  --color-code: #fd3700
  --color-code-text: #333
  
  --font-size: 15px
  --line-height: 18px
  +media-up('md')
    --font-size: 20px
    --line-height: 24px
  +media-up('xl')
    --font-size: 23px
    --line-height: 28px
    

#__nuxt
  min-height: 100vh;

body
  padding: 0;
  margin: 0;
  font-family: var(--header-font)
  // -webkit-font-smoothing: antialiased;

// CSS
h1 {
  font-size: 2.75rem
  line-height: calc(var(--grid-unit) * 4)
  margin-top: calc(var(--grid-unit) * 3)
  margin-bottom: calc(var(--grid-unit) * 4)
}

// Stylus
h1,h2,h3,h4,h5,h6
  font-family: var(--header-font)
  font-weight: 400
  margin-left: -0.03em

h2
  font-size: 2.1rem
  line-height: gu(3)
  margin-top: gu(3)
  margin-bottom: gu(3)

h3
  font-size: 1.6rem
  line-height: gu(3)
  margin-top: gu(2)
  margin-bottom: gu(2)

h4
  font-size: 1.2rem
  line-height: gu(2)
  margin-top: gu(2)
  margin-bottom: gu(2)

h5
  font-size: 1rem
  line-height: gu(2)
  margin-top: gu(2)
  margin-bottom: gu(2)

p, ul, ol, pre, table, blockquote
  margin-top: gu(2)
  margin-bottom: gu(2)

ul ul, ol ol, ul ol, ol ul
  margin-top: 0
  margin-bottom: 0

pre
  display: block
  max-width: 100%
  overflow: auto
  background: rgba(0,0,0,0.03)
  box-shadow: inset 0 0 0 1px #eeeeee
  border-radius: 4px
  padding: gu(2) gu(1) gu(2) gu(1)
  em
    font-style: normal
    // font-weight: bold
    color: var(--color-code)
  code
    color: var(--color-code-text)

code
  color: var(--color-code)
  font-family: var(--mono-font)
  font-size: 87.5%
  vertical-align: bottom

a
  color: var(--color-link)
  text-decoration: none

.subheader
  font-family: var(--header-font)
  font-size: 1.4rem
  font-weight: 300
  line-height: gu(3)


// Tables
table
  border-collapse: collapse
th
  text-align: left
  color: #555
  padding: gu(1) 20px gu(1) 0
td
  padding: gu(1) 20px gu(1) 0
  &:last-chind
    padding-right: 0

// Colors
.color-text
  color: var(--color-text)

.color-inherit
  color: var(--color-text)



// Example
.example
  padding-top: gu(1);
  padding-bottom: gu(1);
  background-color: rgba(86,61,124,.15);
  background-color: rgba(170, 114, 255, 0.15)
  box-shadow: inset 0 0 0 1px rgba(86,61,124,.2)
  box-shadow: inset 0 0 0 1px rgba(144, 84, 234, 0.2)
  &.__narrow
    max-width: 5em

.bg-1
  background-color: rgba(135, 80, 218, 0.15)
.bg-2
  background-color: rgba(255, 67, 67, 0.2)


.colored-row
  margin-top: gu(2)
  height: gu(12)
  background: rgba(255,0,0,0.1)