/*DOCTYPE CSS*/

/* Prevents images from going outside of containers */
 img {max-width: 100%;}
  
/* Background */
 body {
  color: #BDB76B;
  background-image: url("/pics/temproom/bigstonewall.png"); 
  background-repeat: repeat;}
  
/*Not sure tbh*/
* {box-sizing: border-box;}

/*Width of layout*/
#container {max-width: 900px;
margin: 0 auto;}

/*Colors the Sidebars*/
aside {
background-color: #8FBC8F;
width: 200px;
padding: 20px;
font-size: smaller;}

/*Non-Navi Links*/
#container a {
color: #ED64F5;
font-weight: bold;
text-decoration:none;}

/*Header*/
#header {
width: 100%;
background-color: #5e4e8c;}

/* Nav Bar */
#navbar {
height: 40px;
background-color: #13092D;
width: 100%;}

#navbar ul {
display: flex;
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-evenly;
border-style: ridge;}

/*Nav Links*/
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 1rem;
}


/* Add a color to the active/current link */
topnav active {
  background-color: #04AA6D;
  color: blue;
}

/*No clue*/
#flex {
display: flex;}

/*Sidebars*/
aside {
background-color: #696969;
width: 200px;
padding: 20px;
font-size: smaller;}

/*Middle Area*/
main {
background-color: #43256E;
flex: 1;
padding: 20px;
order: 2;}

/*Sidebar Order*/
#leftSidebar {
order: 1;}
#rightSidebar {
order: 3;}

/*Footer*/
footer {
background-color: #13092D;
width: 100%;
height: 40px;
padding: 10px;
text-align: center;}

/*Text*/
h1,h2,h3 {color: #FFFFF0}
h1 {font-size: 2rem;}
/*Bold Text*/
strong {
color: #ED64F5;}

/*The boxes in the sidebars*/
.box {background-color: #13092D;
border: 1px solid #ED64F5;
padding: 10px;}

/* CSS for extras */

/*Media Query*/
@media only screen and (max-width: 800px) {
#flex {flex-wrap: wrap;}
aside {width: 100%;}}