:root {
--dk-color:#68abea;
--mid-color:#000000;
--lt-color:#041833;
--dkest-color:#204373;
--accent:#22e8ff;
}

html, body {
margin:0;
padding-top:25px;
padding:0;
height:98%;
font-family:Verdana;
font-size:11.5px;
background-image:url('https://lunecatta.neocities.org/Website/Background.gif');
background-repeat:repeat;
background-color:var(--mid-color);
color:var(--dk-color);
}

body a {
color:var(--accent);
font-weight:bold;
}

ul.list li {
padding-bottom:5px;
}

#container {
max-width:900px;
margin:0 auto;
height:auto;
background-color:var(--lt-color);
margin-top:15px;
}

#header {
max-width:1000px;
height:150px;
margin:0 auto;
background-image:url('https://lunecatta.neocities.org/Website/Banner.png');
background-color:var(--mid-color);
border:0px solid var(--dkest-color);
}

.section-title {
text-align:center;
font-weight:bold;
padding-top:5px;
padding-bottom:5px;
background-color:var(--mid-color);
color:var(--dk-color);
font-size:12px;
border-bottom:1px solid var(--dkest-color);
}

.wrapper {
display:flex;
flex-wrap:wrap;
height:auto;
width:100%;
}

#left-sidebar {
width:197px;
border:1px solid var(--dkest-color);
height:100%;
border-right:none;
background-color:var(--lt-color);
}

.content {
padding:10px;
}

.main-content {
border:1px solid var(--dkest-color);
width:700px;
height:auto;
}

p {
padding:3px;
}

p a {
color:var(--accent);
font-weight:bold;
text-decoration:none;
}

.scroll::-webkit-scrollbar-track {
background-color: var(--lt-color);
}

.scroll::-webkit-scrollbar {
width: 10px;
background-color: #f2b1a4;
}

.scroll::-webkit-scrollbar-thumb {
background-color: var(--dk-color);
}

#footer {
     text-align:center;
     padding-top:0px;
     margin-bottom:5px;
}
 #footer p {

     display:block;
     width:160px;
     margin:0 auto;
     margin-top:0px;
     margin-bottom:5px;
     padding:5px;
}
 textarea {
     background-color:var(--dkest-color);
     color:var(--lt-color);
     font-size:10px;
}
 .code-wrapper {
     display:flex;
     padding-left:10px;
}



/* COMMENT OUT OR DELETE THE BELOW CODE FOR TWO SIDEBARS */
 #right-sidebar {
     display:none;
}

/* UNCOMMENT THE BELOW CODE FOR TWO SIDEBARS */
/* .main-content {
     width:600px;
     border-right:none;
}
 #right-sidebar {
     width:197px;
     border:1px solid var(--dkest-color);
}
 #container {
     max-width:1000px;
}
 */
/* CHANGE BELOW TO max-width:1000px for TWO SIDEBARS. It is max-width:914px for ONE SIDEBAR */
 @media only screen and (max-width: 917px) {
     #left-sidebar {
         order:2;
         width:100%;
         border-right:1px solid var(--dkest-color);
    }
     .main-content {
         order:1;
         width:100%;
         border-bottom:none;
         border-right:1px solid var(--dkest-color);
    }
     .navbar a {
         padding-bottom:10px;
    }
    /* UNCOMMENT THE BELOW CODE FOR TWO SIDEBARS */
    /* #right-sidebar {
         width:100%;
         order:3;
         border-top:none;
    }
     #container {
         max-width:1000px;
    }
     .main-content {
    }
     */
}