html {
		background-color: ghostwhite;
		font-family: "Wix Madefor Display", sans-serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
	}
	
	.content-middle {
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.text-center {
		text-align: center;
	}
	
	img.center {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	img {
		max-width: 100%;
	}
	
	.avatar-round {
		border-radius: 50%;
	}
	
	.avatar-small {
		width: 40px;
		height: 40px;
	}
	
	.notify-message, .error-message {
		padding: 10px;
		border-radius: 10px;
		color: white;
		margin: 15px;
	}
	
	.notify-message {
		background-color: #2196F3;
	}
	
	.error-message {
		background-color: #f44336;
	}
	
	a {
		color: rgb(107, 114, 128);
		text-decoration: none;
	}
	
	a:hover {
		color: black;
	}
	
	
	header {
		height: 145px;
		width: 100%;
		max-width: 1200px;
		background-color: #10296b;
		display: flex;
		justify-content: space-between;
		padding: 10px;
		margin: 0 auto;
		background-image: linear-gradient(rgba(16, 41, 107, 0.7), rgba(16, 41, 107, 0.7)), url("../images/header_background.png");
		background-position: bottom center;
		background-size: contain;
		background-repeat: no-repeat;
		position: relative;
	}
	
	header > .links {
		position: absolute;
		left: 15px;
		bottom: 15px;
		display: flex;
		justify-content: space-around;
		align-items: end;
		height: 50px;
		padding: 10px;
		width: 330px;
	}
	
	header > .links a {
		color: white;
	}
	
	header > .links a:hover {
		color: rgb(107, 114, 128);
	}
	
	.header-ad img {
		border-radius: 5px;
		border: 1px dashed gray;
	}

	.header-logo img {
		max-width: 100%;
	}
	
	div.page_content {
		width: 100%;
		max-width: 1200px;
		background-color: white;
		margin: 0 auto;
		display: flex;
	}
	
	nav {
		flex: 0 0 200px;
		display: flex;
		flex-direction: column;
		padding: 0 10px 0 10px;
		background-color: white;
	}
	
	nav h3 {
		margin-bottom: 5px;
		cursor: pointer;
		user-select: none;
	}
	
	nav a {
		flex: 1 0 auto;
		margin-left: 20px;
		font-size: 14px;
		margin-top: 16px;
	}
	
	nav a.selected {
		font-weight: 800;
	}
	
	nav a::before {
		content: "→ ";
		opacity: 0;
		transition: opacity 0.3s ease;
		font-size: 12px;
		color: rgb(107, 114, 128);
	}
	
	nav h3:before {
		content: '\02795 ';
		color: black;
		
	}
	
	nav h3.active:before {
		content: "\2796 ";
	}
	
	
	nav a:hover::before {
		opacity: 1;
	}
	
	.nav-open {
		display: none;
	}
	
	.nav-close {
		display: none;
	}
	
	main {
		flex: 1 1 auto;
		padding: 0 10px 10px 10px;
		max-width: calc( 100% - 200px );
		border-left: 1px solid #10296b;
	}
	
	footer {
		width: 100%;
		max-width: 1200px;
		background-color: white;
		margin: 0 auto;
		border-top: 1px solid #10296b;
	}
	
	[data-nav-parent] {
		display: none;
	}
	
	[data-nav-parent] a {
		display: block;
	}
	
	div.carousel {
		width: 100%;
		padding: 10px;
		overflow: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		display: flex;
		gap: 10px;
	}
	
	div.carousel > div {
		flex: 0 0 175px;
		background-color: ghostwhite;
		border: 1px solid #dddddd;
		border-radius: 10px;
		padding: 20px; 
	}
	
div.carousel > div:hover {
	background-color: #f8fdff;
}
	
	.top-casino > div {
		display: grid;
		gap: 5px;
		grid-template-rows: auto auto;
		grid-template-columns: 20px 100px auto;
		grid-template-areas: "topRank topImg topTitle" "topRank topImg topDesc";
		border-bottom: 1px solid #dddddd;
		margin-bottom: 10px;
		padding-bottom: 10px;
		place-items: center;
	}
	
	.top-casino > div > img {
		grid-area: topImg;
	}
	
	.top-casino > div > span {
		grid-area: topRank;
		background-color: ghostwhite;
		border-radius: 50%;
		padding: 5px;
		border: 1px solid #dddddd;
	}
	
	.top-casino > div > h4 {
		grid-area: topTitle;
		margin: 0 auto;
	}
	
	.top-casino > div > p {
		grid-area: topDesc;
		margin: 0;
	}
	
	.portal-news img {
		max-width: 100%;
	}
	
	.footer-links {
		display: flex;
		justify-content: space-around;
		display: none;
	}
	
	.footer-links h4 {
		text-align: center;
	}
	
	.footer-links div.content {
		display: grid;
		grid-template-columns: 1fr 1fr; /* Two equal columns */
		gap: 10px;
		text-align: center;
	}
	
	.footer-legal {
		font-style: italic;
		padding: 20px;
		font-size: 12px;
	}
	
	.login-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 55;
		overflow: auto;
		background-color: white;
	}
	
	.login-overlay > div {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: grid;
		place-items: center; /* Centers along both axes */
		z-index: 56;
	}
	
	form {
		display: block;
		width: 100%;
		max-width: 500px;
		margin: 0 auto;
	}
	
	form label {
		user-select: none;
	}
	
	
	form > div {
		margin: 5px 15px;
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: 20px;
		align-items: center;
	}
	
	form > div.button {
		grid-template-columns: 1fr; 
	}

	
	form > div > div:first-child {
		/*text-align: right;*/
	}
	
	input {
		border-radius: 6px;
		border: 1px solid rgb(107, 114, 128);
		background-color: white;
	}
	
	input:not([type=checkbox]){
		width: 100%;
		padding: 8px 14px;
	}
	
	input[type=checkbox]{
		margin-right: 10px;
	}
	
	input[type=submit], input[type=button] {
		cursor: pointer;
		background-color: #10296b;
		color: white;
	}
	
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    -webkit-text-fill-color: #333 !important; /* Optional: adjust text color */
}


