/* Mobile First web Design. */

body {
	background-color: rgb(240,240,240);
}

nav.keyboredNav {
	position: fixed; /* sticky; */
	top: 0;
	right: 0;
	
	padding: 10px;
	background-color: rgb(240,240,240);
	border-bottom: 5px solid rgb(230,230,230);
	border-left: 5px solid rgb(230,230,230);
	border-radius: 0 0 0 10px; /* top-left, top-right, bottom-right, bottom-left */
	margin-left: 100%;
	
	font-size: 85px; /* 30px; */
}


nav.keyboredNav a {
	display: inline;
	margin: 0;
	padding: 0;
	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);}
}

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

#k, #k:visited {
	font-family: 'Arvo', serif;
	color: rgb(0,0,0);
}
#k:hover {
	color: rgb(255,255,255);
	border-bottom: 2.5px solid rgb(255,255,255);
}
#kCurrent, #kCurrent:visited {
	font-family: 'Arvo', serif;
	color: rgb(0,0,0);
	border-bottom: 2.5px solid rgb(0,0,0);
}
#kCurrent:hover {
	color: rgb(255,255,255);
	border-bottom: 2.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: 2.5px solid rgb(225,225,225);
}
#eCurrent, #eCurrent:visited {
	font-family: 'Raleway', sans-serif;
	color: rgb(30,30,30);
	border-bottom: 2.5px solid rgb(30,30,30);
}
#eCurrent:hover {
	color: rgb(225,225,225);
	border-bottom: 2.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: 2.5px solid rgb(195,195,195);
}
#yCurrent, #yCurrent:visited {
	font-family: 'Space Mono', monospace;
	color: rgb(60,60,60);
	border-bottom: 2.5px solid rgb(60,60,60);
}
#yCurrent:hover {
	color: rgb(195,195,195);
	border-bottom: 2.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: 2.5px solid rgb(165,165,165);
}
#bCurrent, #bCurrent:visited {
	font-family: 'Nanum Gothic Coding', monospace;
	color: rgb(90,90,90);
	border-bottom: 2.5px solid rgb(90,90,90);
}
#bCurrent:hover {
	color: rgb(165,165,165);
	border-bottom: 2.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: 2.5px solid rgb(135,135,135);
}
#oCurrent, #oCurrent:visited {
	font-family: 'Nova Mono', monospace;
	color: rgb(120,120,120);
	border-bottom: 2.5px solid rgb(120,120,120);
}
#oCurrent:hover {
	color: rgb(135,135,135);
	border-bottom: 2.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: 2.5px solid rgb(105,105,105);
}
#rCurrent, #rCurrent:visited {
	font-family: 'VT323', monospace;
	color: rgb(150,150,150);
	border-bottom: 2.5px solid rgb(150,150,150);
}
#rCurrent:hover {
	color: rgb(105,105,105);
	border-bottom: 2.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: 2.5px solid rgb(75,75,75);
}
#dCurrent, #dCurrent:visited {
	font-family: 'Nova Mono', monospace;
	color: rgb(180,180,180);
	border-bottom: 2.5px solid rgb(180,180,180);
}
#dCurrent:hover {
	color: rgb(75,75,75);
	border-bottom: 2.5px solid rgb(75,75,75);
}




/* For Desktop Mode: */
@media (min-width: 1000px) {
	
	nav.keyboredNav {
		font-size: 60px;
		margin-left: 500px;
		/* background-color: transparent; */ /*Could also do "rgba(0,0,0,0)" to make the background transparent*/
		/* border: 0; */
	}
	

}