/*if you intend on editing anything to do with this, please test this with SPECIFICALLY the testing HTML*/

:root {
     --dk-color:#bf776b; /*these can be referenced to avoid putting the color every time*/
     --mid-color:#f2b1a4;
     --lt-color:#ffe8e3;
     --dkest-color:#8e534a;
     --accent:#226051;
}


/*FOR IMAGES?*/
img {
    width: 100%;
    height: auto;
    max-width: 350px;
}

 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:98%;
     font-family:Verdana;
     font-size:15px;
     background-image:url('https://img.itch.zone/aW1hZ2UvNTQzNDMyLzY1MDQwMzAucG5n/original/aRTU1s.png'); /*undo these if you DONT want an image bg*/
     background-repeat:repeat;
     background-color: lightgrey;
     color:black; /*this is text color*/ /*is it???*/
     padding:1px;
}
 body a {
     color:lightblue; /*unknown*/
     font-weight:bold;
}
 ul.list li {
     padding-bottom:5px;
}
 #container {
     max-width:900px;
     margin:0 auto;
     height:auto;
     background-color:lightgrey; /*colors main body*/
     margin-top:15px;
}
 h1, h3, h5 {
     color:black; /*i think this is text color for these*/
}
 h2, h4, h6 {
     color:black; /*i think this is text color for these*/
}
 #header {
     max-width:1000px;
     height:auto;
     margin:0 auto;
     background-color:grey; /*header bg color*/
     border:1px solid var(--dkest-color);
}
 .navbar li a {
     text-decoration:none;
}
 .navbar ul {
     list-style-type:none;
     padding:0;
     padding-left:20px;
     padding-right:20px;
}
 .navbar {
     background-color:lightgrey; /*top navigation bar bg color*/
     max-width:1000px;
     border:1px solid black; /*color is specifically for THE BORDER for this*/
     border-bottom:none;
     border-top:none;
     padding-top:5px;
     padding-bottom:5px;
     text-align:center;
}
 .title {
     font-size:35px;
     text-align:center;
     font-style:normal;
     color:black; /*title color*/
}
 .section-title {
     text-align:center;
     font-weight:bold;
     padding-top:5px;
     padding-bottom:5px;
     background-color:lightgrey; /*under navigation bar, that bg color*/
     color:black; /*text color*/
     font-size:15px;
     border-bottom:1px solid black; /*color is for specifically the border for the bottom*/
}
 .wrapper {
     display:flex;
     flex-wrap:wrap;
     height:auto;
     width:100%;
}
 #left-sidebar {
     width:197px; /*NEED TO EDIT THIS, BUT THIS ALSO BREAKS EVERYTHING*/
     border:1px solid black; /*color for n w and s border*/
     height:100%;
     border-right:none;
     background-color:lightgrey; /*left sidebar bg color*/
}
 .content {
     padding:10px;
}
 .main-content {
     border:1px solid black; /*color refers to main body border*/
     width:700px;
     height:auto;
}
 p {
     padding:5px;
}
 p a {
     color:white; /*unknown*/
     font-weight:bold;
}
 .scroll::-webkit-scrollbar-track {
     background-color: grey; /*scrollbar bg color*/
}
 .scroll::-webkit-scrollbar {
     width: 10px;
     background-color: black; /*???*/
}
 .scroll::-webkit-scrollbar-thumb {
     background-color: white; /*scrollbar BAR color*/
}
 .navbar li {
     position: relative;
     display:inline-block;
}
 .navbar a {
     text-decoration:none;
     display:block;
     color:black; /*text color*/
     margin-right:15px;
     transition:0.2s all linear;
     font-weight:bold;
     font-size:15px;
     margin-right:40px;
}

 .navbar a:hover{
     background:black; /*hovering bg color*/
     color:white; /*hovering text color*/
     transition:0.2s all linear;
     z-index:1;
}

/*ive removed hovering navbar item lists*/

 #footer {
     text-align:center;
     padding-top:5px;
     margin-bottom:5px;
}
 #footer p {
     background-color:grey; /*the footer thing color*/
     display:block;
     width:160px;
     margin:0 auto;
     margin-top:5px;
     margin-bottom:5px;
     padding:5px;
}
 textarea {
     background-color:white; /*???*/
     color:black; /*???*/
     font-size:15px;
}
 .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;
    }
     .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 {
    }
     */
}