* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: radial-gradient(
		ellipse at center,
		#1a0033,
		#2d1b4e,
		#0a0a20,
		#000000
	);
	font-family: "JetBrains Mono", "Fira Code", "Consolas", "Monaco", monospace;
	height: 100vh;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

.main-container {
	display: flex;
	height: 100vh;
	gap: 20px;
	padding: 20px;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
}

/* Animated background elements */
body::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: radial-gradient(
			circle at 20% 20%,
			rgba(138, 43, 226, 0.1) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 80% 80%,
			rgba(75, 0, 130, 0.1) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 40% 60%,
			rgba(128, 0, 128, 0.1) 0%,
			transparent 50%
		),
		radial-gradient(
			circle at 60% 30%,
			rgba(106, 90, 205, 0.1) 0%,
			transparent 50%
		);
	animation: backgroundShift 15s ease-in-out infinite;
	z-index: 0;
}

@keyframes backgroundShift {
	0%,
	100% {
		opacity: 1;
	}
	25% {
		opacity: 0.8;
	}
	50% {
		opacity: 0.6;
	}
	75% {
		opacity: 0.8;
	}
}

/* Floating ghost animations */
.ghost {
	position: absolute;
	font-size: 24px;
	color: rgba(255, 255, 255, 0.6);
	z-index: 1;
	pointer-events: none;
	animation: float 8s ease-in-out infinite;
}

.ghost:nth-child(odd) {
	animation-duration: 10s;
	animation-delay: -2s;
}

.ghost:nth-child(even) {
	animation-duration: 12s;
	animation-delay: -5s;
}

@keyframes float {
	0%,
	100% {
		transform: translateY(0px) rotate(0deg);
		opacity: 0.3;
	}
	25% {
		transform: translateY(-20px) rotate(5deg);
		opacity: 0.7;
	}
	50% {
		transform: translateY(-10px) rotate(-3deg);
		opacity: 0.4;
	}
	75% {
		transform: translateY(-15px) rotate(2deg);
		opacity: 0.6;
	}
}

/* Pixel/cube particles */
.pixel {
	position: absolute;
	width: 4px;
	height: 4px;
	background: rgba(138, 43, 226, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.3);
	z-index: 1;
	pointer-events: none;
	animation: pixelFloat 6s linear infinite;
}

@keyframes pixelFloat {
	0% {
		transform: translateY(100vh) rotate(0deg);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateY(-100vh) rotate(360deg);
		opacity: 0;
	}
}

/* Terminal z-index override */
.terminal-container {
	z-index: 10;
	position: relative;
}

