h1 {
	color: #f8f8f8; 
}

body {
	position: relative; 
	margin: 0; 
	background-color: #282923;
	font-family: monospace, serif; 
	font-size: 16px;
}
p {
	margin:0; 
}
a {
	margin: 0; 
}
/*Below is the roughdraft for my website*/

/*LineNumbWindow will stretch along the left side of the code window and display line #*/
/*BG color = #282923 */
/*highlighted BG color = #3e3d32 */
/*text primary color = #908463 */
#webringWrapper{
	display: none;
	vertical-align: middle;
}
#webring{
	display: flex;
	max-width: 400px;
	min-width:35%;
	justify-self: center;
	justify-content: space-around;
	font-size: 0.9rem;
}
.webringSideLink{
	text-decoration:none;
	font-weight: bold;
	color:#B1B3B6;
	border: 1px solid #B1B3B6;
	padding: 0.1rem;
	border-radius: 3px;
	line-height: 1.1rem;
}
.webringCenterLink{
	text-decoration:none;
	color:#B1B3B6;
	padding: 0.1rem 1rem 0.1rem 1rem;
	line-height: 1.1rem;
}
a.webringCenterLink:hover{
	color: #FFF;
	text-decoration: none;
}
a.webringSideLink:hover{
	color: #FFF;
	border-color: #FFF;
	text-decoration: none;
}
.headboard {
	position: fixed; 
	width: 100%; 
	display: flex; 
	background-color: #6d6e6a; 
	z-index: 2; 
	left: 0; 
}

.NavMenu {
	background-color: #6d6e6a; 
}

.NavBar {
	height: 35px; 
	background-color: #6d6e6a; 
}

.tblogo {
	position: absolute; 
	bottom: 0; 
	left: 10px; 
	z-index: 100; 
}

.socialMediaContainer {
	position: absolute;
	right: 0;
	margin-right: 35px;
	z-index: 800;
}

.githubImage {
	max-height: 28px;
	padding: 0 5px;
}

.linkedinImage {
	max-height: 35px;
	padding: 0 5px;
}


.ResumeButton {
	position: absolute; 
	bottom: 0; 
	left: 45px; 
	z-index: 500; 
}

.ResumeButton:hover {
	cursor: pointer; 
}

.PortfolioButton {
	position: absolute; 
	bottom: 0; 
	left: 209px; 
	z-index: 400; 
}

.ContactButton {
	position: absolute; 
	bottom: 0; 
	left: 373px; 
	z-index: 300; 
}

.AboutButton {
	position: absolute;
	bottom: 0;
	left: 373px;
	z-index: 200;
}

/*.AboutButton {*/
/*	position: absolute; */
/*	bottom: 0; */
/*	left: 537px; */
/*	z-index: 200; */
/*}*/

/*Blog is out of scope at the moment and will be added in when I find time between other projects*/
.BlogButton {
	position: absolute; 
	bottom: 0; 
	left: 701px; 
	z-index: 100; 
}

.main {
	display: flex; 
	flex-direction: row; 
	align-content: stretch; 
	position: relative; 
	padding-left: 45px; 
	top: 0; 
	right: 0; 
	min-height: 100%; 
}
/*content pushes main page and line numbers out from under header*/
.Content {
	padding-top: 35px; 
	overflow: hidden; 
}

.LineNumWindow {
	float: left; 
	position: absolute; 
	height: 100%; 
	min-height: 99vh; 
	top: -2px;
	bottom: 5px; 
	width: 45px; 
	margin: 0 0 0 0;
	background-color: #282923; 
	overflow: hidden; 
}
.LineNumbers {
	border-right: solid;
	border-width: 10px;
	border-color: #282923;
	text-align: right;
	color: #6d6e6a;
	height: 100%;
	overflow: hidden;
}
.LineNumbers > p {
	padding: 0;
	margin:	0;
	height: 100%;
	overflow: hidden;
}

/*Code Window will display my information in theme of Sublime*/
#CodeWindow {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-content: stretch;
	background-color: #282923;
	width:100%;
	height: 100%;
	min-height: 96vh;
}
.CodeWindowTextBlock {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-content: stretch;
	background-color: #282923;
}

