/* VT323 from Google */
/* vietnamese */
@font-face {
	font-family: 'VT323';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(./pxiKyp0ihIEF2isQFJXUdVNFKPY.woff2) format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
	font-family: 'VT323';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(./pxiKyp0ihIEF2isRFJXUdVNFKPY.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'VT323';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(./pxiKyp0ihIEF2isfFJXUdVNF.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

a {
	color: #00ff00;
	transition: color 0.3s ease-in-out;
}

a:hover {
	color: #00ff00;
}

a:visited {
	color: #00ff00;
}

a:focus {
	outline: 2px solid var(--link-focus-color);
	/* Important for accessibility: indicates focus with keyboard navigation */
	outline-offset: 2px;
	/* Make outline visible */
	color: #00ff00;
}

body {
	background: #000;
	color: #00ff00;
	font-family: 'VT323', monospace;
	font-size: 20px;
	margin: 0;
	padding: 20px;
	/* from the top of the screen */
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Center horizontally */
}

.crt-panel {
	background: #000;
	padding: 15px;
	border: 2px solid #00ff00;
	border-radius: 15px;
	box-shadow: 0 0 10px #00ff00;
	position: relative;
	overflow: hidden;
	max-width: 600px;
	margin: 20px;
}

.dead {

	background: #000;
	padding: 15px;
	border-radius: 15px;
	position: relative;
	overflow: hidden;
	max-width: 600px;
	margin: 20px;

	border: 2px solid #ff89be;
	box-shadow: 0 0 10px #ff89be;
	text-shadow: 0 0 5px #ff89be;
	color: #ff89be;

	opacity: 20%;
}

.invisText {
	color: #000000;
	text-decoration: none;
	text-decoration-line: none;
	text-decoration-thickness: 0;
	text-decoration-color: #000;
	text-shadow: none;
}

.invisText:hover {
	color: #96b8ec !important;
	text-decoration: none;
}

.pink {
	border: 2px solid #ff89be;
	box-shadow: 0 0 10px #ff89be;
	text-shadow: 0 0 5px #ff89be;
	color: #ff89be;
}

.pink a {
	color: #ff89be;
}

.pink a:hover {
	color: #f8a9cd;
}

.pink a:visited {
	color: #c76a94;
}

.pink a:focus {
	color: #f39bc2;
}

.white {
	border: 2px solid #FFFFFF;
	box-shadow: 0 0 10px #FFFFFF;
	text-shadow: 0 0 5px #FFFFFF;
	color: #FFFFFF;
}

.white a {
	color: #FFFFFF;
}

.white a:hover {
	color: #d1d0d0;
}

.white a:visited {
	color: #b7b7b7;
}

.white a:focus {
	color: #FFFFFF;
}


.blue {
	border: 2px solid #9b9eff;
	box-shadow: 0 0 10px #9b9eff;
	text-shadow: 0 0 5px #9b9eff;
	color: #9b9eff;
}

.blue a {
	color: #9b9eff;
}

.blue a:hover {
	color: #c0c2fd;
}

.blue a:visited {
	color: #696bb0;
}

.blue a:focus {
	color: #a6a8e1;
}

.crt-panel::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(to bottom,
			rgba(0, 0, 0, 0.1),
			rgba(0, 0, 0, 0.1) 2px,
			transparent 2px,
			transparent 4px);
	pointer-events: none;
	text-shadow: 0 0 5px #00ff00;
	line-height: 1.5;
	font-size: larger;
}

/* Optional flicker effect */
@keyframes flicker {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.95;
	}

	100% {
		opacity: 1;
	}
}

.crt-panel:hover {
	animation: flicker 0.3s infinite;
}


.row-container {
	display: flex;
	justify-content: center;
	/* Space items evenly */
	width: 100%;
	/* Take up available width */
	max-width: 600px;
}

.row-panel {
	flex: 1;
	/* Distribute space evenly */
	min-width: 80px;
	/* Prevent panels from collapsing too much */
	text-align: center;
	margin: 5px;
}

#bottom-panel {
	/* Add any specific styling for the large bottom panel */
}

.body-text {
	font-size: 20px;
}

.contentheader {
	font-size: 28px;
	border-width: 0;
	box-shadow: none;
}

.codediv {
	overflow-x: auto;
	width: 300px;

}

@media (min-width: 500px) {
	.codediv {
		width: 450px;
		/* Width for tablets */
	}
}

@media (min-width: 610px) {

	/* Example: Larger desktop screens */
	.codediv {
		width: 600px;
		/* Width for larger screens */
	}
}