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

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

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

	width: 100vw;
	height: 100vh;
}

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

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

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

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

.twoColumn {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	height: min(50vw, 50vh);
	width: min(80vw, 100vh);
	container-type: inline-size;
}

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

#Keyboard {
	width: 20%;
	height: 130%;
}

#Keyboard:hover::before {
	content: "This work is based on \"Custom Keyboard\" (https://sketchfab.com/3d-models/custom-keyboard-a848df4a6f9147e3b0dd03ddeb8a5c87) by Michael V (https://sketchfab.com/bossdeff) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)";

	position: absolute;
	left: calc( var(--mouse-x) + 1vw);
	top: var(--mouse-y);
	padding: 1vw;
	max-width: 20vw;

	border-radius: 0.5vmin;
	
	font: var(--main-font);

	background-color: #ff000077;
}

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

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

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

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

.backing {
	background-size: 4cqw 4cqw;
	background-image: repeating-linear-gradient(45deg, #ffffff11 0, #ffffff11 0.2vw, #00000000 0, #00000000 50%);

	position: absolute;
	top: -2cqw;
	bottom: -2cqw;
	left: -2cqw;
	right: -2cqw;
	z-index: -2;

	transform: rotateX(35deg);

	pointer-events: none;
}

.outline {
	--s: 10cqw; /* the size on the corner */
	--t: 2cqw;  /* the thickness of the border */
	--g: 0cqw; /* the gap between the border and image */
	
	padding: calc(var(--g) + var(--t));
	outline: var(--t) solid #ffffff55;
	outline-offset: calc(-1*var(--t));
	mask:
	  conic-gradient(at var(--s) var(--s),#0000 75%,#000 0) 0 0/calc(100% - var(--s)) calc(100% - var(--s));
	transition: .4s;

	transform: rotateX(35deg);

	position: absolute;
	top: -3.5cqw;
	bottom: -3.5cqw;
	left: -3.5cqw;
	right: -3.5cqw;
	z-index: -1;

	pointer-events: none;
	transition: top 0.2s cubic-bezier( 1, 0, 1, 0.1 ),
				bottom 0.2s cubic-bezier( 1, 0, 1, 0.1 ),
				left 0.2s cubic-bezier( 1, 0, 1, 0.1 ),
				right 0.2s cubic-bezier( 1, 0, 1, 0.1 );
}

.horizontalNav {
	display: flex;
	flex-direction: row;
	gap: 1cqw;
	perspective: 40vw;
	container-type: inline-size;
	width: 70%;
	margin-top: 5cqw;
	justify-content: center;

}

.navItem {
	font: var(--main-font);
	font-size: var(--main-fontSize-nav);
	text-align: center;

	border: 2cqw solid white;
	
	min-width: 0;
	min-height: 0;
	padding: 3cqw;
	transform: rotateX(35deg);
	transition: transform 0.4s cubic-bezier( 1, 0, 0, 1 );

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

.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 ~ .outline {
	top: -5.5cqw;
	bottom: -5.5cqw;
	left: -5.5cqw;
	right: -5.5cqw;
}

.navItem:active ~ .outline {
	top: -1.5svh;
	bottom: -1.5svh;
	left: -1.5svw;
	right: -1.5svw;
}

text {
	--textColour: white;
}

.manualtextscroll {
	display: block;
	overflow: hidden;
	
	position: fixed;
	left:0;
	right:60vw;
	top:-10vh;
	bottom:-10vh;
	z-index: -2;
	transform: perspective(80vw) rotateY(30deg);

	background: url("consoleText.svg");
	background-size: 100% 43vw;
	filter: blur(0.1vw) drop-shadow(0.1vw 0.1vw 0.4vw rgb(132, 196, 255));
	opacity: 20%;

	animation: codeScroll 25s steps(116,end) infinite;
	animation-delay: -7.5s;
}

.manualtextscroll > svg {
	fill: white;
	height: 100%;
	width: 100%;
	font-family: "Bytesized";
}

@keyframes codeScroll {
	from {
		/* transform: perspective(20vw) rotateY(25deg) translateY(0%); */
		background-position-y: 0vh;
	}

	to {
		/* transform: perspective(20vw) rotateY(25deg) translateY(-200%); */
		background-position-y: -200vh;
	}
}

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

	--t: max(0.05vmax, 1px);
	--line-colour: #84C4FF;
	--gap: 15vmin;
	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: 30%;
	
	filter: blur(1px);
	animation: gridScroll 50s linear infinite;
}

@keyframes gridScroll {
	to {
		/* transform: perspective(10cm) rotateX(8deg) translateX(120vw) translateY(-120vw); */
		background-position: 120vw -120vh;
	}
}

.svgScrollText {
	color: black;
	white-space: wrap;
}

tspan {
	color: white;
}