/* Cím animációja */
.game-title {
    position: absolute; /* Abszolút pozíció a kép felett */
    bottom: 50%; /* Az aljára igazítás a kép alatt */
    left: 0; /* Balra igazítás */
    right: 0; /* Jobbra igazítás */
    transform: translate(0, 50%); /* Függőleges középre igazítás trükkje */
    text-align: center; /* Középre igazítás */
    color: white; /* Cím szövegszíne */
    font-family: 'Raleway', sans-serif; /* Modern és elegáns betűtípus */
    font-size: 30px; /* Kis méretű betű */
    font-weight: bold; /* Vastag stílus */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8); /* Sötétebb "liftelés" árnyék beállítása */
    padding: 5px; /* Belső tér */
    background-color: transparent; /* Átlátszó háttérszín */
    -webkit-text-stroke-width: 1px; /* Vékony fekete keret a betűk körül */
    -webkit-text-stroke-color: black; /* Fekete színű keret a betűk körül */
    max-width: calc(100% - 20px); /* Maximum szélesség a képhez igazítva (levonva a paddingot) */
    overflow: hidden; /* Ne jelenjenek meg a túllógó részek */
    text-overflow: ellipsis; /* Ha túl hosszú a szöveg, jelenjen meg "..." */
    white-space: normal; /* Több soros szöveg engedélyezése */
    opacity: 0; /* Kezdetben láthatatlan */
    transition: opacity 0.3s ease-in-out; /* Áttűnés hatása */
    z-index: 1; /* Az elem a képek fölé kerül */
}

	.game:hover .game-title {
		opacity: 1; /* Egeret fölé viszi, láthatóvá válik */
	}

	/* Játék részleteinek stílusai */
	.game-details {
		padding: 1em;
		color: white; /* Fehér betűszín */
	}

	.game-details img {
		float: left; /* Kép balra igazítása */
		margin-right: 1em; /* Jobb oldali margó */
		max-width: 200px; /* Maximális szélesség */
		border-radius: 10px; /* Lekerekített sarkok */
	}

	.game-embed {
		height: 600px; 
		width: 90%; /* Az iframe maximális szélessége 70%-ra korlátozva */
		margin: 0 auto;
	}

	.game-embed iframe {
		width: 100%; /* Az iframe teljes szélessége a game-embed konténerben */
		height: 100%; /* Az iframe teljes magassága a game-embed konténerben */
	}

	.game-description {
		width: 95%;
		margin: 0 auto;
		overflow: hidden; /* Túlcsordulás elrejtése */
	}

	/* A régi stílusok megmaradtak */
	body {
		font-family: Arial, sans-serif;
		margin: 0;
		padding: 0;
		background-color: #2D2D3D; /* Sötétlilás-kékes háttérszín */
		overflow: hidden; /* Ne lógjon ki semmi a háttérből */
		position: relative; /* Szükséges a csillagok pozícionálásához */
		overflow-y: auto; /* Automatikus függőleges görgetés, ha szükséges */
		display: flex;
		flex-direction: column;
		min-height: 100vh; /* Legalább 100% a nézet magasságából */
	}

	main {
		flex: 1; /* Main terület kitölti a maradék helyet */
		margin-bottom: 20px; /* Távolság a footer-től */
	}
	
	
	/* Additional existing styles... */

/* New styles from header.php */
body.custom-style {
    background-color: #282c34;
    color: #fff;
}

header.custom-style {
    overflow: hidden;
    line-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    background-color: rgba(40, 40, 120, 0.7);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

#logo.custom-style {
    width: 200px;
    height: 80px;
    vertical-align: middle;
    margin-right: 20px;
}

header h1.custom-style {
    margin: 0;
    padding: 0;
    font-size: 2em;
}

