body {
	font-family: "BebasNeueBold", Helvetica, Arial, sans-serif;
	margin: 0;
	color: white;
	background: linear-gradient(149deg, #292929, #000000);
	background-size: 400% 400%;

	-webkit-animation: home 32s ease infinite;
	-moz-animation: home 32s ease infinite;
	animation: home 32s ease infinite;
	-webkit-transition: all 2.5s linear;
	-moz-transition: all 2.5s linear;
	-o-transition: all 2.5s linear;
	transition: all 2.5s linear
}
#background {
	position: fixed;
	content: "";
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0	
}
#background.programming {
	background: linear-gradient(155deg, #080449, #000000);
	background-size: 400% 400%;

	-webkit-animation: programming 43s ease infinite;
	-moz-animation: programming 43s ease infinite;
	animation: programming 43s ease infinite
}
#background.graphics {
	background: linear-gradient(193deg, #3a003e, #000000);
	background-size: 400% 400%;

	-webkit-animation: graphics 43s ease infinite;
	-moz-animation: graphics 43s ease infinite;
	animation: graphics 43s ease infinite
}
#background.levels {
	background: linear-gradient(96deg, #002001, #000000);
	background-size: 400% 400%;

	-webkit-animation: levels 50s ease infinite;
	-moz-animation: levels 43s ease infinite;
	animation: levels 43s ease infinite
}
#background.webdev {
	background: linear-gradient(126deg, #002e30, #000000);
	background-size: 400% 400%;

	-webkit-animation: webdev 43s ease infinite;
	-moz-animation: webdev 43s ease infinite;
	animation: webdev 43s ease infinite
}
#background.music {
	background: linear-gradient(200deg, #340000, #000000);
	background-size: 400% 400%;

	-webkit-animation: music 43s ease infinite;
	-moz-animation: music 43s ease infinite;
	animation: music 43s ease infinite
}
a, a:focus {
	color: #33E3FF;
	text-decoration: none;
	outline:none;
	cursor: pointer
}
a:hover {
	text-decoration: none
}

#content {
	width: 100%
}

/* Header Info */
#upper {
	display: flex
}
#upper:first-child {
	margin-right: auto
}
#upper:last-child { 
	margin-left: auto; 
}
.separator {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center
}
#header, #body {
	position: relative;
	flex: 1.5;
	justify-content: center;
	align-items: center;
	border-left: 1px solid rgba(255, 255, 255, .3);
	border-right: 1px solid rgba(255, 255, 255, .3);
	overflow: hidden;
	height: auto;
	margin: 0px;
	padding: 0px;
	display: inline
}
#header {
	border-bottom: 1px solid rgba(255, 255, 255, .3);
	height: 23vw
}
#header img {
	height: 100%;
	width: 100%;
	display: inline;
	outline: none
}
#subject {
	position: absolute;
	text-align: right;
    	bottom: 0px;
	right: 0px;
	margin: 0;
	padding: 0px 10px 0px 0px;
	text-transform: uppercase;
	color: #fff;
	font-size: 2.3vw;
	opacity: .7
}

/* Content Display */
#lower {
	display: flex;
	height: auto;
	padding-bottoM: 60px;
}
#body {
	position: relative;
	padding: 17 15 20 15;
	min-height: 627px;
}
.section { 
	display: block;
	opacity: .8
}
.section span li {
	opacity: .9
}
.graphics-items {
	display: inline-block;
	border: 4px solid #a1a1a1;
	background: #dddddd;
	width: 125px;
	height: 125px;
	border-radius: 5px;
	overflow: hidden;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 5px
}
#main-nav {	
	text-align: right
}
#home-nav {
	text-align: left
}
.nav{
	flex: 1;
	justify-content: center;
	align-items: center;
	padding: 0 10 0 10;
	top: 100px;
	width: auto;
	display: inline-block;
	opacity: 1;
	-webkit-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5))
}
.nav a {
	text-transform: uppercase;
	color: #fff;
	font-size: 2.3vw;
	opacity: .7;
	font-family: "Helvetica";
	text-decoration: none;
	display: block;
	-webkit-user-select: none;       
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}
.nav a:hover {
	opacity: .8;
	-webkit-filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5))
}
summary {
	cursor: pointer; 

}

