*
  box-sizing border-box
  -webkit-overflow-scrolling touch
  --clr-primary hsl(194, 100%, 88%)
  --clr-white #ffffff
  --clr-black #000000
  --clr-dark #222222
  --clr-ligher #eeeeee
  --text-width 35rem
  --animation all 100ms ease
  --small-shadow 0 0.2em 0.5em -0.1em #00000014
  --icon-width 1.5em
  scroll-behavior smooth

*[tabindex]:focus
  outline none

html, body
  padding 0
  margin 0
  font-family Raleway, serif
  font-size 1rem

h1, h2, h3, h4, h5, h6
  margin 0

a
  text-decoration none
  color inherit

hr
  border 0
  border-top 1px solid #f5f5f5
  margin 1em 0

.fill
  height 100%
  width 100%

.fill-v
  height 100%

.fill-h
  width 100%

.alt-font
  font-family "Abril Fatface", serif

.text-align-right
  text-align right

.text-align-left
  text-align left

.text-align-center
  text-align center

#app
  width 100vw
  height 100vh
  position fixed
  overflow-x auto
  background-color var(--clr-white)

.view
  max-width var(--text-width)

.tags
  margin-top -.25em

  & > a
    &.tag
      padding .25em
      background #eee
      border-radius .25em
      display inline-block
      margin-top .25em

.gohome
  padding .5em
  align-self center
  transition var(--animation)

  &:hover
    transform scale(1.5)

img
  &.icon
    height 1em
    display inline-block
    vertical-align middle

.auto-width
  max-width var(--text-width)
  width 100%

.spacer
  height 8em

@media only screen and (max-width: 40em)
  .tags
    display flex
    flex-direction row
    overflow auto

    &::-webkit-scrollbar
      width 2px
      background transparent
      height 2px

    &::-webkit-scrollbar-thumb
      background var(--clr-dark)
      border-radius 2px

    & > a
      &.tag
        margin .25em
        flex 1 0 auto

  .gohome
    padding .25em