:root {
	color-scheme: light;
}

body {
	max-width: 48rem;
	margin: 0 auto;
	padding: 1.5rem;
	font: 16px/1.6 system-ui, sans-serif;
	color: #222;
	background: #fff;
}

h1 { font-size: 1.6rem; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 0 0 .5rem; }

a { color: #14509c; text-decoration: none; }
a:hover { text-decoration: underline; }

hr {
	border: 0;
	border-top: 1px solid #ddd;
	margin: 1.5rem 0;
}

/* the iframe page scrolls inside the VK iframe height */
body.iframe { max-width: none; }

.container {
	height: 600px;
	overflow-y: auto;
	max-width: 64em;
	margin: 0 auto;
}

.headline {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.headline .logo {
	width: 128px;
	height: auto;
	flex: none;
}

@media (max-width: 30rem) {
	.headline {
		flex-direction: column;
		align-items: flex-start;
	}
}

#about p, #feedback p { margin: .5rem 0; }
#about .small { font-size: .9rem; color: #666; }

.footer { margin-top: 2rem; font-size: .9rem; color: #666; }

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 1.25rem;
}

.card {
	border: 1px solid #ddd;
	border-radius: .5rem;
	padding: 1rem;
}

.card img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: .25rem;
}

.card .author, .game .author { color: #666; margin: .25rem 0; }
.card .info { margin: .25rem 0 0; }

.back { margin: 0 0 1rem; }

.game {
	border: 1px solid #ddd;
	border-radius: .5rem;
	padding: 1.25rem;
}

.game .icon {
	display: block;
	width: 100%;
	max-width: 16rem;
	height: auto;
	border-radius: .25rem;
}

.game .dsc { white-space: pre-line; }

.play a {
	display: inline-block;
	padding: .5rem 1rem;
	border: 1px solid #14509c;
	border-radius: .25rem;
}