[data-theme="default"] {
	--command: #4aa9cf;
	--active: #4aa9cf;
	--error: #9c8394;
	--enter: #519975;
	--norm: #b89076;
	--background-color: #211d1b;
	--selection-background: #519975;
	--selected-text: #211830;
}

[data-theme="monokai"] {
	--command: #f92672; /* Pink */
	--active: #a6e22e; /* Green */
	--error: #fd971f; /* Orange */
	--enter: #66d9ef; /* Light Blue */
	--norm: #f8f8f2; /* Off White */
	--background-color: #272822; /* Almost Black */
	--selection-background: #49483e; /* Dark Gray */
	--selected-text: #f8f8f2; /* Off White */
}

[data-theme="solarized-dark"] {
	--command: #268bd2; /* Blue */
	--active: #2aa198; /* Cyan */
	--error: #dc322f; /* Red */
	--enter: #859900; /* Green */
	--norm: #839496; /* Base1 */
	--background-color: #002b36; /* Base03 */
	--selection-background: #073642; /* Base02 */
	--selected-text: #93a1a1; /* Base0 */
}

[data-theme="dracula"] {
	--command: #50fa7b; /* Green */
	--active: #f1fa8c; /* Yellow */
	--error: #ff5555; /* Red */
	--enter: #bd93f9; /* Purple */
	--norm: #f8f8f2; /* Foreground */
	--background-color: #282a36; /* Background */
	--selection-background: #44475a; /* Current Line */
	--selected-text: #f8f8f2; /* Foreground */
}

[data-theme="gruvbox-dark"] {
	--command: #fabd2f; /* Yellow */
	--active: #d3869b; /* Pink */
	--error: #fb4934; /* Bright Red */
	--enter: #b8bb26; /* Green */
	--norm: #ebdbb2; /* Light Gray */
	--background-color: #282828; /* Dark Gray */
	--selection-background: #3c3836; /* Gray */
	--selected-text: #ebdbb2; /* Light Gray */
}

[data-theme="nord"] {
	--command: #81a1c1; /* Blue */
	--active: #88c0d0; /* Lighter Blue */
	--error: #bf616a; /* Red */
	--enter: #a3be8c; /* Green */
	--norm: #e5e9f0; /* Text */
	--background-color: #2e3440; /* Dark Blue Gray */
	--selection-background: #4c566a; /* Selection */
	--selected-text: #d8dee9; /* Light Text */
}

[data-theme="catppuccin"] {
	--command: #f5c2e7; /* Lavender (Rosewater) */
	--active: #cba6f7; /* Sky (Lavender) */
	--error: #f28fad; /* Mauve (Flamingo) */
	--enter: #94e2d5; /* Green (Mint) */
	--norm: #cdd6f4; /* Text (Text) */
	--background-color: #1e1e2e; /* Background (Surface) */
	--selection-background: #f5e0dc; /* Rosewater */
	--selected-text: #4c4f69; /* Mantle */
}

[data-theme="tokyo-night"] {
	--command: #7aa2f7; /* Blue */
	--active: #bb9af7; /* Purple */
	--error: #f7768e; /* Red */
	--enter: #9ece6a; /* Green */
	--norm: #a9b1d6; /* Light Gray */
	--background-color: #1a1b26; /* Dark */
	--selection-background: #33467c; /* Selection */
	--selected-text: #c0caf5; /* Lighter Text */
}

[data-theme="one-dark"] {
	--command: #e06c75; /* Soft Red */
	--active: #98c379; /* Green */
	--error: #d19a66; /* Orange */
	--enter: #61afef; /* Blue */
	--norm: #abb2bf; /* Gray */
	--background-color: #282c34; /* Dark Gray */
	--selection-background: #3e4451; /* Selection */
	--selected-text: #abb2bf; /* Light Gray */
}

[data-theme="ubuntu"] {
	--command: #e95420; /* Ubuntu Orange */
	--active: #fdf6e3; /* Light text */
	--error: #cc0000; /* Error red */
	--enter: #77216f; /* Ubuntu Purple */
	--norm: #ffffff; /* White */
	--background-color: #300a24; /* Dark Aubergine */
	--selection-background: #5e2750; /* Selection */
	--selected-text: #ffffff; /* White */
}

