* {
	box-sizing: border-box;

	::selection {
		background-color: rgb(45 90 80);
	}
}

body {
	background: url("halftone-dots.png"), linear-gradient(to bottom right, rgb(30 30 30), rgb(30 35 40));

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh; /* "at least 100% view height" is intuitive */
	margin: 0; /* box-sizing: border-box; doesn't cover margins */

	color: white;
	font-family: "Vollkorn", sans-serif;
	text-align: center;
}

section {
	padding: 20px 0;
}

.intro {
	width: 100%;

	h1 {
		font-size: 3em;
		margin-bottom: 0;
		text-shadow: 5px 5px 10px black;

		sup {
			font-size: 0.5em;
		}
	}

	div {
		display: flex;
		justify-content: center;
		align-items: center;

		p {
			max-width: 800px;
			width: 80vw;
		}
	}
}

.under-stripe {
	background: rgb(0 0 0 / 0.2);
	border-top: solid 1px black;
	border-bottom: solid 1px black;
}

h2 {
	width: 100%; /* 100vw is useless because it'll create a horizontal scrollbar as intended behaviour */
	/*text-align: left;*/
	padding: 10px 30px;
	font-size: 2em;
	font-weight: normal;
	margin-top: 40px;
}

.bullet-list {
	/*width: 100%;*/

	ul {
		text-align: left;
		list-style-image: url("/bullet.png");

		li {
			padding-bottom: 10px;
			margin-left: 30px;
		}
	}
}

.screenshots, .thumbs {
	display: grid;
	grid-gap: 10px;
	max-width: 90vw;
	margin-bottom: 20px;

	> a {
		aspect-ratio: 400 / 225;
		max-width: 400px;
		overflow: hidden;
		border: 1px solid rgb(255 255 255 / 0.7);

		img {
			display: block; /* else there's a small gap below each */
			width: 100%; /* else image won't adjust to parent's size on small screens */
		}
	}

	div {
		padding-top: 30px;
	}
}

.thumbs-direct a {
	max-width: 210px;
}

a {
	text-decoration: none;
	color: rgb(200,200,200);
}
.big-link, .med-link {
	display: block;
	font-size: 2rem;
	background-color: rgba(200,200,200,0.15);
	padding: 1rem;
	border: 1px solid rgba(200,200,200,0.25);
	transition: background-color 0.5s, color 0.5s;
}
.big-link:hover, .med-link:hover {
	color: white;
	background-color: rgba(175,175,175,0.25);
}
.med-link {
	font-size: 1.5rem;
	padding: 0.75rem;
	margin-bottom: 1rem;
}
.standalone-link {
	width: 80vw;
}

.infolist {
	display: table;
	width: 90vw;

	dl {
		display: table-row;
		font-size: 1.2em;

		> * {
			display: table-cell;
			padding: 10px 0;
			vertical-align: middle;
		}
		dt {
			text-align: right;
			padding-right: 40px;
			border-right: solid 5px rgb(255 255 255 / 0.1);
			color: rgb(200 240 255 / 0.5);
			width: 40%;
		}
		dd {
			text-align: left;
			padding-left: 40px;
			width: 60%;
		}
	}
}

footer {
	font-size: 0.8em;
	margin: 30px;

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

@media (max-width: 1250px) { /* smaller */
	.screenshots {
		grid-template-columns: repeat(2, 1fr);
		/*grid-template-rows: 1fr 1fr 1fr 100px 100px;*/

		div {
			grid-column-start: 1;
			grid-column-end: 3; /* +1 over what you'd think it should be */
		}
	}
}
@media (min-width: 1251px) { /* larger */
	.screenshots {
		grid-template-columns: repeat(3, 1fr);
		/*grid-template-rows: 1fr 1fr 100px 100px;*/

		div {
			grid-column-start: 1;
			grid-column-end: 4;
		}
	}
}

@media (max-width: 800px) {
	.thumbs {
		grid-template-columns: repeat(2, 1fr);
	}
	.infolist {
		font-size: 0.8em;
	}
	.bullet-list {
		ul {
			padding: 0 10px;
		}
	}
}
@media (min-width: 801px) {
	.thumbs {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 500px) {
	.intro h1 { font-size: 1.8em; }
}

@media (prefers-reduced-motion: no-preference) { /* avoid cosmetic animations for people who opt out */
	img { transition-duration: 0.5s; }
	.screenshots a:hover img, .thumbs a:hover img {
		transform: scale(1.1);
	}
}