:root {
	--main-font: normal normal 200 normal small "SUSE", sans-serif;
	--main-fontSize-nav: 9cqw;
}

body {
	background-color: #000000;
	background: 50vw 25vh / 400vw 400vh no-repeat linear-gradient(#000000, #3a7fff);
	color: white;
	overflow: hidden;
	animation: gradient 40s infinite;

	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	
	display: flex;
	flex-direction: column;
	align-items: center;
}

@keyframes gradient {
	0% {
		background-position: 50% 25%;
	}

	50% {
		background-position: 50% 0%;
	}

	100% {
		background-position: 50% 25%;
	}
}

a {
	text-decoration: unset;
	color: unset;
}

.content {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-direction: column;
	width: 80vmin;
	height: 100%;
}

#Keyboard {
	/* position: fixed;
	left: 50vw;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: -1;
	opacity: 100%; */
	width: 20%;
	height: 130%;
}

.titleCard {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.subtitleCard {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-self: end;
	width: 50%;
}

.nameTitle {
	font: var(--main-font);
	fill: white;
	font-size: 100%;
}

.discipline {
	font: var(--main-font);
	fill: white;
	text-align: center;
}

.verticalNav {
	position: relative;
	container-type: size;
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	width: 30vmin;
	height: 10vmin;
	margin-top: 5cqw;
	perspective: 40cm;
}

.navItem {
	font: var(--main-font);
	font-size: 10cqw;
	text-align: center;

	flex-basis: 100%;
	flex-grow: 1;
	flex-shrink: 1;
}

.verticalNav:not(:has(.navItem:hover, .navItem:active, .navItem:focus	)) > :first-child:before {
	display: block;
	position: absolute;
	content: "\25B7";
	left: -5cqw;
	animation: caretBounce 0.9s ease-in-out infinite;
}

		.navItem:hover.disabled {
	background-color: #ff000044;
	border-color: red;
}

.navItem:hover.disabled:after {
	font-family: "Bytesized";
	font-size: 70%;
	color: red;
	content: "UNAVAILABLE!";
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	right: 0;
	text-align: center;
	background-color: #220000DD;
	padding: 1vw;
}

.navItem:active.disabled:after {
	font-family: "Bytesized";
	font-size: 70%;
	color: red;
	content: "UNAVAILABLE!";
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	right: 0;
	text-align: center;
	background-color: #220000DD;
	padding: 1vw;
}

.navItem:hover, .navItem:active, .navItem:focus {
	background-color: #ffffff44;
	transform: rotate(0deg) scale(1.05) translateY(-10%);
	filter: drop-shadow(1px 1px 10px rgb(132, 196, 255));
}

.navItem:hover:before, .navItem:active::before, .navItem:focus:before {
	display: block;
	position: absolute;
	content: "\25B7";
	left: -5cqw;
	animation: caretBounce 0.5s ease-in-out infinite;
}

@keyframes caretBounce {
	to {
		transform: translateX(-1vw);
	}
}

.gridBackground {
	position: fixed;
	top: -100vh;
	bottom: -10vh;
	left: -10vw;
	right: -10vw;
	z-index: -3;
	transform: perspective(40vmax) rotateX(10deg);

	--t: max(0.05vmax, 1px);
	--line-colour: #84C4FF;
	--gap: 18vmin;
	background-image:	linear-gradient(var(--line-colour), var(--line-colour) var(--t), #00000000 var(--t), #00000000 var(--gap)),
						linear-gradient(90deg, var(--line-colour), var(--line-colour) var(--t), #00000000 var(--t), #00000000 var(--gap));
	background-size: var(--gap) var(--gap);
	background-color: rgba(71, 212, 255, 0);
	opacity: 50%;
	
	filter: blur(1px);
	animation: gridScroll 50s linear infinite;
}

@keyframes gridScroll {
	to {
		background-position: 120vw -120vh;
	}
}