/*The below section is the 'imitation CSS code' for portfolio to stylize similarly to Sublime Text*/
.PortfolioItem {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.PortfolioImageWrap {
	align-self: center;
}
.PortfolioImage {
	padding: 0 20px;
	height: 140px;
	border: #282923 4px solid;
}
.aboutMeImage {
	max-width: 50vw;
	border: #282923 5px solid;
	align-self: center;
}
.ClassContainer{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-content: flex-start;
}
div#aboutPage > div.ClassContainer {
	flex-direction: row;
	justify-content: space-between;
	align-items: stretch;
}
.ClassIntro {
	padding: 0;
	margin:	0;
}
.ClassBody {
	padding: 0 0 0 30px;
	border-left: dotted;
	border-width: 	0.05em;
	border-color: #908463;
	margin:	0;
}
.DocblockBody {
	border-left: dotted;
	border-width: 	0.05em;
	border-color: #908463;
	margin:0;
}
.ClassClose {
	padding: 0;
	margin:	0;
}
.ClassBody > p {
	word-break: keep-all;
	padding: 0;
	margin:	0;
}
#widePara {/*wide paragraphs that need text wrapping forced to make content more similarly sized*/
	display: block;
	max-width: 1000px;
}
#widePara > div {/*hacky fix for comma after widepara*/
	display: inline;
}
.c {/*.Class*/
	font-family: monospace;
	color: #a6ce28;
	padding: 0;
	margin:	0;
}
.p {/*Punctuation*/
	font-family: monospace;
	color: #f8f8dc;
	padding: 0;
	margin:	0;
}
.pb{/*emphasisize*/
	font-family: monospace;
	font-weight: bold;
	color: #f8f8dc;
	padding: 0;
	margin:	0;
}

.pr {/*Property*/
	font-family: monospace;
	font-style: italic;
	color: #67d8ef;
	padding: 0;
	margin:	0;
}

.s {/*JS string*/
	font-family: monospace;
	color: #e7db74;
	padding: 0;
	margin:	0;
}

.o {/*JS Object*/
	font-family: monospace;
	font-style: italic;
	color: #fd9622;
	padding: 0;
	margin:	0;
}

.v {/*Value*/
	font-family: monospace;
	color: #67d8ef;
	padding: 0;
	margin:	0;
}
.cm {/*Comment*/
	font-family: monospace;
	color: #746746;
	padding: 0;
	margin:	0;
}
.i {/*integer*/
	font-family: monospace;
	color: #ac80e8;
	padding: 0;
	margin:	0;
}
.m {/*unit of measurement*/
	font-family: monospace;
	color: #f92472;
	padding: 0;
	margin:	0;
}
/*The above section is for the 'imitation CSS code'*/

/*Hacky fix for bootstrap tomfoolery*/
a:not([href]):not([tabindex]).m {
	line-height: normal;
	font-weight: normal;
	color: #f92472;
}
a:not([href]):not([tabindex]).i {
	line-height: normal;
	font-weight: normal;
	color: #ac80e8;
}
a:not([href]):not([tabindex]).cm {
	line-height: normal;
	font-weight: normal;
	color: #746746;
}
a:not([href]):not([tabindex]).v {
	line-height: normal;
	font-weight: normal;
	color: #67d8ef;
}
a:not([href]):not([tabindex]).o {
	line-height: normal;
	font-style: italic;
	color: #fd9622;
}
a:not([href]):not([tabindex]).s {
	line-height: normal;
	font-weight: normal;
	color: #e7db74;
}
a:not([href]):not([tabindex]).pr {
	line-height: normal;
	font-style: italic;
	color: #fff;
}
a:not([href]):not([tabindex]).pb {
	line-height: normal;
	font-weight: bold;
	color: #f8f8dc;
}
a:not([href]):not([tabindex]).p {
	line-height: normal;
	font-weight: normal;
	color: #f8f8dc;
}
a:not([href]):not([tabindex]).c {
	line-height: normal;
	font-weight: normal;
	color: #a6ce28;
}
.CodeWindowTextBlock {
	font-weight: normal;
	line-height: normal;
}
.LineNumWindow {
	line-height: normal;
}
/*Above is my Hacky fix for bootstrap tomfoolery*/

