html,
body {
	height: 100%;
}

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
	background: url(/assets/bg.png) top center no-repeat #E0B9E7;
	background-size: 3000px 640px;
	color: rgba(0,0,0,0.8);
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}

a {
	color: rgba(0,0,0,0.8);
	text-decoration: none;
}
	a:hover {
		text-decoration: underline;
	}

h1 {
	font-size: 40px;
	font-weight: 600;
	line-height: 125%;
	margin: 0 0 20px;
}

h2 {
	font-size: 24px;
	font-weight: 600;
	line-height: 125%;
	margin: 0 0 20px;
}

.container {
	max-width: 1280px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-height: 100%;
}

.nav {
	display: flex;
	flex-direction: row;
	padding: 24px;
	justify-content: space-between;
	align-items: center;
	user-select: none;
}
	.nav__logo {
		display: flex;
		flex-direction: row;
		gap: 0;
		align-items: center;
	}
		.nav__logo:hover {
			text-decoration: none;
		}
		.nav__logo svg {
			width: 64px;
			height: 64px;
		}
		.nav__logo svg [fill] {
			fill: rgba(0,0,0,0.8);
		}
		.nav__logo > div:nth-child(2) {
			display: flex;
			flex-direction: column;
		}
			.nav__logo > div:nth-child(2) > div:nth-child(1) {
				font-size: 20px;
				font-weight: 600;
			}
			.nav__logo > div:nth-child(2) > div:nth-child(2) {
				font-size: 12px;
			}
	.nav__items {
		display: flex;
		flex-direction: row;
		gap: 32px;
		flex-wrap: wrap;
		justify-content: center;
	}
		.nav__items a {
			font-size: 18px;
			font-weight: 600;
		}

.hero {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: center;
	user-select: none;
	text-align: center;
	padding: 0 20px;
}
	.hero > img {
		max-width: 1800px;
	}
	.hero > div:nth-child(2) {
		display: flex;
		flex-direction: column;
		gap: 12px;
		align-items: center;
		max-width: 640px;
	}
		.hero > div:nth-child(2) h1 {
			margin: 0;
		}
		.hero > div:nth-child(2) span {
			font-size: 20px;
			line-height: 125%;
		}

.content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	padding: 0 20px;
}
	.content__block {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding: 52px;
		border-width: 2px;
		border-style: solid;
		border-radius: 32px;
		width: 720px;
		box-sizing: border-box;
		user-select: none;
		max-width: 100%;
		font-size: 16px;
		line-height: 125%;
	}
	.content__block h2 {
		text-align: center;
		margin: 0;
	}

.footer {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 40px 24px;
	user-select: none;
}
	.footer > div:nth-child(1) {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 8px;
	}
	.footer__xsolla {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 8px;
	}
		.footer__xsolla:hover {
			text-decoration: none;
		}
		.footer__xsolla img {
			width: 32px;
			height: 32px;
		}
		.footer__xsolla span {
			max-width: 300px;
			font-size: 12px;
		}
	.footer__items {
		display: flex;
		flex-direction: row;
		gap: 32px;
		flex-wrap: wrap;
		justify-content: center;
	}
		.footer__items a {
			font-size: 18px;
			font-weight: 600;
		}
	.footer > div:nth-child(2) {
		display: flex;
		flex-direction: row;
		gap: 8px;
		justify-content: center;
		font-size: 14px;
	}

.button {
	background: #FEE689;
	display: flex;
	flex-direction: row;
	gap: 8px;
	align-items: center;
	padding: 0 32px;
	border-radius: 12px;
	font-size: 20px;
	font-weight: 600;
	box-sizing: border-box;
	height: 72px;
	border: 2px solid rgba(0,0,0,0.8);
}
	.button:hover {
		text-decoration: none;
		background: #F8DD76;
	}
	.button svg {
		width: 24px;
		height: 24px;
	}
	.button svg [fill] {
		fill: rgba(0,0,0,0.8);
	}

@media screen and (max-height: 920px) {
	body {
		background-position: center -100px;
	}
	
	.hero > img {
		max-height: 420px;
	}
}

@media screen and (max-width: 920px) {
	body {
		background-position: center -260px;
	}
	
	h1 {
		font-size: 24px;
	}
	
	h2 {
		font-size: 20px;
	}
	
	.container {
		max-width: 480px;
	}
	
	.nav {
		flex-direction: column;
		gap: 20px;
	}
		.nav__logo svg {
			width: 48px;
			height: 48px;
		}
		.nav__logo > div:nth-child(2) > div:nth-child(1) {
			font-size: 16px;
		}
		.nav__logo > div:nth-child(2) > div:nth-child(2) {
			font-size: 11px;
		}
		.nav__items {
			gap: 24px;
		}
		.nav__items a {
			font-size: 14px;
		}
	
	.hero {
		gap: 12px;
	}
		.hero > img {
			max-width: 100%;
		}
		.hero > div:nth-child(2) span {
			font-size: 14px;
		}
	
	.content {
		
	}
		.content__block {
			padding: 24px;
			gap: 16px;
			font-size: 14px;
			border-radius: 20px;
		}
	
	.footer {
		
	}
		.footer > div:nth-child(1) {
			flex-direction: column;
			gap: 24px;
		}
		.footer__items {
			gap: 24px;
		}
		.footer__items a {
			font-size: 14px;
		}
		.footer > div:nth-child(2) {
			flex-direction: column;
			align-items: center;
		}
		.footer > div:nth-child(2) > div:nth-child(even) {
			display: none;
		}
	
	.button {
		height: 64px;
		padding: 0 24px;
		font-size: 16px;
		gap: 4px;
	}
		.button svg {
			width: 20px;
			height: 20px;
		}
}