[data-theme="espresso"] {
	--command: #ffdd00; /* Yellow */
	--active: #5fcc9c; /* Aqua */
	--error: #cc7a29; /* Orange */
	--enter: #e1e1e6; /* Light Gray */
	--norm: #d0d0d0; /* Gray */
	--background-color: #2a211c; /* Espresso */
	--selection-background: #423736; /* Darker Brown */
	--selected-text: #ffffff; /* White */
}

[data-theme="solarized-light"] {
	--command: #657b83; /* Base00 */
	--active: #586e75; /* Base01 */
	--error: #dc322f; /* Red */
	--enter: #268bd2; /* Blue */
	--norm: #839496; /* Base0 */
	--background-color: #fdf6e3; /* Base3 */
	--selection-background: #eee8d5; /* Base2 */
	--selected-text: #657b83; /* Base00 */
}

[data-theme="github-light"] {
	--command: #032f62; /* Dark Blue */
	--active: #586069; /* Gray */
	--error: #d73a49; /* Error Red */
	--enter: #28a745; /* Green */
	--norm: #333333; /* Very Dark Gray */
	--background-color: #ffffff; /* White */
	--selection-background: #c8e1ff; /* Light Blue */
	--selected-text: #032f62; /* Dark Blue */
}

[data-theme="atom-light"] {
	--command: #c678dd; /* Purple */
	--active: #e06c75; /* Soft Red */
	--error: #d19a66; /* Orange */
	--enter: #56b6c2; /* Cyan */
	--norm: #383a42; /* Dark Gray */
	--background-color: #f9f9f9; /* Light Gray */
	--selection-background: #e6e6e6; /* Lighter Gray */
	--selected-text: #383a42; /* Dark Gray */
}

[data-theme="atom-dark"] {
	--command: #528bff; /* Blue */
	--active: #96cbfe; /* Light Blue */
	--error: #ff6c60; /* Red */
	--enter: #98c379; /* Green */
	--norm: #c5c8c6; /* Foreground Text */
	--background-color: #1d1f21; /* Background */
	--selection-background: #373b41; /* Selection */
	--selected-text: #c5c8c6; /* Selected Text */
}

[data-theme="ayu"] {
	--command: #ffcc66; /* Yellow */
	--active: #5ccfe6; /* Blue */
	--error: #ff3333; /* Red */
	--enter: #b8cc52; /* Green */
	--norm: #e7c787; /* Light Brown */
	--background-color: #0a0e14; /* Deep Dark */
	--selection-background: #253340; /* Dark Blue */
	--selected-text: #cbccc6; /* Off White */
}

[data-theme="material"] {
	--command: #80cbc4; /* Teal */
	--active: #c3e88d; /* Light Green */
	--error: #ff5370; /* Red Pink */
	--enter: #82aaff; /* Light Blue */
	--norm: #eeffff; /* Text Color */
	--background-color: #263238; /* Background */
	--selection-background: #546e7a; /* Selection */
	--selected-text: #eeffff; /* Selected Text */
}

[data-theme="zenburn"] {
	--command: #dcdccc; /* Cream */
	--active: #f0dfaf; /* Light Yellow */
	--error: #cc9393; /* Soft Red */
	--enter: #7f9f7f; /* Muted Green */
	--norm: #dcdccc; /* Light Cream */
	--background-color: #3f3f3f; /* Very Dark Gray */
	--selection-background: #506070; /* Dark Blue Gray */
	--selected-text: #dcdccc; /* Light Cream */
}

[data-theme="tomorrow-night"] {
	--command: #c5c8c6; /* Silver */
	--active: #81a2be; /* Light Blue */
	--error: #cc6666; /* Soft Red */
	--enter: #b5bd68; /* Olive */
	--norm: #e0e0e0; /* Bright Silver */
	--background-color: #1d1f21; /* Almost Black */
	--selection-background: #373b41; /* Dark Gray */
	--selected-text: #c5c8c6; /* Silver */
}

[data-theme="oceanic-next"] {
	--command: #ec5f67; /* Soft Red */
	--active: #99c794; /* Mint Green */
	--error: #f99157; /* Orange */
	--enter: #6699cc; /* Sky Blue */
	--norm: #c0c5ce; /* Light Gray */
	--background-color: #1b2b34; /* Deep Sea Blue */
	--selection-background: #343d46; /* Dark Blue Gray */
	--selected-text: #c0c5ce; /* Light Gray */
}

