/* This is the CSS file for the main website, for use on most pages */

/* Import the CSS code in the CSS folder */
@import url("/assets/css/CompiledCSS.css");
/* Import the fonts in the Fonts folder */
@import url("/assets/fonts/FontList.css");

/* This section creates variables to be used in this CSS file */
:root{
}

/* This line sets the background color for the entire webpage */
body{
  margin: 0;
	font-family: "Courier New", Courier, monospace;
	font-size: 14px;
	font-weight: bold;
	overflow-y: scroll;
	background-color: var(--webpagebg);
	color: black;
  }

/* This section handles the Div that contains the Navbar, Main Content, and Sidebars */
#wrapper{
  max-width: 100%;
  margin: 0 auto;
  }
  #wrapper a{
    color: blue;
    }

/* This section handles the Div used as the Navbar */
#navbar{
  height: 32px;
  width: 100%;
  line-height: 32px;
  text-align: center;
  background-color: var(--sburb);
  }
  #navbar a{
    color: black;
    }
  #navbar a:hover{
    color: blue;
    }
  #navbar ul {
                display: flex;
                padding: 0;
                margin: 0;
                list-style-type: none;
                justify-content: space-evenly;
            }
            
.flex-body{
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  align-items: flex-end;
  }
  
.flex-item{
  min-width: 20%;
  flex: 1;
  text-align: center;
  align-items: center;
  justify-content: center;
}
            
/* This section handles the Flexbox used to arrange the Main content and Sidebars */
flex{
  display: flex;
}

/* This section handles the Main content */
main{
  min-height: 75vh;
  width: 100%;
  order: 2;
  background-color: var(--mainbg);
  padding: 32px;
  overflow-y: scroll;
  }

/* This section handles the Sidebars */
aside{
  width: 20vw;
  background-color: var(--sidebarbg);
  padding: 16px;
  }
  #left-sidebar{
    order: 1;
    text-align: center;
    }
  #right-sidebar{
    order: 3;
    text-align: left;
    }
  
/* This section handles the Footer, which is styled like the Navbar */
footer{
  min-height: 32px;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  background-color: var(--sburb);
  }

h1{
  text-align: center
  }

.pchumnew b{
  color: var(--nepeta);
  text-indent: 32px;
  }