/*  This is me trying to learn CSS by designing my own style sheet */


/* The WHOLE Document */

html body { 

margin: 0px;
padding: 0px; 
font-family:  "Founders Grotesk", "Neue Haas Grotesk Text Pro", "Lucida Sans Unicode", "Consolas", "Helvetica Neue", Sans-Serif;
font-size: 12pt;

}


/* ALL Elements */

* { 

box-sizing: border-box; 	/* This causes borders and margins to 
							be placed inside specified width or height
							of elements	*/
							
}


body {
	
	height: 100vh;
	background: #003000;
	color: #00ff00;
	line-height: 150%;
	font-size: 12pt;
	display: flex; 
	flex-direction: column;

}


/* Layout IDs */


/* Topbar Styling */

#topbar {

width: 100vw;
height: 18vh;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
background: #033603;

}



.logo {

order: 0;
flex: none;
display: flex;
align-items: center; 
text-align: right;
background: #0033aa;

}

.logo img {

}

.logosize {

height: 19vh;
width: auto;

}

.titlebox {
order: 1;
flex: 85%;

}

.titlebox h1 {

font-size: 250%;
margin-left: 35px;

}


/* BELOW TITLE BAR */

#main-section {

display: flex;
flex-wrap: nowrap;
flex-direction: row;
height: 75vh;

}

/* Sidebars */

#main-section .leftbar {

	display: none;
	order: 0;
	flex: 15%;
	height: 100%;
	padding: 5px 15px 0px 10px;
	background: #001500;
	
}

#main-section .rightbar {
	order: 2;
	flex: 15%;
	padding: 5px 10px 0px 15px;
	height: 100%;
	background: #002500;
	color: #00aa00;

}

#main-section .rightbar a { 

text-decoration: none;
color: gold;
padding: 15px 15px;
text-align: center;
font-size: 18px;
font-weight: bold;
display: block;
float: left;

}

#main-section .rightbar a::after {
  content: "";
  display: table;
  clear: both;

}

#main-section .rightbar a:hover {

background: midnightblue;
font-weight: bold;

}

#main-section .rightbar a:visited {

color: deeppink; 
font-weight: bold; }

#main-section .content {

	order 1;
	flex: 70%;
	height: 100%;
	padding: 15px 125px;
	font-size: 18px;
	background: #002000;
	overflow: scroll;
	scrollbar-color: #005500 #002000;
	scrollbar-width: thin;
	
} 

#main-section .header { 
	
	font-weight: bold; font-size: 125%; color:#399339;
	line-height: 175%; margin-top: 10px; margin-left: -35px;
	list-style-type: none;

}

#main-section li {

	margin-left: 10px;
	font-size: 95%;
	margin-right: 20px;
}

/* BELOW MAIN SECTION */

/* Footer */

#footer {
	
	display: flex;
	align-self: flex-start;
	width: 100%;
	height: 7vh;
	background: #002500;
	
}

#footer div {

padding: 25px; 

}



/* child elements */








#rightbar span {

background: #ffff00;
color: #ff0000;

}


#social {

display: inline;
border: red 1pt dotted;
padding: 5px;
margin-left: 10%;

}