.game-list-container {
	display: flex;
	align-content: flex-start;
	gap: 10px;
	justify-content: space-around;
	flex-wrap: wrap;
}

.game-list-container > a {
	flex: 0 0 160px;
	max-width: 160px;
	position: relative;
	/*margin: 0 10px 15px 0;*/
	text-decoration: none;
	/*background-color: #fff;*/
}

.game-list-container > a > img {
	border-radius: 8px;
	border: 1px solid #10296b;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	width: 160px;
	height: 100px;
}

.game-iframe {
	width: 100%;
	height: auto;
	border: none;
}

.profile-item {
	display: flex;
	gap: 5px;
	justify-content: center;
	margin-bottom: 10px;
}

.profile-signature {
	border: 2px solid rgb(107, 114, 128);
	border-radius: 5px;
	padding: 5px;
}

.forums-container {
	background-color: ghostwhite;
	border: 1px solid #dddddd;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 10px;
}

.forums-container:hover {
	background-color: #f8fdff;
}

.forums-container h3 {
	margin-bottom: 5px;
	margin-top: 0;
}

.post-container {
	background-color: ghostwhite;
	border: 1px solid #dddddd;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 10px;
}

.post-container > .poster {
	border-bottom: 2px solid #dddddd;
	display: flex;
	padding-bottom: 5px;
	gap: 5px;
	margin-bottom: 5px;
}

.post-container > .poster > .poster-avatar {
	width: 100px;
	height: 100px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

.post-container > .poster > .poster-info {
	flex-grow: 1;
}

.post-container > .post-time {
	display: flex;
	gap: 5px;
	justify-content: space-between;
	border-bottom: 2px solid #dddddd;
	padding-bottom: 5px;
	margin-bottom: 5px;
	align-items: center;
}

.post-container > .post-time > .button-group {
	min-width: 108px;
}




.post-container > .post-signature {
	border-top: 2px solid #dddddd;
	padding-top: 5px;
	margin-top: 5px;
}

.post-container blockquote {
	background-color: #f8fdff;
}

.pagination {
	display: flex;
	justify-content: center;
	gap: 5px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.pagination > a {

	text-decoration: none;
	padding: 8px 12px;
	background-color: ghostwhite;
	border: 1px solid #dddddd;
	border-radius: 5px;
}

.pagination > a.active {
	border: 2px solid #2196F3;
	/*background-color: #2196F3;*/
	font-weight: bold;
}

.button-group {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.bottom-margin {
	margin-bottom: 10px;
}

.button-group.right-align {
	justify-content: flex-end;
}

.button-group a {
	border-radius: 6px;
	border: 1px solid rgb(107, 114, 128);
	cursor: pointer;
	background-color: #10296b;
	color: white;
	font-size: smaller;
	padding: 6px 10px;
}

.button-group a:hover {
	background-color: #4a64a7;
}

.postContent {
	width: 100%;
}




















	
	
	
	@media (max-width: 500px) {
	
		body {
		
		}
		
		header {
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 200px;
			background-image: none;
		}
		
		header > .links {
			display: none;
		}
		
		main {
			max-width: 100%;
			border: none;
		}
		
		.nav-open {
			display: block;
			position: absolute;
			top: 170px;
			left: 10px;
			z-index: 51;
			color: white;
			font-weight: 600;
			cursor: pointer;
		}
		
		.nav-close {
			display: block;
			text-align: right;
			font-weight: 600;
			font-size: 20px;
			margin-top: 10px;
			margin-right: 10px;
			cursor: pointer;
		}
		
		nav {
			display: none;
			/*position: absolute;*/
			position: fixed;
			/*top: 200px;*/
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 53;
			overflow: auto;
			
		}
		
		.footer-links {
			flex-direction: column;
		}
		
		form > div {
			grid-template-columns: 1fr;
			gap: 5px;
			margin-bottom: 10px;
		}
		
		.top-casino > div {
			grid-template-rows: auto auto auto;
			grid-template-columns: 20px auto;
			grid-template-areas: "topRank topTitle" "topRank topImg" "topRank topDesc";
		}
		
		.wide-only {
			display: none;
		}
		
	}
	
	@media (min-width: 501px) {
		nav {
			display: block !important;
		}
		
		.narrow-only {
			display: none !important;
		}
		
	}
	
@media (min-width: 751px) {
		.game-iframe.portrait {
			display: block;
			width: 50%;
			margin: 0 auto;
		}
}