/* Background */
.programming .background_playground {
	background : rgba(0, 32, 0, 0.5) ;
}


/* Hero */
.programming .hero {
	--heroAnimationDelay : 0s ;
	
	font-family : "Courier New", Courier, monospace ;
}

.programming .hero_header {
	--heroHeaderZoomMax : 1.5 ;
	
	height : 120px ;
	width : min(100%, 640px) ;
	
	background : rgba(0, 16, 0, 0.9) ;
	border : 2px solid rgba(64, 64, 64, 0.4) ;
	
	color : white ;
	
	transition : scale 1s ease 0.5s ;
}
	.programming .hero_header.emphasize {
		scale : var(--heroHeaderZoomMax) ;
		
		transition-delay : 0s ;
	}
	.programming .hero_header.all_validated {
		animation : programming_heroHeaderAllValidatedAnimation 0.75s ease 0.1s forwards ;
	}
		@keyframes programming_heroHeaderAllValidatedAnimation {
			0% {
				
			}
			25% {
				background : rgba(0, 192, 0, 0.9) ;
				border-color : rgba(192, 192, 192, 0.4) ;
				box-shadow : 0px 0px 20px rgba(0, 192, 0, 0.9) ;
			}
			100% {
				
			}
		}

.programming .hero_title {
	position : absolute ;
	
	font-size : 2.25em ;
	font-weight : bold ;
	letter-spacing : 3px ;
}

.programming .hero_title h2 {
	display : flex ;
	flex-direction : row ;
	gap : 5px ;
}

.programming .hero_title_letter {
	--index : 0 ;
	--color : min(calc(192 - (10 * var(--index))), 256) ;
	
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	
	color : rgba(var(--color), var(--color), var(--color), 0.75) ;
	
	opacity : 0 ;
	
	transition : color 0.2s ease, scale 0.2s ease ;
	
	animation : programming_heroTitleLetterAnimation 1s ease calc(0.05s * var(--index)) forwards ;
}
	@keyframes programming_heroTitleLetterAnimation {
		0% {
			opacity : 0 ;
			scale : 0.9 ;
		}
		100% {
			opacity : 1 ;
			scale : 1 ;
		}
	}
	.programming .hero_title_letter.start {
		color : rgba(128, 192, 128, 0.75) ;
		opacity : 1 ;
	}
	
	.programming .hero_title_letter.correct {
		opacity : 1 ;
		
		animation : programming_heroTitleLetterCorrectAnimation 1.25s ease forwards ;
	}
		@keyframes programming_heroTitleLetterCorrectAnimation {
			0% {
				
			}
			15% {
				color : white ;
				text-shadow : 0px 0px 10px white ;
				scale : 1.5 ;
			}
			30% {
				scale : 1.2 ;
			}
			100% {
				color : #80F080 ;
				scale : unset ;
				text-shadow : 0px 0px 3px #C0FFC0 ;
			}
		}

.programming .hero_description {
	--unitAnimationDuration : 0.25s ;
	--unitAnimationDelayBase : 0.5s ;
	--unitAnimationDelayMultiplier : 0.04s ;
	
	background : rgba(0, 16, 0, 0.9) ;
}

.programming .hero_description_letter {
	--index : 0 ;
	--color : min(calc(224 - (5 * var(--index))), 256) ;
	
	margin-right : -1px ;
	
	display : flex ;
	flex-direction : row ;
	flex-wrap : nowrap ;
	justify-content : center ;
	align-items : center ;
	
	color : rgba(var(--color), var(--color), var(--color), 1) ;
	
	opacity : 1 ;
	
	transition : color 0.2s ease, scale 0.2s ease ;
}
	.programming .hero_description_letter.start {
		color : rgba(128, 192, 128, 1) ;
		opacity : 1 ;
	}
	
	.programming .hero_description_letter.correct {
		opacity : 1 ;
		
		animation : programming_heroDescriptionLetterCorrectAnimation 1.25s ease forwards ;
	}
		@keyframes programming_heroDescriptionLetterCorrectAnimation {
			0% {
				
			}
			15% {
				color : white ;
				text-shadow : 0px 0px 10px white ;
				scale : 1.5 ;
			}
			30% {
				scale : 1.2 ;
			}
			100% {
				color : white ;
				scale : unset ;
				text-shadow : 0px 0px 3px #C0FFC0 ;
			}
		}