/* Header and footer design */

#header {
    position: relative;
    background: black; 
    font-size: 1rem; }

    #header-content {
        position: relative;
        text-align: center;
        color: white; }
        #header-content::before,
        #header-content::after {
            content: '';
            display: block;
            position: absolute;
            top: 0; bottom: 0;
            width: 10%;
            z-index: 0; }
        #header-content::before {
            left: 0;
            background: linear-gradient( to right, black 0%, transparent 100% ); }
        #header-content::after {
            right: 0;
            background: linear-gradient( to left, black 0%, transparent 100% ); }

        #top-banner {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            height: 5em;
            margin-bottom: -5%;
            z-index: 1; }

            #header-menu {
                display: flex;
                align-items: center;
                padding: 0 1rem;
                font-size: 1.5em;
                line-height: 1.125;
                text-transform: uppercase; }
                #header-menu .menu-item {
                    margin: 0 1em 0 0; }

            #header-social-media-icons {
                text-align: right;
                padding: 0 1rem;
                font-size: 3em;
                flex-shrink: 0; }
                #header-social-media-icons a {
                    color: inherit;
                    text-decoration: none; }
                #header-social-media-icons #patreon {
                    vertical-align: bottom;
                    height: 1em; }

        #header-menu-open,
        #header-menu-heading { display: none; }

        #header-background {
            width: 100%;
            max-width: 1594px; }

        #header-title {
            position: relative;
            background-color: black;
            margin: 0;
            padding-left: 1rem;
            border-bottom: 2px solid black;
            text-align: left;
            font-size: inherit;
            z-index: 1; }
            #header-name {
                position: absolute;
                bottom: 100%;
                font-family: 'Arial', sans-serif;
                font-size: 15em;
                line-height: 1;
                font-weight: 900;
                text-shadow:  0.05em 0.05em 0.075em black;
                opacity: 0.65; }
                #header-name a {
                    text-decoration: none; }
            #header-description {
                font-size: 2.5em;
                line-height: 1.5em;
                text-transform: uppercase;
                letter-spacing: 0.2em; }

@media screen and ( max-width: 72rem ) {

    #header-title { font-size: 0.5em; }

    #top-banner { font-size: 0.625em; }

}

@media screen and ( max-width: 50rem ) {

    #top-banner {
        font-size: 1em;
        position: fixed;
        display: block;
        left: -25rem;
        top: 0;
        height: 100%;
        width: 25rem;
        max-width: 100%;
        background-color: black;
        z-index: 100;
        transition: left 500ms; }
    #top-banner.open {
        left: 0; }

        #header-menu-heading {
            position: absolute;
            display: block;
            top: 0; left: 0;
            width: 100%;
            padding: 1rem; }
            #header-menu-close {
                display: block;
                position: absolute;
                top: 0; right: 0;
                width: 3rem;
                padding: 1rem; }
            #header-menu-site-name {
                display: block;
                text-align: left; }

        #header-menu-container { height: 100%; }
            #header-menu {
                flex-direction: column;
                align-items: left;
                height: 100%;
                padding: 0;
                font-size: 2em;
                border: solid black;
                border-width: 3rem 1rem 5rem;
                overflow-y: auto; }
                #header-menu .menu-item {
                    padding-left: 0.5em;
                    text-indent: -0.5em; }

        #header-social-media-icons {
            position: absolute;
            bottom: 1rem; right: 1rem;
            padding: 0; }

    #header-menu-open {
        position: relative;
        display: block; 
        width: 3em;
        height: 3em;
        padding: 1em;
        margin-bottom: -5%;
        text-align: center;
        z-index: 99; }

}

@media screen and ( max-width: 25rem ) {

    #header-social-media-icons {
        font-size: 1.5em; }

}

#footer {
    color: white;
    background-color: black; }
    #footer-content {
        padding: 1rem;
        text-align: center; }
        #footer-content a {
            color: inherit;
            text-decoration: none; }