@font-face {
	font-family: 'American Captain';
	src: url("American Captain.ttf");
	font-weight: bold;
	font-style: bold;
}
@font-face {
	font-family: 'Cutting Corners';
	src: url('Cutting Corners.ttf');
	font-weight: bold;
	font-style: bold;
}
* {
	margin: 0;
	padding: 0;
	transition: all .3s ease;
	animation-fill-mode: forwards;
}
.content{
	display: none;
}
/* Menu, Viewarea is left right unless mobile then it's up,down */
@media only screen and (max-width: 700px) {
	#menu {
	position: absolute;
	top:50dvh;
	width: 100dvw;
	height: 50dvh;
	display: flex;
	justify-content: center;
	align-items: center;
}
#viewarea {
	position: absolute;
	top: 0dvh;
	width: 100dvw;
	height: 50dvh;
	display: flex;
}
#viewarea .content {
	width: 80dvw;
	height: 40dvh;
	position: absolute;
	top: 5dvh;
	left: 10dvw;
}
}
@media only screen and (min-width: 700px) {
	#menu {
	position: absolute;
	left:0dvw;
	width: 50dvw;
	height: 100dvh;
	display: flex;
	justify-content: center;
	align-items: center;
}
#viewarea {
	position: absolute;
	left:50dvw;
	width: 50dvw;
	height: 100dvh;
}
#viewarea .content {
	width: 40dvw;
	height: 80dvh;
	position: absolute;
	padding: 1em;
	top: 10dvh;
	left: 5dvw;
}
}
h1 {
	text-align: center;
	margin: 0 auto;
}
#menu ul {
	list-style-type: none;
}
#menu ul li {
	text-align: center;
}
#menu ul li a{
	font-family: 'American Captain', sans-serif;
	text-decoration: none;
	font-size: 10dvw;
}
/* Batman Vibes - Bat Signal */
#batlink {
	color:#fdff00;
	text-decoration: none;
	padding: 1em 1em;
	background-color: #282e3c;
	border: 2px #988829 solid;
	text-align: center;
	position: absolute;
	margin: 2em 30%;
}

.contactme.active {
	color: #fdff00;
}
#menu:has(.contactme.active){
 background-color: #282e3c;
}
body:has(.contactme.active) #viewarea{
	background-color: #282e3c;
}
#menu:has(.contactme.active) ul li a:not(.contactme){
	color: #988829;
}

#viewarea .active {
	display: initial;
	overflow: scroll;
}
/* Golden gate bridge red, irish flag, and just a deep green background*/
.aboutme h2{ 
display: block;
text-align: center;
 }

#menu .aboutme.active {
	color: #C0362D;
}

#menu:has(.aboutme.active) ul li:nth-child(4n+1) a:not(.aboutme) {
	color: #ecc8a4;
}
#menu:has(.aboutme.active) ul li:nth-child(4n+2) a:not(.aboutme) {
	color: #169b62;
}
#menu:has(.aboutme.active) ul li:nth-child(4n+3) a:not(.aboutme) {
	color: #ffffff;
}
#menu:has(.aboutme.active) ul li:nth-child(4n+4) a:not(.aboutme) {
	color: #ff883e;
}
body:has(.aboutme.active) #viewarea{
	background-color: #123524;
}
#menu:has(.aboutme.active) {
	background-color: #123524;
}

body:has(.aboutme.active) #viewarea .content {
	border: 5px outset #deb887;
	background-color: #deb887;
	font-family: 'Cutting Corners', sans-serif;
	color: #000;
}
/* Pac-Man: Others are ghosts, you are pacman */
.fungames.active {
	color: #FFFF00;
}
.fungames a:link{
	color: #00ffff;
}
.fungames a:visited {
	color: #ffb8ff;
}
#menu:has(.fungames.active) ul li:nth-child(4n) a:not(.fungames) {
	color: #ffb8ff;	
}
#menu:has(.fungames.active) ul li:nth-child(4n+1) a:not(.fungames) {
	color: #00ffff;
}
#menu:has(.fungames.active) ul li:nth-child(4n+2) a:not(.fungames) {
	color: #ffb852;	
}
#menu:has(.fungames.active) ul li:nth-child(4n+3) a:not(.fungames) {
	color: #ff0000;	
}
body:has(.fungames.active) #viewarea{
	background-color: #000000;
}
body:has(.fungames.active) #viewarea .content {
	border: 5px dotted #fff;
}

#menu:has(.fungames.active){
	background-color: #000000;
}