---
---

@font-face
    font-family: ComicSans
    src: url('/css/comic.woff2')

*
    margin: 0
    padding: 0

html,
body
    font-family: Verdana, Arial, sans-serif
    color: #FFFFFF
    background: #111111
    line-height: 1.5em
    max-width: 1000px
    margin: 0 auto

h1,
h2,
h3
    font-family: ComicSans
    line-height: 1em
    height: 1em
    vertical-align: middle

h1
    text-align: center
    background: linear-gradient(90deg, #FF0000, #00FF00 50%, #0000FF)
    -webkit-background-clip: text
    -webkit-text-fill-color: transparent
    -webkit-text-stroke: 2px #FFFFFF
    paint-order: stroke fill
    font-size: 6em
    font-size: clamp(2em, 10vw, 8em)
    margin-bottom: 30px

    @media (max-width: 800px)
        -webkit-text-stroke: 1px #FFFFFF

h2
    font-size: 3em

h3
    font-size: 2em
    margin-top: 1em


#content
    margin: 0 0 0 11em

    @media (max-width: 800px)
        margin: 5px

    a
        text-decoration: underline

        &:link
            color: #FFFFFF

        &:visited
            color: #CCCCCC

        &:hover,
        &:active,
        &:focus
            color: #FF4400

    .button-list
        list-style: none
        margin: 0 auto
        padding: 0
        max-width: 30em

        a
            display: block
            padding: 0.5em
            margin: 1em 0
            border-radius: 10px
            text-decoration: none
            font-size: 1.5em
            //border: 1px solid #CCCCCC

            &:link,
            &:visited
                color: inherit

            &:hover,
            &:active,
            &:focus
                color: inherit
                filter: brightness(90%)

            img
                max-height: 1em
                padding-right: 0.2em

nav
    float: left
    width: 10em

    @media (max-width: 800px)
        float: none
        width: auto
        text-align: center

    a
        color: #FFFFFF
        padding: 2px 5px

        &.current-page
            font-weight: bolder
            text-decoration: none

        @media (min-width: 801px)
            display: block
            border: 5px outset #AAAAAA;
            background-color: #CCCCCC;
            margin-bottom: 10px
            text-decoration: none
            color: #000000
            text-align: right

            &.current-page,
            &:hover,
            &:active,
            &:focus
                border-style: inset


p
    margin-bottom: 1em

footer
    clear: both
    margin: 30px 0 0 0
    border-top: 1px solid #FFFFFF
    text-align: center
    padding: 2px

    a
        color: #FFFFFF

        &:hover,
        &:active,
        &:focus
            color: #FF4400

#skip-to-content
    visibility: hidden

ul
    margin: 1em 0 0 0
    padding: 0 0 0 1em

.post-metadata
    margin: 0.5em 0
    color: #999999
    font-size: 0.9em

img
    vertical-align: text-bottom