@import url('https://fonts.googleapis.com/css?family=Karla');
  @import url('https://fonts.googleapis.com/css?family=Quantico');
   @import url('https://fonts.googleapis.com/css?family=Yuji Syuku');
   @import url('https://fonts.googleapis.com/css?family=Crimson Text');
 body {
     margin: 0;
     background-color: #31220F;
     color: #070B0B;
     font-size:18px;
     font-family: 'Crimson Text';
     text-align:center;
   line-height:150%;
     background-image: url("/MH/Media/rosswood4.png");
     background-size:cover;
     background-attachment:fixed;
}
 * {
     box-sizing: border-box;
}
/* CSS for the layout */
 #container {
     max-width: 1100px;
     margin: 0 auto;
}
/* the area below is for all links on your page EXCEPT for the navigation */
 #container a {
     color: #B4CBE3;
     font-weight: bold;
}

#header {
    width: 100%;
    background-color: #B4CBE3;
    height: 100px;
}

 #navbar {
     height: 40px;
     background-color: #5B532B;
     width: 100%;
   margin-top:15px;
}
 #navbar ul {
     display: flex;
     padding: 0;
     margin: 0;
     list-style-type: none;
     justify-content: space-evenly;
}
 #navbar li {
     padding-top: 10px;
}
/* navigation links*/
 #navbar li a {
     color: #BB8441;
     font-weight: 800;
     text-decoration: none;
}
 #navbar li a:hover {
     color: #171509;
     text-decoration: underline;
}
 #flex {
     display: flex;
}
      
 aside {
  background-color: rgba(0,0,0,0);
  width: 250px;
  padding: 10px;
   margin-bottom:15px;
            }    
             
      
 main {
     background-color: rgba(0,0,0,0);
     flex: 1;
     padding: 10px;
     order: 2;
     margin-bottom:15px;
}

#leftSidebar {
    order: 1;
            }
            
#rightSidebar {
    order: 3;
            } 

p {
  color: #59463F; 
}

 h1 {
     color: #31231E;
     font-size: 30px;
     text-align:center;
     font-family: 'Yuji Syuku';
}
h2 {
  color: #A0786A;
  text-decoration: underline;
  font-family: 'Quantico';
}
h3 {
  color: #A0786A;
  font-style: italic;
  font-size:20px;
  text-align:center;
}
 strong {
     color: #000000;
}
hr {
  width: 90%;
  margin-left: auto;
  margin-right:auto;
  border-bottom:3px solid;
  color: #407DB8;
}
/* this is just a cool box, it's the darker colored one */
 .box {
     background-color: #B4CBE3;
     border: 2px solid #407DB8;
     padding: 10px;
}

/* CSS for extras */
 #topBar {
     width: 100%;
     height: 30px;
     padding: 10px;
     font-size: smaller;
     background-color: #13092D;
}
/* BELOW THIS POINT IS MEDIA QUERY */
/* so you wanna change the width of your page? take your new height, and then subtrack it by 100. use this new number as the "max-width" value below */
 @media only screen and (max-width: 1000px) {
     #flex {
         flex-wrap: wrap;
    }
     aside {
         width: 100%;
    }
    /* the order of the items is adjusted here for responsiveness! */
     main {
       order: 1;
          }

    #leftSidebar {
       order: 2;
         }

   #rightSidebar {
        order: 3;
         }

    #navbar ul {
        flex-wrap: wrap;
}
/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: #BA2D0B;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 5px;
}

*::-webkit-scrollbar-track {
    background: #CEA159;
}

*::-webkit-scrollbar-thumb {
    background-color: #BA2D0B;
    border-radius: 10px;
    border: 1px none #ffffff;
}
ul.arrowbullets {
  list-style: none;
}
ul.arrowbullets li::before {
  content: "\2799";
}
ul.operatorbullets {
  list-style: none;
}
ul.operatorbullets li::before {
  content: "\2297";
}