html {
	min-height: 100%;
	font-family: veranda, sans-serif;
	width: 100%;
	scroll-behavior: smooth;
}

img {
	border-radius: 10%;
}

body {
	background: #e5ecec;
	padding: 0px;
	margin: 0px;
}

.checkbox {
	display: none;
}

.checkbox + label {
	position: fixed;
	background: url("ham3.png");
	visibility: hidden;
	opacity: .75;
	filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.35));
	height: 50px;
	width: 50px;
	right: 14px;
	top: 10px;
}

.Container {

}

.LeftPane {
	text-align: center;
	background: #002323;
	margin-left: -300px;
	animation: LeftPaneFadeIn .75s;
	animation-fill-mode: forwards;
	overflow: auto;
	color: #e5ecec;
	padding-right: 50px;
	padding-left: 50px;
	padding-top: 50px;
	width: 200px;
	height: 100%;
	position: fixed;
	z-index: 1;
}

.Buttons {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
}

.Buttons input {
	background-repeat: no-repeat;
	background-position: center;
	animation: ButtonBorderFade .25s;
	color: #e5ecec;
	width: 50px;
	height: 40px;
	border-radius: 15px;
	border-width: 2px;
	margin-left: 10px;
	margin-right: 10px;
	border-color: transparent;
	font-size: 16px;
	font-weight: bold;
}

.Buttons input:hover {
	cursor: pointer;
	animation: ButtonBorder .25s;
	border-style: solid;
	border-width: 2px;
	border-color: #e5ecec;
}

.EmailButton {
	background: #004040 url("email.png");
	background-size: 30px 20px;
}

.PhoneButton {
	background: #004040 url("phone.png");
	background-size: 20px 20px;
}

.JumpButtons {
	text-align: left;
	font-weight: normal;
}

.JumpButtons a {
	animation: NavigationUnderlineFade .5s;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-underline-offset: 4px;
	color: #749999;
	font-weight: bold;
}

.JumpButtons a:hover {
	text-decoration-line: underline;
	text-decoration-color: transparent;
	animation: NavigationUnderline .55s;
	animation-fill-mode: forwards;
	color: #e5ecec;
}

a:link {
	text-decoration: none;
}

.Welcome {
	font-size: 20px;
	color: #1f2a2a;
}

.RightPane {
	animation: RightPaneFadeIn 1s;
	background: #e5ecec;
	color: #002323;
	padding: 75px;
	padding-top: 20px;
	padding-bottom: 80px;
	width: calc(100% - 450px);
	float: right;
}

.About {
	font-size: 18px;
	border-width: 2px;
	border-style: solid;
	border-radius: 20px;
	border-color: #749999;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
	padding-right: 30px;
	max-width: 1400px;
}

.AboutTitle {
	color: #002323;
	position: absolute;
	margin-top: -80px;
	margin-left: -5px;
	background: #e5ecec;
	height: 60px;
	padding-left: 5px;
	padding-right: 5px;
}

.Resume {
	font-size: 18px;
	border-width: 2px;
	border-style: solid;
	border-radius: 20px;
	border-color: #749999;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
	padding-right: 30px;
	max-width: 1400px;
}

hr {
	color: #749999;
}

.ResumeTitle {
	color: #002323;
	position: absolute;
	margin-top: -80px;
	margin-left: -5px;
	background: #e5ecec;
	height: 60px;
	padding-left: 5px;
	padding-right: 5px;
}

.Experience {
	padding-bottom: 10px;
}

.Education {
	padding-bottom: 10px;
}

.Certifications {
	padding-bottom: 10px;
}

.Contact {
	font-size: 18px;
	border-width: 2px;
	border-style: solid;
	border-radius: 20px;
	border-color: #749999;
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 30px;
	padding-right: 30px;
	max-width: 1400px;
}

.ContactTitle {
	color: #1f2a2a;
	position: absolute;
	margin-top: -90px;
	margin-left: -5px;
	background: #e5ecec;
	height: 60px;
	padding-left: 5px;
	padding-right: 5px;
}

a:hover {
	color: #ff6666;
}

.ResumeDownload {
	font-size: 18px;
	border-width: 2px;
	border-style: solid;
	border-radius: 20px;
	border-color: #749999;
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 30px;
	padding-right: 30px;
	max-width: 1400px;
}

