$pink: #CC7A98
$black: #002234
$green: #CDE7B0

@font-face
    font-family: 'Titling Gothic FB'
    src: url("../fonts/TITLINGGOTHICFB-WIDE.OTF") format('opentype')

@font-face
    font-family: 'Grifter'
    src: url("../fonts/GRIFTER.otf") format('opentype')

@font-face
    font-family: 'Gilroy'
    src: url("../fonts/Gilroy-ExtraBold.otf") format('opentype')

@font-face
    font-family: 'Apercu Mono'
    src: url("../fonts/ApercuMono.ttf") format('truetype')

html, body
    width: 100%
    height: 100%

body
    background-color: $black
    color: $pink

h1
    font-family: "Gilroy"

p
    font-family: "Apercu Mono"

a:hover
    color: $green


article
    min-height: 100%
    display: grid
    grid-template-rows: auto 1fr auto
    grid-template-columns: 100%

header
    nav
        a
            span
                font-size: 2rem
                font-family: 'Titling Gothic FB'
                color: $pink
                span
                    font-size: 2.2rem
                    font-family: 'Grifter'

        #navbarSupportedContent23
            ul
                background-color: $pink
                li
                    background-color: $pink
                    text-align: center
                    a
                        span
                            color: $black
                            font-family: "Apercu Mono"

                .active
                    background-color: $black
                    a
                        span
                            color: $pink

main
    padding: 0.5rem
    h1
        padding-bottom: 1rem
        font-size: 4.5rem
        span
            text-decoration: underline $pink
            text-decoration-style: wavy
    p
        font-size: 2rem
        margin-bottom: 5px


footer
    text-align: center
    font-size: 1rem
    padding: 0.5rem
    a
        color: $pink
        text-decoration: underline $pink


.vertical-center
    min-height: 100%  /* Fallback for browsers do NOT support vh unit */
    min-height: 100vh /* These two lines are counted as one :-)       */

    display: flex
    align-items: center


// Nav stuff

.ham
    width: 30px
    height: 20px
    position: relative
    margin: 0px
    -webkit-transform: rotate(0deg)
    -moz-transform: rotate(0deg)
    -o-transform: rotate(0deg)
    transform: rotate(0deg)
    -webkit-transition: .5s ease-in-out
    -moz-transition: .5s ease-in-out
    -o-transition: .5s ease-in-out
    transition: .5s ease-in-out
    cursor: pointer

.ham span
    display: block
    position: absolute
    height: 3px
    width: 100%
    border-radius: 9px
    opacity: 1
    left: 0
    -webkit-transform: rotate(0deg)
    -moz-transform: rotate(0deg)
    -o-transform: rotate(0deg)
    transform: rotate(0deg)
    -webkit-transition: .25s ease-in-out
    -moz-transition: .25s ease-in-out
    -o-transition: .25s ease-in-out
    transition: .25s ease-in-out
    background: $pink

.ham span:nth-child(1)
    top: 0px

.ham span:nth-child(2), .ham span:nth-child(3)
    top: 10px

.ham span:nth-child(4)
    top: 20px

.ham.open span:nth-child(1)
    top: 11px
    width: 0%
    left: 50%

.ham.open span:nth-child(2)
    -webkit-transform: rotate(45deg)
    -moz-transform: rotate(45deg)
    -o-transform: rotate(45deg)
    transform: rotate(45deg)

.ham.open span:nth-child(3)
    -webkit-transform: rotate(-45deg)
    -moz-transform: rotate(-45deg)
    -o-transform: rotate(-45deg)
    transform: rotate(-45deg)

.ham.open span:nth-child(4)
    top: 11px
    width: 0%
    left: 50%