@import "vars"
@import "mixins"

*
    margin: 0
    padding: 0
    -webkit-box-sizing: border-box
    box-sizing: border-box

html
    background-color: $dark-grey
    font-family: $font
    font-size: 16px

body
    font-size: $body-size
    font-family: $font
    color: $body-text
    line-height: 2rem
    letter-spacing: 1.5px
    text-shadow: none
    display: flex
    flex-direction: column
    justify-content: space-between
    align-items: center
    opacity: 1

h1,h2,h3
    margin-bottom: 0.5em
    text-align: center
    font-family: 'Didact Gothic', sans-serif
    opacity: 0.6

li
    opacity: 0.8
    & a
        opacity: 0.9

ul
    list-style-type: none

p
    display: inline
    opacity: 0.8

a
    color: $links
    text-decoration: none
    border-bottom: 2px solid $links
    +ease(0.5s)
    &:hover
        color: $links-hover
        font-style: none
    &:active
        color: $links

button
    padding: 20px
    border: 0px
    border-radius: 5px
    background: $white
    &:hover
        box-shadow: 5px 5px $black

hr
    +skinny-hr
    opacity: 0.3

.wrap
    margin: 0 auto
    margin-top: 6rem
    width: 45%
    @media screen and (max-width: 736px)
        padding: 1rem
        width: 100%

.tag-container
    display: flex
    flex-direction: row
    justify-content: flex-start
    align-items: center

.tag
    background-color: transparent
    position: relative
    bottom: 0

.section
    display: flex
    flex-direction: column
    justify-content: center
    align-items: flex-start

.bottom-menu
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    padding-top: 3rem
    padding-bottom: 3rem
    text-align: center

.footer
    width: 100%
    display: flex
    justify-content: center
    align-items: center
    text-align: center
    background-color: transparent
    position: relative
    bottom: 0
    padding: 0rem 1rem 3rem 1rem
    font-family: $font
    font-size: 1rem
    line-height: 1em
    opacity: 0.8
    a
        border-bottom: none
        display: contents

@import "elements"

// Helpers

.go-left
    justify-content: flex-start
    align-items: flex-start

.go-right
    justify-content: flex-end
    align-items: flex-end

.go-center
    justify-content: center
    align-items: center