:root {
	--medium-background: #e8edf5;
	--dark-section-background: #3a3a3e;
	--dark-section-text: rgba(255, 255, 255, 0.85);
	--dark-section-secondary: rgba(255, 255, 255, 0.45);
}

@media (prefers-color-scheme: dark) {
	:root {
		--medium-background: #182030;
		--dark-section-background: #12161c;
		--dark-section-text: rgba(255, 255, 255, 0.8);
		--dark-section-secondary: rgba(255, 255, 255, 0.4);
	}
}

/* Hero screenshot */

.hero-screenshot {
	text-align: center;
	padding: 21px 12px 45px 12px;
	max-width: 1200px;
	margin: 0 auto;
}
.hero-screenshot-ipad {
	padding-top: 48px;
}
.hero-screenshot img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	-webkit-mask-image: linear-gradient(to bottom, black 25%, transparent 50%);
	mask-image: linear-gradient(to bottom, black 25%, transparent 50%);
	margin-bottom: -38%;
}
.hero-screenshot-mac img {
	margin-bottom: -31%;
}

/* Screenshot backgrounds */

#screenshot-dark-background {
	background-color: var(--dark-section-background);
	box-shadow: inset 0 8px 12px -6px rgba(0, 0, 0, 0.35);
}
#mac-screenshot-background {
	background-color: var(--medium-background);
	box-shadow: inset 0 8px 12px -6px rgba(0, 0, 0, 0.15);
}

/* Download buttons */

.downloads {
	text-align: center;
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 2px 42px 2px;
	color: var(--text-color);
}
.downloads p {
	margin: 0 0 18px 0;
}
.downloads p:last-child {
	margin-bottom: 0;
}
.downloads .system-requirements {
	color: var(--secondary-text);
}
.mac-download {
	font-weight: bold;
	color: var(--link-color);
}
.mac-download:visited {
	color: var(--link-color);
}

/* Pitch section */

.pitch {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 42px 2px 0 2px;
	line-height: 1.7;
}
.pitch p:first-child {
	margin-top: 0;
}
.pitch p {
	margin: 0 0 14px 0;
}

/* Features */

#features-background {
	background-color: var(--content-background);
}
.features {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 41px 2px 41px 2px;
}
.features h3 {
	font-size: 17px;
	margin: 0 0 12px 0;
}
.features ul {
	margin: 0;
	padding-left: 0;
	list-style: none;
}
.features li {
	padding: 3px 0;
}
.features p {
	margin: 24px 0 0 0;
}

/* Quotes / testimonials */

#quotes-background {
	background-color: var(--dark-section-background);
	color: var(--dark-section-text);
}
.quotes {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 41px 2px 34px 2px;
}
.quotes h3 {
	color: var(--dark-section-text);
	font-size: 17px;
	margin: 0 0 16px 0;
}
.quotes blockquote {
	color: rgba(255, 255, 255, 0.75);
	border-left-color: var(--nav-gradient-top);
	margin-top: 28px;
}
.quotes .quote-author {
	color: var(--dark-section-secondary);
	font-size: 17px;
	margin: 0 0 24px 0;
}
.quotes .quote-author a {
	color: var(--nav-gradient-top);
}
.quotes .quote-author a:visited {
	color: var(--nav-gradient-top);
}

/* Links section */

#links-background {
	background-color: var(--medium-background);
	border-top: 1px solid var(--separator-color);
}
.links {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 39px 2px 45px 2px;
}
.links h3 {
	font-size: 17px;
	margin: 0 0 16px 0;
}
.links ul {
	margin: 0;
	padding-left: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 32px;
	row-gap: 2px;
	font-size: 15px;
}
.links a, .links a:visited {
	color: var(--link-color);
}

/* Responsive (home page) */

@media (max-width: 700px) {
	.pitch, .features, .quotes {
		padding-left: 12px;
		padding-right: 12px;
	}
}

@media (max-width: 480px) {
	.links ul {
		grid-template-columns: 1fr;
	}
}