body {
	background: #000;
	font-family: monospace;
	width: 100dvw;
	height: 100dvh;
	margin: 0;
	overflow: hidden;
	color: #20e20c;
	user-select: none;
	font-size: 2rem;
	text-shadow: #158608 0px 0px 5px, #20e20c 0px 0px 5px;
	/* box-shadow: inset 0 0 10rem -2rem rgba(32, 226, 12, 0.2); */

}

#overlay {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(/scanlines.png);
	background-size: 100dvh;
	/* mix-blend-mode: color-burn; */
	opacity: 0.5;
	pointer-events: none;
	z-index: 999;
}

/* #overlay-2 {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background-image: url(/b.gif);
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #20c20c;
	background-blend-mode: multiply;
	z-index: -1;
	transform: scaleX(-1);
	opacity: 0.5;
} */

/* #overlay-3 {
	transform: scaleX(-1);
} */

.form-wrapper {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);

}

.form-wrapper span {
	display: block;
	color: #20e20c;
	/* font-size: 1.25rem; */
}

#c-48::before {
	content: "/";
	position: absolute;
	left: -0.5rem;
	color: #20c20c;

	/* transform: translateX(-100%); */
}

#element-1 {
	position: absolute;
	transform: translateY(-100%);
	display: block;
	width: 100%;
	height: 10rem;
	/* background-color: #ccc; */
	filter: drop-shadow(0 0 1rem #ccc);
	background-image: url(/e.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.05;
}

#element-2 {
	display: block;
	position: relative;
	width: calc(100% - 8px);
	height: 4.5rem;

	/* background-color: #1bb30a; */

	border: 4px ridge #18960a;



}

#element-2::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;

	background-image: url(/huh.png);
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
	filter: drop-shadow(0 0 0.5rem #18960a);


	/* z-index: -1 */
}

.check-form {
	display: flex;
	width: 100%;
	gap: 0.5rem;
	align-items: center;
	place-self: center;
}

input,
button {
	appearance: none;
	padding: 0.5rem;
	font-family: monospace;
	font-size: 1.25rem;
	line-height: 1.5rem;
	height: 100%;
	/* font-size: 1.125rem; */
	background-color: #000;
	color: #20e20c;
	border: 4px ridge #18960a;
	text-transform: uppercase;
	padding: 0.75rem 1rem;
}

button {
	/* background-color: #18960a; */
	font-size: 1.25rem;
	color: #20e20c;
	letter-spacing: 4px;
	font-weight: 600;
	text-shadow: #000 0px 0px 5px, #ccc 0px 0px 5px;

	width: 100%;
}

button:hover {
	background-color: #125212;
}

input::placeholder {
	color: #20e20c;
	/* border-right: 0; */
}

input:active {
	outline: 0px;
}

input:focus {
	outline: 0px;
}

#cipher {
	width: 100%;
	padding: 0.5rem;
	text-align: center;
	border-collapse: collapse;
	border: 4px ridge #18960a;
}

td {
	border: 1px solid;
	padding: 0.5rem;
}


td.highlight {
	background-color: #072e03;
	color: #20e20c;
}

td.highlight-2 {
	background-color: #20e20c;
	color: #000;
}

#handles {
	display: flex;

	/* gap: 1rem; */
	border: 4px ridge #18960a;
	gap: 0.5rem;
	padding: 2rem 0.5rem;
	text-align: center;
	place-content: center;
	background-image: url(/lines2.png);

	/* background-blend-mode: color;

	background-color: #18960a; */
	/* justify-content: space-between; */
}

.handle {
	display: flex;
	gap: 0.25rem;
	flex-direction: column;
	background-color: rgba(0, 0, 0, 0.9);
}

.up,
.down {
	display: block;
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	background: #20e20c;
	color: #000;
	border: 4px solid #093505;
	cursor: pointer;
}

#success-msg {
	color: green;
	font-family: sans-serif;
	font-weight: bold;
}