nav.custom-style {
    margin-top: 20px;
    padding: 10px;
    text-align: center;
    background-color: #444;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

nav a.custom-style {
    text-decoration: none;
    color: white;
    margin: 0 15px;
    font-size: 1.2em;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    transition: color 0.3s;
}

nav a.custom-style:hover {
    color: #009;
}

nav form.custom-style {
    display: inline-block;
    margin-left: 15px;
}

nav input[type="text"].custom-style {
    padding: 5px;
    border: none;
    border-radius: 4px;
    font-size: 1.2em;
}

nav input[type="submit"].custom-style {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    background-color: #009;
    color: white;
    font-size: 1.2em;
    margin-left: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

nav input[type="submit"].custom-style:hover {
    background-color: #007;
}

@media only screen and (max-width: 600px) {
    nav.custom-style {
        flex-direction: column;
        margin-top: 10px;
    }
    nav a.custom-style {
        margin: 5px 0;
    }
    nav form.custom-style {
        margin-top: 10px;
        margin-left: 0;
    }
}
	

	@keyframes sparkle {
		0%, 100% {
			transform: scale(1);
			background-color: #A0C4FF; /* Ezüstös-kékes szín */
			box-shadow: 0 0 5px #A0C4FF;
		}
		50% {
			transform: scale(1.5);
			background-color: #FFFF99; /* Sárgás szín */
			box-shadow: 0 0 10px #FFFF99;
		}
	}

	.star {
		position: fixed;
		width: 2px;
		height: 2px;
		background-color: #A0C4FF; /* Ezüstös-kékes szín */
		border-radius: 50%;
		animation: sparkle 2s infinite;
		opacity: 0.8;
		z-index: -1; /* Alacsony z-index, hogy a háttérben legyenek */
	}

	header {
		position: relative; /* vagy hagyjuk üresen */
		z-index: 1000; /* Ha a tartalom fölé akarjuk húzni */
	}

	.admin_footer {
		position: relative; /* vagy hagyjuk üresen */
		background-color: #333;
		color: white;
		text-align: center;
		padding: 1em;
		/* Törlés Z Indexet */
	}

	footer {
		background-color: rgba(70, 26, 99, 0.4); /* 70% átlátszóság, rgba() formátumban */
		color: white;
		text-align: center;
		padding: 1em;
		position: relative;
		bottom: 0;
		width: 100%;
		margin-top: auto; /* Push footer to the bottom */
		transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out; /* Átmenet hatás */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Dobozárnyék */
	}

	footer:hover {
		background-color: rgba(70, 26, 99, 0.7); /* Háttérszín változtatása hover hatásra */
		transform: translateY(-5px); /* Kisebb mozgatás hover hatásra */
	}

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

	footer {
		animation: footerAnimation 1s ease-out; /* Animáció betöltéskor */
	}

	.pagination {
		margin-top: 20px;
		display: flex;
		justify-content: center;
	}

	.pagination a, .pagination span {
		color: #007bff;
		padding: 8px 16px;
		text-decoration: none;
		border: 1px solid #007bff;
		margin: 0 4px;
		border-radius: 4px;
		transition: background-color 0.3s;
	}

	.pagination a:hover {
		background-color: #007bff;
		color: white;
	}

	.pagination span {
		background-color: #007bff;
		color: white;
	}

	#online-users {
		background-color: #007bff;
		color: white;
		padding: 5px 10px;
		border-radius: 5px;
	}

	.category-filter select {
		font-family: 'Raleway', sans-serif;
		font-size: 18px;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
		background-color: #f9f9f9;
		color: #333;
		width: 200px;
		margin-bottom: 1em;
	}

.games {
    width: 98%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap; /* Flexbox elrendezés sorokban */
    justify-content: center;
    gap: 1em;
    overflow: hidden; /* Az overflow elrejti a túlcsordulást */
    box-sizing: border-box; /* A box-sizing beállítása a padding miatt */
    position: relative; /* Pozíció relatív a footer háttere miatt */
}

.game {
    position: relative;
    overflow: hidden;
    padding: 10px;
    margin-bottom: 20px;
    border: none; /* Keret eltávolítása */
    box-sizing: border-box; /* A box-sizing beállítása a padding miatt */
    width: 250px; /* Képek új szélessége */
    flex: 1 0 250px; /* Flex-grow, flex-shrink, alapértelmezett szélesség */
    margin-right: 0; /* Távolság az elemek között */
    margin-left: 0; /* Alapértelmezett bal margin */
    transition: transform 0.3s ease-in-out; /* Animáció a transform tulajdonságra */
    display: flex; /* Flexbox elrendezés */
    flex-direction: column; /* Oszlopok elrendezése */
    justify-content: center; /* Függőleges középre igazítás */
    align-items: center; /* Vízszintes középre igazítás */
    position: relative; /* Relatív pozíció */
}

	.game:hover {
		transform: scale(1.1); /* A kép nagyítása hover esetén */
	}


	.games > * {
		margin-right: 0; /* Távolság az elemek között */
		margin-left: 0; /* Alapértelmezett bal margin */
	}


.game img {
    width: 100%; /* Képek teljes szélessége a konténeren belül */
    height: 250px; /* Képek teljes magassága a konténeren belül */
    object-fit: cover; /* Átméretezés a képkereten belül, hogy kitöltse a teret */
    border-radius: 20px; /* Lekerekített sarkok */
    border: none; /* Keret eltávolítása */
    transition: transform 0.3s ease-in-out; /* Animáció a transform tulajdonságra */
}

	.game:hover img {
		transform: scale(1.1); /* A kép nagyítása hover esetén */
	}

	/* Globális stílusok */
	body {
		background-color: #282c34;
		color: #fff;
		font-family: Arial, sans-serif;
	}

	.categories {
		padding: 10px;
		text-align: center;
	}

	.categories h3 {
		color: white;
	}

	.categories ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}

	.categories li {
		display: inline-block;
		margin-right: 5px;
		color: white;
	}

	.categories a {
		color: white;
		text-decoration: none;
	}

	.categories a:hover {
		color: #00f; /* Kékes szín */
	}

	/* Stílus a copyright információhoz */
	.copyright-container {
		text-align: right; /* Jobbra igazítás */
		margin-top: 20px; /* Távolság a felső tartalomtól */
		padding-right: 20px; /* Jobb oldali behúzás */
	}

	.makelele-game {
		display: inline-block;
		margin-left: 10px; /* Bal oldali behúzás */
	}

	/* Stílus a copyright információhoz */
	.copyright-container p {
		background-color: #282c34;
		color: white;
		padding: 5px 10px;
		display: inline-block;
		margin: 0;
		border-radius: 4px;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	}





.blog-box {
    position: relative;
    background-color: #fff;
    width: 450px;
    height: 450px; /* Növelt méret */
    max-width: 100%;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    margin-top: 20px; /* 20px margin felülről */
    margin-left: 20px; /* 20px margin balról */
}

.blog-box img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 10px; /* Lekerekített sarkok */
    margin-right: 20px; /* Margó jobbról a szövegtől */
    float: right; /* Jobbra igazítás */
}

.blog-content {
    flex: 1; /* A szövegterület kitölti a rendelkezésre álló helyet */
}

.blog-title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.blog-snippet {
    font-size: 1em;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5; /* Megnövelt sorok száma */
    -webkit-box-orient: vertical;
}