/* Login Page Stylesheet */
	/* Base reset */
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

	body {
		height: 100vh;
		background: #0d0d0d;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		position: relative;
	}

	/* Smoke particle animation */
	.smoke-particle {
		position: absolute;
		top: -60px;
		left: 50%;
		width: 32px;
		height: 32px;
		pointer-events: none;
		opacity: 0.22;
		background: radial-gradient(circle at 60% 40%, #fff 0%, #bbb 40%, transparent 80%);
		border-radius: 50%;
		filter: blur(8px);
		animation: smoke-float 6s linear infinite;
		z-index: 1;
	}

	/* Multiple unique particles with different delays and positions */
	.smoke-particle:nth-child(1) {
		left: 35%;
		width: 28px;
		height: 28px;
		animation-delay: 0s;
		opacity: 0.18;
	}
	.smoke-particle:nth-child(2) {
		left: 55%;
		width: 36px;
		height: 36px;
		animation-delay: 1.5s;
		opacity: 0.24;
	}
	.smoke-particle:nth-child(3) {
		left: 45%;
		width: 24px;
		height: 24px;
		animation-delay: 3s;
		opacity: 0.16;
	}
	.smoke-particle:nth-child(4) {
		left: 60%;
		width: 32px;
		height: 32px;
		animation-delay: 2.2s;
		opacity: 0.21;
	}
	.smoke-particle:nth-child(5) {
		left: 40%;
		width: 30px;
		height: 30px;
		animation-delay: 4s;
		opacity: 0.19;
	}

	@keyframes smoke-float {
		0% {
			transform: translateY(0) scale(1) translateX(0);
			opacity: 0.22;
		}
		10% {
			opacity: 0.32;
		}
		40% {
			transform: translateY(120px) scale(1.1) translateX(-10px);
			opacity: 0.28;
		}
		70% {
			transform: translateY(260px) scale(1.15) translateX(10px);
			opacity: 0.18;
		}
		100% {
			transform: translateY(420px) scale(1.2) translateX(0);
			opacity: 0;
		}
	}

	/* Header styles */
	.header-container {
		position: absolute;
		top: 10%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 3;
	}

	.header-container h1 {
		color: #fff;
		text-align: center;
		font-size: 2.5rem;
		margin-bottom: 30px;
		text-shadow: 0 0 10px #fff, 0 0 20px #aaa, 0 0 40px #fff;
		letter-spacing: 2px;
		font-weight: 700;
		z-index: 3;
		position: relative;
	}

	/* Blinking effect for selected letters */
	.header-container h1 .blink {
		animation: blink-tube 3s infinite steps(1, end);
		color: #fff;
		text-shadow: 0 0 10px #fff, 0 0 20px #fffa, 0 0 40px #fff;
	}

	@keyframes blink-tube {
		0%, 80%, 100% { opacity: 1; }
		81%, 85%, 90%, 95% { opacity: 0.2; }
		82%, 86%, 91%, 96% { opacity: 1; }
	}

	.header-container::before {
		animation: glow-pulse 3s infinite ease-in-out;
	}

	@keyframes glow-pulse {
		0%, 100% {
			opacity: 0.7;
			transform: translate(-50%, -50%) scale(1);
		}
		50% {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1.08);
		}
	}
	/* Glowing effect behind the login container */
	.header-container::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 150%;
		height: 150%;
		background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.18) 0%, rgba(0,0,0,0) 80%);
		filter: blur(32px);
		z-index: 0;
		pointer-events: none;
	}

	/* Login form styles */
	.login-container {
		background-color: rgba(0, 0, 0, 0.75);
		padding: 40px;
		border-radius: 12px;
		box-shadow: 0 0 60px rgba(255, 255, 255, 0.25);
		width: 100%;
		max-width: 400px;
		text-align: center;
		z-index: 2;
		position: relative;
		top: 2.5%;
	}

	.login-container img.logo {
		width: 120px;
		margin-bottom: 20px;
		border: rgb(255, 255, 255) 2px solid;
		border-radius: 50%;
	}

	.login-container label {
		display: block;
		text-align: left;
		margin: 10px 0 5px;
		color: #ccc;
	}

	.login-container input[type="text"],
	.login-container input[type="password"] {
		width: 100%;
		padding: 10px;
		margin-bottom: 20px;
		border: none;
		border-radius: 6px;
		background: #222;
		color: #fff;
	}

	.login-container input[type="submit"] {
		background: #444;
		color: #fff;
		padding: 10px 20px;
		border: none;
		border-radius: 6px;
		cursor: pointer;
		transition: background 0.3s ease;
	}

	.login-container input[type="submit"]:hover {
		background: #666666;
	}