/*Fix for HTML Contact form sizing and styling from bootstrap*/
/*this needs to change for mobile*/
.form-group {
	margin:0;
}
.form-group > label:not([href]) {
	margin-bottom: 0;
	margin-top: 12px;
}
.form-control {
	height: 36px;
}
textarea .form-control {
	height: 108px;
}
div .g-recaptcha {
	height: 84px;
}
div .g-recaptcha > div > div > iframe {
	margin: 0;
}
button.btn {
	height: 36px;
}
/*Fix for HTML Contact form sizing and styling from bootstrap*/


/* footboard is a footer but also a hacky fix to spacing at the bottom of the page*/
.footboard {
	position: fixed;
	bottom: 0;
	width: 100%;
	height: 8px;
	background-color: #282923;
	z-index: -100;
}

.mobileMenu {
	display: none;
}

@media screen and (max-width: 991px) {
	/* larger tablet styles */
div.headboard {
	display: none;
}
	.mobileMenu {
		display: block;
		position: fixed;
		height: 35px;
		width: 100%;
		z-index: 2;
		background-color: #6d6e6a;
	}
	.mobileMenu > .bg-dark {
		background-color: #6d6e6a !important;
	}
	.mobileMenu >.nav-tabs {
		border-bottom: none;
		background-color: #6d6e6a;
		height: 35px;
	}
	.mobileMenu >.bg-dark {
		background-color: #6d6e6a;
	}
	.mobileMenu >.nav-tabs > .nav-item {
		margin-bottom: 0;
		height: 35px;
		background-color: #6d6e6a;
	}
	.mobileMenu >.nav-tabs > .nav-item > .nav-link {
		border-bottom: none;
		height: 35px;
		color: #f8f8dc;

	}
	.mobileMenu >.nav-tabs > .nav-item > .nav-link.active {
		color: #f8f8dc;
		background-color: #282923;
		border-color: #282923;
		height: 35px;
	}
}

@media only screen and (max-width: 1074px) and (min-width: 768px) {
	/*text wrapping needs to start here*/

	.socialMediaContainer {
		position: absolute;
		right: 0;
		margin-right: 30px;
		top: 0;
	}

	.githubImage {
		max-height: 28px;
		padding: 0 4px;
	}

	.linkedinImage {
		max-height: 35px;
		padding: 0 4px;
	}
	div#aboutPage > div.ClassContainer {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.aboutMeImage {
		max-width: 66vw;
		border: #282923 5px solid;
		align-self: center;
	}
}


@media only screen and (min-width: 480px) and (max-width: 767px)  {
	/* medium tablet styles */
	div.headboard {
		display: none;
	}

	.socialMediaContainer {
		position: absolute;
		right: 0;
		margin-right: 25px;
	}

	.githubImage {
		max-height: 28px;
		padding: 0 3px;
	}

	.linkedinImage {
		max-height: 35px;
		padding: 0 3px;
	}
	div#aboutPage > div.ClassContainer {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.aboutMeImage {
		max-width: 66vw;
		border: #282923 5px solid;
		align-self: center;
	}
}

@media only screen and (max-width: 479px) {
	/* mobile styles */

	div.headboard {
		display: none;
	}
	.nav-link {
		padding: 0.5rem;
	}

	div.socialMediaContainer {
		position: fixed;
		border-radius: 8px 8px 0 0;
		/*padding-left: 3px;*/
		bottom: 0;
		right: 0;
		top: auto;
		height: 35px;
		/*max-width: 90px;*/
		background-color: #6d6e6a;
		margin-right: 15px;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
	}
	div.socialMediaContainer > a {
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}
	div.socialMediaContainer > #webringWrapper {
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}
	.githubImage {
		max-height: 28px;
		padding: 0 1px;
	}

	.linkedinImage {
		max-height: 35px;
		padding: 0 1px;
	}
	div#aboutPage > div.ClassContainer {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.aboutMeImage {
		max-width: 75vw;
		border: #282923 5px solid;
		align-self: center;
	}
}

@media only screen and (max-width: 479px) and (orientation: portrait) {
	.PortfolioItem	{
		flex-direction: column;
	}
	.PortfolioImage {
		margin-bottom: 13px;
	}
	.ClassBody > .ClassBody {
		border-left: none;
		padding: 0;
	}
	a {
		word-break: break-word;
	}
	.input-group {
		width: 95%;
	}
	div#aboutPage > div.ClassContainer {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.aboutMeImage {
		max-width: 75vw;
		border: #282923 5px solid;
		align-self: center;
	}
}