body,
html {
	height: 100%;
	margin: 0;
	overflow: hidden;
	font-family: "Courier New", monospace;
}

body {
	background-color: var(--background-color);
	color: white;
}

/* Default command text */
.enter-text {
	color: var(--enter); /* Old entered text color */
}

/* Active text being entered */
.active-text {
	color: var(--active); /* Active text color */
}

/* Keyword text */
.keyword-text {
	color: var(--command); /* Keyword color */
	text-shadow: 0 0 5px var(--command); /* Optional: Remove if you don't want glow */
}

/* Error text */
.error-text {
	color: var(--error); /* Error message color */
}

.normal-text {
	color: var(--norm);
}

.terminal {
	color: var(--enter);
	padding: 10px;
	height: 100%;
	box-sizing: border-box;
	overflow-y: auto;
	display: flex;
	flex-direction: column;

	/* Hide scrollbar for Chrome, Safari and Opera */
	&::-webkit-scrollbar {
		display: none;
	}

	/* Hide scrollbar for IE, Edge, and Firefox */
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

.input-line {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	min-height: 20px;
}

.prompt {
	margin-right: 5px;
}

.input {
	outline: none;
	color: var(--command);
	background: none;
	border: none;
	white-space: nowrap;
	display: inline-block; /* Or 'block' if it suits your layout better */
	min-width: 50px; /* Set a minimum width to ensure the input is clickable */
	width: calc(100% - 20px); /* Adjust the width as necessary */
}

.input {
	overflow: auto; /* Allow scrolling */
	overflow-y: hidden; /* Hide vertical scrollbar */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.input::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.input {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

.suggestion-item {
	color: var(--norm);
}

.suggestion-item.active {
	color: var(--error); /* Example active style */
}

@keyframes blinkCursor {
	from {
		background-color: transparent;
	}
	to {
		background-color: var(--command);
	}
}

::selection {
	background: var(--selection-background); /* Background color of your choice */
	color: var(--selected-text); /* Text color of your choice */
}

html {
	font-size: clamp(
		14px,
		2vw,
		18px
	); /* Adjust min, value, and max sizes as needed */
}

.terminal {
	padding: 1rem;
	font-size: clamp(0.8rem, 1vw, 1.2rem);
	/* Other styles */
}

/* Adjustments for smaller screens */
@media (max-width: 600px) {
	.terminal {
		padding: 0.5rem; /* Smaller padding on small screens */
	}

	.prompt,
	.input,
	.output,
	.enter-text,
	.active-text,
	.keyword-text,
	.error-text,
	.normal-text {
		font-size: clamp(
			0.7rem,
			2.5vw,
			1rem
		); /* Smaller font size on small screens */
	}

	.input {
		min-width: 10px; /* Smaller min-width for input */
		width: calc(100% - 10px); /* Full width minus some padding */
	}
}

/* You can add more breakpoints for larger sizes as needed */
@media (min-width: 601px) and (max-width: 1024px) {
	/* Adjust styles for tablets and small desktop screens */
	.terminal {
		padding: 0.75rem;
	}

	.prompt,
	.input,
	.output,
	.enter-text,
	.active-text,
	.keyword-text,
	.error-text,
	.normal-text {
		font-size: clamp(0.8rem, 2vw, 1.1rem);
	}
}

/* Larger desktop screens */
@media (min-width: 1025px) {
	.terminal {
		padding: 1rem;
	}

	.prompt,
	.input,
	.output,
	.enter-text,
	.active-text,
	.keyword-text,
	.error-text,
	.normal-text {
		font-size: clamp(0.9rem, 1vw, 1.2rem);
	}
}

@keyframes flicker {
	0% {
		opacity: 0.27861;
	}
	5% {
		opacity: 0.34769;
	}
	10% {
		opacity: 0.23604;
	}
	15% {
		opacity: 0.90626;
	}
	20% {
		opacity: 0.18128;
	}
	25% {
		opacity: 0.83891;
	}
	30% {
		opacity: 0.65583;
	}
	35% {
		opacity: 0.67807;
	}
	40% {
		opacity: 0.26559;
	}
	45% {
		opacity: 0.84693;
	}
	50% {
		opacity: 0.96019;
	}
	55% {
		opacity: 0.08594;
	}
	60% {
		opacity: 0.20313;
	}
	65% {
		opacity: 0.71988;
	}
	70% {
		opacity: 0.53455;
	}
	75% {
		opacity: 0.37288;
	}
	80% {
		opacity: 0.71428;
	}
	85% {
		opacity: 0.70419;
	}
	90% {
		opacity: 0.7003;
	}
	95% {
		opacity: 0.36108;
	}
	100% {
		opacity: 0.24387;
	}
}
@keyframes textShadow {
	0% {
		text-shadow: 0.4389924193300864px 0 1px rgba(0, 30, 255, 0.5),
			-0.4389924193300864px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	5% {
		text-shadow: 2.7928974010788217px 0 1px rgba(0, 30, 255, 0.5),
			-2.7928974010788217px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	10% {
		text-shadow: 0.02956275843481219px 0 1px rgba(0, 30, 255, 0.5),
			-0.02956275843481219px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	15% {
		text-shadow: 0.40218538552878136px 0 1px rgba(0, 30, 255, 0.5),
			-0.40218538552878136px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	20% {
		text-shadow: 3.4794037899852017px 0 1px rgba(0, 30, 255, 0.5),
			-3.4794037899852017px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	25% {
		text-shadow: 1.6125630401149584px 0 1px rgba(0, 30, 255, 0.5),
			-1.6125630401149584px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	30% {
		text-shadow: 0.7015590085143956px 0 1px rgba(0, 30, 255, 0.5),
			-0.7015590085143956px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	35% {
		text-shadow: 3.896914047650351px 0 1px rgba(0, 30, 255, 0.5),
			-3.896914047650351px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	40% {
		text-shadow: 3.870905614848819px 0 1px rgba(0, 30, 255, 0.5),
			-3.870905614848819px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	45% {
		text-shadow: 2.231056963361899px 0 1px rgba(0, 30, 255, 0.5),
			-2.231056963361899px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	50% {
		text-shadow: 0.08084290417898504px 0 1px rgba(0, 30, 255, 0.5),
			-0.08084290417898504px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	55% {
		text-shadow: 2.3758461067427543px 0 1px rgba(0, 30, 255, 0.5),
			-2.3758461067427543px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	60% {
		text-shadow: 2.202193051050636px 0 1px rgba(0, 30, 255, 0.5),
			-2.202193051050636px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	65% {
		text-shadow: 2.8638780614874975px 0 1px rgba(0, 30, 255, 0.5),
			-2.8638780614874975px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	70% {
		text-shadow: 0.48874025155497314px 0 1px rgba(0, 30, 255, 0.5),
			-0.48874025155497314px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	75% {
		text-shadow: 1.8948491305757957px 0 1px rgba(0, 30, 255, 0.5),
			-1.8948491305757957px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	80% {
		text-shadow: 0.0833037308038857px 0 1px rgba(0, 30, 255, 0.5),
			-0.0833037308038857px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	85% {
		text-shadow: 0.09769827255241735px 0 1px rgba(0, 30, 255, 0.5),
			-0.09769827255241735px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	90% {
		text-shadow: 3.443339761481782px 0 1px rgba(0, 30, 255, 0.5),
			-3.443339761481782px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	95% {
		text-shadow: 2.1841838852799786px 0 1px rgba(0, 30, 255, 0.5),
			-2.1841838852799786px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
	100% {
		text-shadow: 2.6208764473832513px 0 1px rgba(0, 30, 255, 0.5),
			-2.6208764473832513px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px;
	}
}
.crt::after {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(18, 16, 16, 0.1);
	opacity: 0;
	z-index: 2;
	pointer-events: none;
	animation: flicker 0.15s infinite;
}
.crt::before {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
		linear-gradient(
			90deg,
			rgba(255, 0, 0, 0.06),
			rgba(0, 255, 0, 0.02),
			rgba(0, 0, 255, 0.06)
		);
	z-index: 2;
	background-size: 100% 2px, 3px 100%;
	pointer-events: none;
}
.crt {
	animation: textShadow 1.6s infinite;
}