/** Time to mess around with stuff **/ 
 html,
            body {
                margin: 0;
                padding: 0;
                background-image:url('/photo_gifs/stars4.gif');
                background-repeat:repeat;
                background-size:25%;
                background-attachment:local; 
                font-family: "Lucida Console", "Courier New", monospace;
                font-size: 13.5px;
                line-height: 2.2em;
                color: white;
            }

            body a {
                color: var(--link-color);
                font-weight: bold;
               /* text-decoration: ; */ 
            }

            #main-container {
                max-width: 985px;
                max-height: 500px;
                margin: 0 auto;
                
            }

            .flex {
                display: flex;
                margin-bottom: 5px;
            }

            .content-wrap {
            margin-top: 50px;
            }

            #content-container {
                width: 82%;
                margin-bottom: 5px;
                background-image: url(/comics/comic_assets/scribble-light.png);
                background-color: #1e97f2;
                background-repeat: repeat; 
                outline-style: ridge; 
                outline-color: #3954e5;
                outline-width: 7px;
                border-radius: 3px 3px 3px 3px;
                padding: 15px;
                
            }

            .nav {
                margin-left: 0;
                text-align: var(--navitems-alignment);
                margin-top: 0;
                margin-bottom: var(--navbar-margin-bottom);
                padding-top: 1em;
                padding-bottom: 1em;
                background-color: var(--nav-bg-color);
                outline-style: outset;
            }

            .nav li {
                display: inline-block;
                padding-right: var(--space-between-navitems);
            }


            .wrapper {
                padding: 20px;
                padding-top: var(--sidebar-padding);
            }

/* To keep your site RESPONSIVE, make sure this variable matches the width for --container-width UNLESS --container-width is 100% - if it's 100%, you'll need to manually input a breakpoint. */
            @media only screen and (max-width: 800px) {
                .flex {
                    flex-wrap: wrap;
                }

                #left-sidebar {
                    width: 100%;
                    display: block;
                    order: 2;
                    margin-right: 0;
                    margin-bottom: 10px;
                }

                #right-sidebar {
                    width: 100%;
                    display: block;
                    order: 3;
                    margin-left: 0;
                }

                #content-container {
                    width: 100%;
                    display: block;
                    order: 1;
                    margin-bottom: 10px;
                }

            }   

/* Navbar thingy */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100px;
  background-color: #3954e5;
  
  border-radius: 3px 3px 3px 3px;
}

li a {
  display: block;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
  background-color: #1e97f2;
  color: white;
    border-radius: 3px 3px 3px 3px;
    background-image: url(/comics/comic_assets/scribble-light.png);
}

h1,h2,h3 {
  color: #232323;
  font-family: "Lucida Console", "Courier New", monospace;
}

h4,h5,p {
  color: #232323;
  font-family: "Lucida Console", "Courier New", monospace;
}