body {
	--main-color: hsl(30, 6%, 18%);

	background-color: hsl(210, 1%, 91%);
	color: var(--main-color);
	margin: 0;
	padding: 0;
	font-family: 'Helvetica', 'Roboto', 'Arial', sans-serif;
}

p a,
li a {
	color: hsl(220, 80%, 45%);
	text-decoration-color: hsl(220, 66%, 78%);
}

.page {
	margin: 0 auto;
	max-width: 600px;
}

section {
	padding-top: 60px;
	padding-left: 30px;
	padding-right: 30px;
}

section + section,
a + section {
	margin-top: 60px;
	border-top: 2px solid var(--main-color);
}

.pre-header {
	padding-left: 0.05em;
	font-weight: bold;
}

.pre-header + h1 {
	margin-top: 0;
}

h1:first-child,
h2:first-child,
h3:first-child {
	margin-top: 0;
	padding-top: 0;
}

h1 {
	font-size: 34px;
}

h2 {
	font-size: 28px;
}

h3 {
	font-size: 22px;

	&:not(:first-child) {
		margin-top: 40px;
	}
}

p {
	line-height: 1.5em;
}

section > ul > li {
	margin-top: 1.5em;
}

li {
	line-height: 1.5em;
	margin-top: 10px;
}

pre {
	tab-size: 1.5em;
	white-space: pre-wrap;
	background-color: hsl(210, 1%, 94%);
	padding: 1em;
	border-radius: 5px;
}

span.pre {
	display: inline-block;
	font-family: monospace;
	background-color: hsl(210, 1%, 94%);
	padding: 0 0.3em;
	border-radius: 5px;
}

span.pre.strong {
	display: inline-block;
	font-family: monospace;
	background: linear-gradient(to top, hsl(210, 49%, 21%), hsl(210, 51%, 41%));
	color: white;
	text-shadow: 0 -1px 0 hsl(210, 89%, 8%);
	padding: 0 0.6em;
	border-radius: 5px;
	margin-right: 0.5em;
}

a.download {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	align-items: center;
	width: 370px;
	margin: 40px auto;
	padding: 10px;
	border-radius: 10px;
	text-decoration: none;
	box-shadow:
		inset 0 1px 0 hsl(47, 100%, 67%),
		inset 0 -1px 0 hsl(41, 100%, 47%),
		0 10px 30px -2px hsla(224, 100%, 27%, 0.2);
	background: radial-gradient(300px at 50% 30%, hsl(43, 100%, 79%), hsl(43, 100%, 59%));
	transition: filter 0.3s ease-out;
	
	&:hover {
		filter: brightness(1.05);
		transition-duration: 0.1s;
	}
	
	> img {
		pointer-events: none;
		border: 10px solid black;
		border-radius: 4px;
	}
	
	> .app-version {
		pointer-events: none;
		margin: 30px 0;
		padding: 10px 12px;
		border-radius: 30px;
		background: linear-gradient(to top, hsl(40, 100%, 51%), hsl(47, 100%, 72%));
		border: 1px solid hsl(43, 49%, 58%);
		box-shadow:
			inset 0 2px 1px hsl(50, 100%, 72%),
			0 4px 8px -1px hsla(35, 100%, 50%, 0.75);
		font-size: 16px;
		font-weight: bold;
		
		> .white {
			padding: 7px 14px;
			border-radius: 20px;
			background: linear-gradient(to top, hsla(51, 100%, 99%, 0.7), hsla(51, 100%, 99%, 1.0));
			color: hsl(43, 78%, 10%);
		}
	}
	
	> .playdate-version {
		pointer-events: none;
		padding: 6px 12px;
		color: rgb(239, 232, 244);
		border-radius: 4px;
		background-color: hsl(276, 76%, 68%);
		font-size: 12px;
		font-weight: bold;
		text-align: center;
	}
}

img.floating-screenshot {
	width: 530px;
	border-radius: 20px;
	box-shadow: 0 5px 10px -1px hsla(214, 19%, 1%, 0.4),
		0 20px 50px -2px hsla(214, 19%, 1%, 0.3);
}

p + img.floating-screenshot {
	margin-top: 20px;
}

p.image-description {
	text-align: center;
	font-size: 13px;
	color: hsl(212, 4%, 47%);
}