/* Variables var(--textColor) */
:root{
  /* background colors */
  --background-color:Midnightblue;
  --section-background-color: #2C2C75; 
}

/*Section Styling*/
header {
  background: var(--background-color);
  text-align: center;
  border: 2px solid #666695;
  margin: 10px 0px 15px 0px;
}

#nav {
  margin: 0px;
}

#nav ul{
  background: var(--section-background-color);
  padding: 0;
  border: 2px solid #666695;
  margin: 0;
  list-style-type: none;
  display: flex;
  justify-content: space-evenly;
  flex-grow: 1;
}

#nav ul li a {
  display: block;
  padding: 14px 16px;
  color: #FCF5E8;
}

#nav ul li a:hover {
  background-color: #666695;
  color: DarkOrange;
}

body {
   background-image: url("/media/backgrounds/blueStars.gif");
   color: DarkOrange;
   font-family: Comic Sans ms, Open Sans, Sans Serif;
 }
 
 aside {
  padding: 10px;
  background: var(--section-background-color);
  border: 2px solid #666695;
 }
 
 main {
  flex: 1;
  order: 2;
   background: var(--section-background-color);
  border: 2px solid #666695;
  
 }
 
 section {
   padding: 10px;
   margin: 5px;
   background: var(--section-background-color);
  border: 2px solid #666695;
 }
 
footer ul {
  display: flex;
  justify-content: space-evenly;
  padding: 0px;
  border: 2px solid #666695;
  margin: 10px 0 0 0;
  list-style-type: none;
  flex-grow: 1;
   background: var(--section-background-color);
}

footer ul li a {
  display: block;
  color: #FCF5E8;
  padding: 7px 8px;
}


.content{
    max-width: 1500px;
    margin:0 auto;
    justify-content: center;
} 


.aboutMe{
  display:flex;
  position: relative;
}

.aboutMeContent{
 
}

.idButton {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-left: 5px;
}

.bars{
  display: flex;
  justify-content: center;
  height: 800px;
}

.lSidebar{
  order: 1;
  width: 250px;
  background: var(--section-background-color);
  margin: 0 10px 0 0;
}

.rSidebar{
  order: 3;
  width: 250px;
  background: var(--section-background-color);
  margin: 0 0 0 10px;
}


/*Text Styling*/


a {
  color: #FCF5E8;
}
a:hover {
  color: DarkOrange;
}

a:visited{
  color: #FCF5E8;
}