/* Mobile First web Design. */
* {
	/* font-size: 30px; */ /* 24px;*/
	/* font-family: 'Roboto Condensed', sans-serif; */
}


div.keyboredNav {
	text-align: center;
	margin-top: 0; /* 25%; */
	/* border: 2.5px solid #617d93; */
}


div.keyboredNav a {
	font-size: 140px;
	display: block;
	text-decoration: none;
}

/* Animation Help: https://www.w3schools.com/css/css3_animations.asp */
@keyframes navBounce {
	/* 0% {transform: translate(0, 0);} */
	50% {transform: translate(0, -25px);}
	100% {transform: translate(0, 0);}
}

div.keyboredNav a:hover {
	display: inline-block; /* Do this because transform does not work on inline elements... */
	animation-name: navBounce;
	animation-duration: 0.5s;
}

#bg { /* The background canvas */
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}


#k, #k:visited {
	font-family: 'Arvo', serif;
	color: rgb(0,0,0);
}
#k:hover {
	color: rgb(255,255,255);
	border-bottom: 7.5px solid rgb(255,255,255);
}
#kCurrent, #kCurrent:visited {
	font-family: 'Arvo', serif;
	color: rgb(0,0,0);
	border-bottom: 7.5px solid rgb(0,0,0);
}
#kCurrent:hover {
	color: rgb(255,255,255);
	border-bottom: 7.5px solid rgb(255,255,255);
}


#e, #e:visited {
	font-family: 'Raleway', sans-serif;
	color: rgb(30,30,30);
}
#e:hover {
	color: rgb(225,225,225);
	border-bottom: 7.5px solid rgb(225,225,225);
}
#eCurrent, #eCurrent:visited {
	font-family: 'Raleway', sans-serif;
	color: rgb(30,30,30);
	border-bottom: 7.5px solid rgb(30,30,30);
}
#eCurrent:hover {
	color: rgb(225,225,225);
	border-bottom: 7.5px solid rgb(225,225,225);
}


#y, #y:visited {
	font-family: 'Space Mono', monospace;
	color: rgb(60,60,60);
}
#y:hover {
	color: rgb(195,195,195);
	border-bottom: 7.5px solid rgb(195,195,195);
}
#yCurrent, #yCurrent:visited {
	font-family: 'Space Mono', monospace;
	color: rgb(60,60,60);
	border-bottom: 7.5px solid rgb(60,60,60);
}
#yCurrent:hover {
	color: rgb(195,195,195);
	border-bottom: 7.5px solid rgb(195,195,195);
}


#b, #b:visited {
	font-family: 'Nanum Gothic Coding', monospace;
	color: rgb(90,90,90);
}
#b:hover {
	color: rgb(165,165,165);
	border-bottom: 7.5px solid rgb(165,165,165);
}
#bCurrent, #bCurrent:visited {
	font-family: 'Nanum Gothic Coding', monospace;
	color: rgb(90,90,90);
	border-bottom: 7.5px solid rgb(90,90,90);
}
#bCurrent:hover {
	color: rgb(165,165,165);
	border-bottom: 7.5px solid rgb(165,165,165);
}


#o, #o:visited {
	font-family: 'Nova Mono', monospace;
	color: rgb(120,120,120);
}
#o:hover {
	color: rgb(135,135,135);
	border-bottom: 7.5px solid rgb(135,135,135);
}
#oCurrent, #oCurrent:visited {
	font-family: 'Nova Mono', monospace;
	color: rgb(120,120,120);
	border-bottom: 7.5px solid rgb(120,120,120);
}
#oCurrent:hover {
	color: rgb(135,135,135);
	border-bottom: 7.5px solid rgb(135,135,135);
}


#r, #r:visited {
	font-family: 'VT323', monospace;
	color: rgb(150,150,150);
}
#r:hover {
	color: rgb(105,105,105);
	border-bottom: 7.5px solid rgb(105,105,105);
}
#rCurrent, #rCurrent:visited {
	font-family: 'VT323', monospace;
	color: rgb(150,150,150);
	border-bottom: 7.5px solid rgb(150,150,150);
}
#rCurrent:hover {
	color: rgb(105,105,105);
	border-bottom: 7.5px solid rgb(105,105,105);
}


#d, #d:visited {
	font-family: 'Nova Mono', monospace;
	color: rgb(180,180,180);
}
#d:hover {
	color: rgb(75,75,75);
	border-bottom: 7.5px solid rgb(75,75,75);
}
#dCurrent, #dCurrent:visited {
	font-family: 'Nova Mono', monospace;
	color: rgb(180,180,180);
	border-bottom: 7.5px solid rgb(180,180,180);
}
#dCurrent:hover {
	color: rgb(75,75,75);
	border-bottom: 7.5px solid rgb(75,75,75);
}


/* For Desktop Mode: */
@media (min-width: 1000px) {

	* {
		/* font-size: 18px; */
	}
	
	div.keyboredNav {
		margin-top: 15%; /* 20%; */
	}
	
	div.keyboredNav p {
		font-size: 180px;
		display: inline;
		margin: 0;
		padding: 0;
	}
	
	div.keyboredNav a {
		font-size: 180px;
		display: inline;
		margin: 0;
		padding: 0;
		text-decoration: none;
	}
	

}