body {
	background-color: #f7f1f7;
	color: #333;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	margin: 0;
	padding: 0;
	width: 100%;
}

header {
	text-align: center;
	margin: 1em 1em 0 1em;
}

header img {
    max-width: 960px;
	width: 100vw;
}

a:link, a:visited {
	font-weight: inherit;
	color: cornflowerblue;
	text-decoration: none;
}

a:hover {
	color: blue;
}

h1, h2 {
    margin: 0;
	font-weight: 200;
	text-align: center;
}

h1 {
	font-size: 64px;
	text-transform: uppercase;
	margin-top: 24px;
}

h2 {
	font-size: 24px;
    margin: 16px 0 32px 0;
}
	
#description, #screenshots, #quote {
	margin: 0 auto;
	max-width: 640px;
	padding: 0 24px;
}

#screenshots {
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 8px;
	margin-bottom: 8px;
}

.minitext {
	text-align: center;
	font-size: 10px;
	margin-bottom: 32px;
}

#quote p {
	text-align: center;
	font-size: 48px;
	font-weight: 200;
	line-height: 1.4em;
	margin: 48px auto;
}

p, label {
	font-size: 1em;
	line-height: 1.8;
	margin-bottom: 2em;
}

img {
	width: 100%;
}

.btn {
	cursor: pointer;
}

label {
	font-weight: bold;
}

a.btn, #member_submit {
	border-radius: 8px;
	border: none;
	font-size: 1em;
	font-weight: bold;
	color: #fff;
	background: #333;
	padding: 16px;
	margin: 12px 0 8px 0;
	width: 336px; /* size of inputs + padding */
	text-align: center;
}

a.btn:hover, .member_submit:hover {
  background: #ccc;
}

footer {
	font-size: 10px;
	color: #333;
	text-align: center;
}

#newsletter-embed {
	text-align: center;
	background-color: #fff;
	border-radius: 8px;
	padding: 16px 8px;
	max-width: 624px;
	margin: 0 auto;
}

input#member_submit.btn:hover {
	background-color: #fff;
	color: #333;
}

input[type=email], input[type=text] {
	padding: 16px 8px;
	margin-top: 16px;
	border-radius: 8px;
	width: 100%;
	max-width: 320px;
	border: 1px solid #fff;
	text-align: center;
}

input#member_email.revue-form-field:hover {
	border: 1px solid #333;
}

@media screen and (max-width: 960px) {

	header {
		margin: 0;
	}

	h1 {
		font-size: 40px;
	}
	h2 {
		font-size: 1.1em;
	}

	p, label {
		font-size: 1.2em;
	}

	#screenshots {
		grid-template-columns: repeat(1, 1fr);
	}
}