body {
	background-color: #000;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	color: #FFFFFF; /* Fehér szöveg */
}

h1 {
	font-size: 2rem;
	margin-bottom: 0.5rem;
	color: #FFC600; /* Sárga szöveg */
	text-align: center;
	text-transform: uppercase; /* Csupa nagybetű */
	animation: fadeIn 2s ease-in-out; /* Animáció hozzáadása */
}

.logo-container img {
	max-width: 200px;
	height: auto;
	margin-bottom: 1rem;
	animation: fadeIn 2s ease-in-out; /* Animáció hozzáadása */
}

.login-container {
	background-color: #1c1c1c; /* 1c1c1c háttér a container-nek */
	padding: 2rem;
	border-radius: 0.5rem;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
	text-align: center;
	max-width: 400px;
	width: 100%;
	animation: slideIn 1.5s ease-out; /* Animáció hozzáadása */
}

.form-label {
	color: #FFC600; /* Sárga címkék */
}

.form-control {
	background-color: #333333; /* Sötétszürke mező */
	border: none;
	color: #FFFFFF; /* Fehér szöveg */
}

.form-control:focus {
	background-color: #444444; /* Világosabb szürke a fókuszban */
	color: #FFFFFF;
	outline: none;
	box-shadow: none;
}

.btn-custom {
	background-color: #D51F1E; /* Piros gomb */
	border: none;
	color: #ffffff;
}

.btn-custom:hover {
	background-color: #FFC600; /* Sárga gomb hover állapotban */
	color: #000000; /* Fekete szöveg */
}

/* Animációk */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}