:root {
	--header-bg: #243648;
	--body-bg: #181f2c;
	--text-color: #c2d6dd;
	--link-color: #74e5ec;
	--heading-color: #afe7f3;
	--container-width: 650px;
}

html, body {
	margin: 0;
	padding: 40px 0 0 0;
	background-color: var(--body-bg);
	color: var(--text-color);
	scroll-behavior: smooth;
	font-size: 16px;
	font-family: Tahoma, sans-serif;

	@media (width <= 600px) {
		font-size: 14px;
		padding-top: 70px;
	}
}

* {
	box-sizing: border-box;
}

a {
	color: var(--link-color);
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

#header {
	background-color: var(--header-bg);
	padding: 5px 30px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0 auto;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;

	> .menu {
		flex: 1 1 50%;
		display: flex;
		gap: 10px;
		justify-content: space-evenly;
		align-items: center;
		max-width: 1280px;

		> .item {
			text-align: center;

			> a {
				text-transform: uppercase;
				color: var(--heading-color);
				font-weight: bold;
			}
		}
	}
}

.largeLogo {
	max-width: var(--container-width);
	margin: 80px auto;
	text-align: center;

	> img {
		max-width: 90%;
	}
}

.section {
	max-width: var(--container-width);
	margin: 40px auto;
	padding: 0 20px;

	> .heading {
		text-transform: uppercase;
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 20px;
		color: var(--heading-color);
	}
}

#games {
	& img {
		width: 100%;
		height: auto;
		filter: brightness(150%) contrast(110%);
	}
}

#footer {
	background-color: var(--header-bg);
	max-width: 100%;
	padding: 20px;

	> .section {
		margin: 0 auto;

		> .text {
			> .links {
				display: flex;
				gap: 10px;
				justify-content: space-between;
				flex-wrap: wrap;
			}
		}
	}
}

@font-face {
	font-family: 'Tahoma';
	src: local('Tahoma'),
	url('resources/tahoma.eot?#iefix') format('embedded-opentype'),
	url('resources/tahoma.woff') format('woff'),
	url('resources/tahoma.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}