body {
	/* Set the background image to the Hub Flag, and make sure it isn't bigger than the screen. Had problems with this earlier. */
	background-image: url(assets/flag_bg.png), url(assets/flag_bge.png);
	background-size: 100%, 100%;
	background-repeat: no-repeat, repeat;
	background-attachment: fixed, fixed;
}

main {
	/* We have to do this at the beginning of all content inside the body, due to the above code for the background */
	background-image: none;
	background-color: rgba(0,0,0,0.8);
	
	/*Give main content a neat rounded border. May change the color in the future. */
	border-style: solid;
	border-color: #b9c0cc;
	border-width: 5px;
	border-radius: 5px;
	
	/*Misc Stuff */
	padding-bottom: 15px;
	margin-bottom: 30px;
	
	/*Make sure that the article doesn't completely cover the page, and make it centered. */
	max-width: 65%;
	margin-left: 17.25%;
}

aside {
	/* Background Stuff */
	background-image: none;
	background-color: rgba(0,0,0,0.7);
	
	/* Misc */
	max-width: 15%;
	position: fixed;
	
	/* Border similar to main */
	border-style: solid;
	border-color: #b9c0cc;
	border-width: 5px;
	border-radius: 10px;
		
}
/* 
____________________________________________________________________________________________
____________________________________________________________________________________________
Article Text, Pictures, and Misc
____________________________________________________________________________________________
____________________________________________________________________________________________
*/

.title {
	background-image: none;
	background-color: rgba(0,0,0,0);
	
	/* Text Settings. */
	text-align: center;
	color: #38b548;
	font-family: 'Raleway', sans-serif;
	
	/* Misc */
	padding-left: 5px;
	padding-right: 5px;
}

/* Article Text and Article Lists are similar, but the latter requires a small change.*/
.article_text, .article_li {
	background-image: none;
	background-color: rgba(0,0,0,0);
	
	/* Similar settings to the title class */
	color: #38b548;
	text-align: justify;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 1.35em;
	padding-left: 5px;
	padding-right: 5px;
}

.article_li {
	margin-left: 40px;
}

.article_text {
	text-align: center;
}

.article_video {
	display: block;
	margin: 0 auto;
	border-style: solid;
	border-color: #b9c0cc;
	border-width: 3px;
	border-radius: 20px;
}

.article_pic {

	/* Adjust maximum picture size and center it */
	max-width: 60%;
	height: auto;
	margin-left: 20%;
	
	
	/* Border Stuff */
	border-style: solid;
	border-color: #b9c0cc;
	border-width: 3px;
	border-radius: 20px;
	
	/* Adjust opacity so it is fully visible */
	background-color: rgba(0,0,0,0);
}

/* Article Flair is a simple way to describe stylish text */
.article_flair {
	
	/* Adjust the overall look of the text*/
	color: #C41111;
	font-style: italic;
	font-size: 3em;
	font-family: 'Rubik Mono One', sans-serif;
	text-align: center;
	
	padding-left: 5px;
	padding-right: 5px;
}

.article_flair_minor {
	font-size: 2em;
	color: #C41111;
	font-family: "Open Sans Condensed", "Sans Serif";
	text-align: center;
}

.article_link {
	background-image: none;
	background-color: rgba(0,0,0,0);
	
	/* Similar settings to the title class */
	color: #38b548;
	text-align: inherit;
	font-family: 'Open Sans Condensed', sans-serif;
	font-size: 1.35em;
	padding-left: 5px;
	padding-right: 5px;
}

a {
	color: green;
	transition-property: color;
	transition-duration: 0.5s;
	transition-delay: 0s;
}
a:hover {
	color: grey;
}

/* Developer Note: at this point in time, I realize that rgba is really weird. It stacks, so the <main> tag has a setting of 0,0,0,0.8 which means slightly transparent. Transparency on anything on top of that stacks, it doesn't replace the initial transparency. I got the logo fixed anyways, so that's good, right?*/