.terminal-container {
	flex: 1;
	max-width: 60%;
	min-width: 600px;
	height: 95vh;
	background: linear-gradient(135deg, #0a0a0a, #1a0a2a, #0d0d0d);
	border-radius: 15px;
	box-shadow: 0 15px 40px rgba(138, 43, 226, 0.4),
		inset 0 1px 20px rgba(255, 255, 255, 0.05),
		0 0 50px rgba(75, 0, 130, 0.3);
	overflow: hidden;
	border: 2px solid;
	border-image: linear-gradient(45deg, #8a2be2, #9370db, #8a2be2) 1;
	animation: terminalGlow 4s ease-in-out infinite;
}

@keyframes terminalGlow {
	0%,
	100% {
		box-shadow: 0 15px 40px rgba(138, 43, 226, 0.4),
			inset 0 1px 20px rgba(255, 255, 255, 0.05),
			0 0 50px rgba(75, 0, 130, 0.3);
	}
	50% {
		box-shadow: 0 20px 50px rgba(138, 43, 226, 0.6),
			inset 0 1px 25px rgba(255, 255, 255, 0.08),
			0 0 70px rgba(75, 0, 130, 0.5);
	}
}

.terminal-header {
	background: linear-gradient(90deg, #1a0033, #2d1b4e, #1a0033);
	height: 35px;
	display: flex;
	align-items: center;
	padding: 0 15px;
	border-bottom: 2px solid;
	border-image: linear-gradient(90deg, #8a2be2, #9370db, #8a2be2) 1;
	position: relative;
}

.terminal-header::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		45deg,
		transparent,
		rgba(138, 43, 226, 0.1),
		transparent
	);
	animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
	0%,
	100% {
		transform: translateX(-100%);
	}
	50% {
		transform: translateX(100%);
	}
}

.terminal-title {
	color: rgba(147, 112, 219, 0.9);
	font-size: 15px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-weight: bold;
	text-shadow: 0 0 10px rgba(138, 43, 226, 0.8);
	animation: titleGlow 3s ease-in-out infinite;
	z-index: 3;
}

@keyframes titleGlow {
	0%,
	100% {
		color: rgba(147, 112, 219, 0.9);
		text-shadow: 0 0 10px rgba(138, 43, 226, 0.8);
	}
	50% {
		color: rgba(186, 85, 211, 1);
		text-shadow: 0 0 15px rgba(138, 43, 226, 1);
	}
}

.terminal-body {
	height: calc(100% - 35px);
	padding: 0;
	padding-left: 0 !important;
	margin-left: 0 !important;
	background: #0a0a0a;
}

#terminal {
	height: 100%;
	width: 100%;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

.xterm {
	padding: 15px 15px 15px 0;
	font-family: "JetBrains Mono", "Fira Code", "Consolas", "Monaco", monospace !important;
	letter-spacing: 0 !important;
	font-feature-settings: normal !important;
	-moz-font-feature-settings: normal !important;
	-webkit-font-feature-settings: normal !important;
	font-variant-ligatures: none !important;
	-moz-font-variant-ligatures: none !important;
	-webkit-font-variant-ligatures: none !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
}

.xterm .xterm-rows {
	font-family: "JetBrains Mono", "Fira Code", "Consolas", "Monaco", monospace !important;
	letter-spacing: 0 !important;
	font-feature-settings: normal !important;
	font-variant-ligatures: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

.xterm .xterm-cell {
	display: inline-block !important;
}

.xterm .xterm-text-layer {
	font-family: "JetBrains Mono", "Fira Code", "Consolas", "Monaco", monospace !important;
	letter-spacing: 0 !important;
}

.xterm .xterm-viewport {
	background-color: transparent !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

.xterm .xterm-screen {
	background-color: transparent !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}

/* Fix text alignment and spacing */
.xterm * {
	font-family: "JetBrains Mono", "Fira Code", "Consolas", "Monaco", monospace !important;
	font-variant-ligatures: none !important;
	letter-spacing: 0 !important;
	tab-size: 8 !important;
	text-align: left !important;
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
}

.xterm .xterm-cursor-layer {
	font-family: "JetBrains Mono", "Fira Code", "Consolas", "Monaco", monospace !important;
	letter-spacing: 0 !important;
}

.xterm .xterm-char-measure-element {
	font-family: "JetBrains Mono", "Fira Code", "Consolas", "Monaco", monospace !important;
	letter-spacing: 0 !important;
	font-size: 14px !important;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: -9999em;
}

/* Scrollbar styling - Halloween themed */
::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	background: linear-gradient(180deg, #1a0033, #2d1b4e, #1a0033);
	border-radius: 6px;
	border: 1px solid rgba(138, 43, 226, 0.3);
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #8a2be2, #9370db, #8a2be2);
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
		0 0 8px rgba(138, 43, 226, 0.4);
}

::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #9932cc, #ba55d3, #9932cc);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3),
		0 0 12px rgba(138, 43, 226, 0.6);
}

::-webkit-scrollbar-corner {
	background: #1a0033;
}

/* Spooky Image Container */
.spooky-image-container {
	flex: 1;
	max-width: 35%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.spooky-image {
	max-width: 100%;
	height: 90vh;
	border-radius: 20px;
	object-fit: contain;
	filter: brightness(0.7) contrast(1.1);
	/* Light black filter applied */
}

@keyframes spookyImageGlow {
	0%,
	100% {
		filter: hue-rotate(280deg) saturate(150%) contrast(110%) brightness(0.9)
			drop-shadow(0 0 25px rgba(138, 43, 226, 0.8))
			drop-shadow(0 0 50px rgba(128, 0, 128, 0.6));
	}
	50% {
		filter: hue-rotate(280deg) saturate(180%) contrast(120%) brightness(1.0)
			drop-shadow(0 0 35px rgba(138, 43, 226, 1))
			drop-shadow(0 0 70px rgba(128, 0, 128, 0.8));
	}
}

/* Responsive design */
@media (max-width: 1200px) {
	.main-container {
		flex-direction: column;
		padding: 10px;
		gap: 15px;
		align-items: center;
		justify-content: center;
	}

	.terminal-container {
		max-width: 100%;
		min-width: 600px;
		height: 45vh;
	}

	.spooky-image-container {
		max-width: 100%;
		max-height: 35%;
	}

	.spooky-image {
		height: 45vh;
	}
}

@media (max-width: 768px) {
	.main-container {
		padding: 5px;
		gap: 10px;
		align-items: center;
		justify-content: center;
	}

	.terminal-container {
		min-width: 600px;
		height: 40vh;
	}

	.terminal-body {
		padding: 10px;
		font-size: 12px;
	}

	.spooky-image-container {
		max-height: 40%;
		padding: 10px;
	}

	.spooky-image {
		height: 40vh;
		border-radius: 15px;
	}
}