.ResumeDownloadTitle {
	color: #1f2a2a;
	position: absolute;
	margin-top: -90px;
	margin-left: -5px;
	background: #e5ecec;
	height: 60px;
	padding-left: 5px;
	padding-right: 5px;
}

.ResumePDF {
	color: #e5ecec;
	background: #749999;
	animation: DownloadBorderFade .25s;
	border-width: 2px;
	border-style: solid;
	border-radius: 12px;
	border-color: transparent;
	padding: 10px;
}

.ResumePDF:hover {
	color: #e5ecec;
	animation: DownloadBorder .25s;
	animation-fill-mode: forwards;
}

.ResumeDOCX {
	color: #e5ecec;
	background: #749999;
	animation: DownloadBorderFade .25s;
	border-width: 2px;
	border-style: solid;
	border-radius: 12px;
	border-color: transparent;
	padding: 10px;
}

.ResumeDOCX:hover {
	color: #e5ecec;
	animation: DownloadBorder .25s;
	animation-fill-mode: forwards;
}

.Footer {
	float: right;
	color: gray;
	visibility: hidden;
	animation: FooterFadeIn 1s;
	animation-delay: .5s;
	animation-fill-mode: forwards;
	width: 100%;
	background-color: #000f0f;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 14px;
	z-index: 2;
}

/* Animations */

@keyframes RightPaneFadeIn {
	0%		{opacity: 0; margin-right: -300px;}
	100%	{opacity: 1; margin-right: 0px;}
}

@keyframes LeftPaneFadeIn {
	0%		{margin-left: -300px;}
	100%	{margin-left: 0px;}
}

@keyframes LeftPaneFadeOut {
	0%		{margin-left: 0px;}
	100%	{margin-left: -300px; visibility: visible;}
}

@keyframes RightPaneGrow {
	0%		{opacity: 0; margin-right: -200px;}
	100%	{opacity: 1; margin-right: 0px;}
}

@keyframes RightPaneGrowSmall {
	0%		{opacity: 0; margin-right: -100px;}
	100%	{opacity: 1; margin-right: 0px;}
}

@keyframes CheckboxFadeIn {
	0%		{opacity: 0; visibility: hidden;} 
	100%	{opacity: .75; visibility: visible;}
}

@keyframes FooterFadeIn {
	0%		{opacity: 0;}
	100%	{opacity: 1; visibility: visible;}
}

@keyframes HamEnter {
	0%		{opacity: .75;}
	100%	{opacity: .9;}	
}
	
@keyframes HamLeave {
	0%		{opacity: .9;}
	100%	{opacity: .75;}	
}

@keyframes ButtonBorder {
	0%		{border-color: transparent;}
	100%	{border-color: #e5ecec;}
}

@keyframes ButtonBorderFade {
	0%		{border-color: #e5ecec;}
	100%	{border-color: transparent;}
}

@keyframes DownloadBorder {
	0%		{border-color: transparent; color: #e5ecec;}
	100%	{border-color: #ff6666; color: #ff6666;}
}

@keyframes DownloadBorderFade {
	0%		{border-color: #ff6666; color: #ff6666;}
	100%	{border-color: transparent; color: #e5ecec;}
}

@keyframes NavigationUnderline {
	0%		{text-decoration-color: transparent; color: #749999;}
	100%	{text-decoration-color: #e5ecec; color: #e5ecec;}
}

@keyframes NavigationUnderlineFade {
	0%		{text-decoration-color: #e5ecec; color: #e5ecec;}
	100%	{text-decoration-color: transparent; color: #749999;}
}

@media screen and (max-width: 1300px) {
	.RightPane {
		animation: RightPaneGrow 1s;
		width: calc(100% - 150px);
	}
	
	.LeftPane {
		animation: LeftPaneFadeIn .5s;
		animation-fill-mode: forwards;
	}
	
	.checkbox + label {
		visibility: visible;
	}
	
	.checkbox + label:hover {
		cursor: pointer;
		animation: HamEnter .2s;
		animation-fill-mode: forwards;
	}
	
	.checkbox + label:not(:hover) {
		animation: HamLeave .2s;
		animation-fill-mode: forwards;
	}
	
	.checkbox:checked ~ .LeftPane {
		animation: LeftPaneFadeOut .5s;
		animation-fill-mode: forwards;
	}
}

@media screen and (max-width: 700px) {
	.RightPane {
		animation: RightPaneGrowSmall 1s;
		width: calc(100% - 50px);
		padding: 25px;
	}
}