/* Footer */
#footer {
	position: fixed;
	width: 100%;
	min-height: 70px;
	background: #222;
	text-align: center;
	bottom: 0px;
}
#footer-border hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #fff!important;
	padding: 0 !important;
	margin: 0 !important;
	opacity: .4
}
#footer-title {
	color: #333;
	margin: -1 auto;
	text-transform: uppercase;
	letter-spacing: 6px;
	width: fit-content;
	display: table;
	padding: 0 6 0 11px;
	border: 1px solid transparent;
	background: #969696;
	border-radius: 0px 0px 15px 15px;
	opacity: 1
}
.button {
	text-decoration: none;
	border-color: white;
	font-size: 1em;
	border: 1px solid transparent;
	border-radius: 7px 7px 7px 7px;
	padding: 6px 10px;
	transition: 0.35s
}
.button:hover {
	text-decoration: none;
	color: white!important;
	text-shadow: none;
	background-color: rgba(133, 126, 126, 0.5);
	border: 1x solid rgba(255, 255, 255, 0.5);
	;
	border-radius: 7px 7px 7px 7px;
	padding: 6px 10px;
	transition: 0.35s
}
#footer-links {
	display: flex;
	padding-top: 10px;
	flex-direction: row;
	justify-content: space-between
}
#footer-links a {
	text-decoration: none!important;
	color: #fff;
	opacity: .7
}
#footer-left {
	margin-left: 100px
}
#footer-right {
	margin-right: 100px
}
#return {
	right: 30px;
	bottom: 3px
}
#copyright {
	position: relative;
	margin-top: 10px;
	height: 30px;
	display: flex;
	justify-content: center;
	opacity: .7;
	color: #999;
	font-size: 14px
}
#copyright span {
	display: flex;
	flex: 2;
}
#copyright .separator {
	flex: 0.3;
}

@-webkit-keyframes home {
    0%{background-position:27% 0%}
    50%{background-position:74% 100%}
    100%{background-position:27% 0%}
}
@-moz-keyframes home {
    0%{background-position:27% 0%}
    50%{background-position:74% 100%}
    100%{background-position:27% 0%}
}
@keyframes home {
    0%{background-position:27% 0%}
    50%{background-position:74% 100%}
    100%{background-position:27% 0%}
}

@-webkit-keyframes programming {
    0%{background-position:27% 0%}
    50%{background-position:74% 100%}
    100%{background-position:27% 0%}
}
@-moz-keyframes programming {
    0%{background-position:27% 0%}
    50%{background-position:74% 100%}
    100%{background-position:27% 0%}
}
@keyframes programming {
    0%{background-position:27% 0%}
    50%{background-position:74% 100%}
    100%{background-position:27% 0%}
}

@-webkit-keyframes graphics {
    0%{background-position:1% 0%}
    50%{background-position:99% 100%}
    100%{background-position:1% 0%}
}
@-moz-keyframes graphics {
    0%{background-position:1% 0%}
    50%{background-position:99% 100%}
    100%{background-position:1% 0%}
}
@keyframes graphics {
    0%{background-position:1% 0%}
    50%{background-position:99% 100%}
    100%{background-position:1% 0%}
}

@-webkit-keyframes levels {
    0%{background-position:0% 35%}
    50%{background-position:100% 66%}
    100%{background-position:0% 35%}
}
@-moz-keyframes levels {
    0%{background-position:0% 35%}
    50%{background-position:100% 66%}
    100%{background-position:0% 35%}
}
@keyframes levels {
    0%{background-position:0% 35%}
    50%{background-position:100% 66%}
    100%{background-position:0% 35%}
}

@-webkit-keyframes webdev {
    0%{background-position:0% 23%}
    50%{background-position:100% 78%}
    100%{background-position:0% 23%}
}
@-moz-keyframes webdev {
    0%{background-position:0% 23%}
    50%{background-position:100% 78%}
    100%{background-position:0% 23%}
}
@keyframes webdev {
    0%{background-position:0% 23%}
    50%{background-position:100% 78%}
    100%{background-position:0% 23%}
}

@-webkit-keyframes music {
    0%{background-position:71% 0%}
    50%{background-position:30% 100%}
    100%{background-position:71% 0%}
}
@-moz-keyframes music {
    0%{background-position:71% 0%}
    50%{background-position:30% 100%}
    100%{background-position:71% 0%}
}
@keyframes music {
    0%{background-position:71% 0%}
    50%{background-position:30% 100%}
    100%{background-position:71% 0%}
}

/* MOBILE */
@media (pointer:none), (pointer:coarse), (max-width: 1086px) {
	.separator { 
		display: none
	}
	#header { 
		height: 54vw
	}
	#subject { 
		font-size: 5vw
	}

	#lower {
		display: inline-block;
		height: fit-content
 		height: -moz-max-content;
	}
	#body {
		padding: 17 30 20 30;
		min-height: 502px;
		display: flex;
		justify-content: flex-end;
		width: 70%;
		height: -moz-max-content;
		float: right;
		position: relative
	}
	#main-nav, #home-nav {
		text-align: right;
		height: fit-content;
		height: -moz-max-content;
		justify-content: flex-start;
		width: 30%
	}
	.nav a {
		font-size: 5vw
	}
	.section span, .section details, .section ul, .section h3 {
		font-size: 30px
	}
	.section details ul, .section details span {
		font-size: 21px
	}
	.section h1 {
		font-size: 40px
	}
	#footer * {
		height: 50px;
		font-size: 30px
	}
}