body {
            
            background-image: url(https://file.garden/ZTgBVXlIhS-zrd1r/pixel%20art/Neocities/bg%20tiles/starsabout.gif);
            font-family: "Old English Text MT", fantasy;
            font-size: 0.9em;
            color: #00ffff;
        }

        h1 a {
            text-decoration: none;
            color: #000;
        }

        img {
            max-width: 100%;
        }

        .wrapper {
            /*everything goes inside this*/
            width: 69em;
            margin: auto;
        }

        .comic-box,
        .header,
        .comment-box,
        .page-navigation {
            background: #3f008c;
            padding: 1em;
            border-radius: 5px;
        }

        .header,
        .comment-box {
            margin-top: 1em;
            margin-bottom: 1em;
            font-family: "Times New Roman", serif;

        }

        .comic-box,
        .sidebar-wrapper {
            display: inline-block;
        }

        .sidebar-wrapper {
            /*sidebar goes inside this*/
            width: 18em;
            border: 0px solid #09008c;
            position: absolute;
            margin-left: 1em;
        }

        .sidebar,
        .sidebar-2 {
            background: #8f30c9;
            padding: 1em;
            border-radius: 5px;
            margin-bottom: 1em;
        }

        .header h1,
        .sidebar-wrapper h2 {
            text-align: center;
        }

        .sidebar-2 {
            margin-top: 0.9em;
        }

        .header {
            width: 40em;
            margin: 0 auto;
            margin-top: 0.9em;
            margin-bottom: 0.9em;
            margin-left: 5em;
            font-size: 20px;
            font-family: "Old English Text MT", fantasy;
            padding-top: 0.2em;
            padding-bottom: 0.2em;
            background-image: url(https://file.garden/ZTgBVXlIhS-zrd1r/nightbringer/banner.png)
        }

        .comic-box {
            /*this is where the page of the comic goes*/
            width: 48.5em;
        }

        /*Prevent image overflow*/
        .comic-box img,
        .comment-box img,
        .header img,
        .sidebar-wrapper img {
            max-width: 100%;
            height: auto;
        }

        .comment-box,
        .page-navigation {
            width: 48.5em;
        }

      

        .page-navigation {
            /*this is where the page nav buttons go*/
            margin-top: 1em;
            background: #8f30c9;
        }

        .button,
        .nav-button {
            text-align: center;
            margin: 0 auto;
            padding: 1em;
            padding-top: 0.3em;
            padding-bottom: 0.3em;
            margin-top: 0.35em;
            margin-bottom: 0.35em;
            background: #3f008c;
            font-weight: bold;
            color: #00ffff;
            font-size: 1.3em;
            border-radius: 5px;
            text-decoration: underline;
        }

        

        .nav-button {
            /*comic page navigation buttons*/
            display: inline-block;
            margin-left: 0.1em;
            margin-right: 0.1em;
        }

        .button a,
        .nav-button a,
        a {
            color: #fc95e2;
        }

        a:hover {
            color: #ff3399;
        }

        .footer {
            text-align: center;
            font-size: 0.8em;
            padding: 1em;
            color: black;
        }

        center {
            text-align: center;
        }


        @media(max-width: 1200px) {
            .wrapper {
                width: 85%;
            }

            .sidebar-wrapper {
                width: 21%;
            }

            .comic-box,
            .comment-box,
            .page-navigation {
                width: 70%;
            }

            .header {
                width: 75%;
            }
        }

        @media(orientation: portrait) {

            /*mobile*/
            .wrapper {
                width: 100%;
                padding: 0;
                margin: 0 auto;
                border: 0px solid black;
                top: 0;
                left: 0;
                right: 0;
            }

            .header,
            .sidebar-wrapper,
            .comic-box,
            .comment-box,
            .page-navigation {
                margin: 0 auto;
                width: 90%;
                margin-top: 1em;
                margin-bottom: 1em;
                border: 0px solid #00ffff;
            }

            .header {
                width: 80%;
            }

            .sidebar-wrapper,
            .comic-box {
                position: static;
                display: block;
            }

            .sidebar,
            .sidebar-2 {
                margin-left: 0;
                margin-right: 0;
                text-align: center;
                /*the width is broken on mobile and i can't figure out why
          it's just slightly narrower than everything else and i don't understand
          */
            }

            .sidebar-wrapper img {
                /*to keep the widget icons from getting huge*/
                max-height: 5em;
                width: auto;
            }

            .sidebar img {
                max-height: 100%;
                padding-top: 0.5em;
                padding-bottom: 0.5em;
            }

            .sidebar p {
                text-align: left;
            }

            .sidebar h2 {
                /*hides the sidebar label in mobile theme*/
                font-size: 0;
                padding: 0;
                margin-bottom: 2%;
            }

            .button {
                display: inline-block;
                width: 5.25em;
                margin-left: 0.3em;
                margin-right: 0.3em;
            }
        }
        
        .comic-box {
            font-family: "Times New Roman", serif;
        }