:root {
	--p-purple: #54177F;
	--p-pink: #DC026F;
	--p-yellow: #FFF20D;
	--p-light: #EFEFEF;
	--p-dark: #2E2E2E;
}

body {
	background-color: var(--p-purple);
	background-image: url(img/PolyYellow.svg), url(img/PolyPink.svg);
	background-repeat: no-repeat;
	background-size: 80vw, 70vw;
	background-position: -40vw -60vw, right -50vw top 40vh;
	background-attachment: fixed;
	color: var(--p-light);
	font-family: 'Inter', sans-serif;
	text-align: center;
	padding-top: 20vh;
}

img {
	width: 9em;
	height: 9em;
}

h1 {
	font-family: ratio-display, sans-serif;
	font-size: 7em;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	max-width: 90vw;
	padding: 0;
	margin: 0 auto;
}

p {
	font-weight: 300;
	font-size: 2em;
	max-width: 50vw;
	margin: 1em auto;
}

p.small {
	font-size: 1em;
}

p.medium {
	font-size: 1.5em;
}

a {
	color: inherit;
}

a.textlink {
	color: var(--p-yellow);
	text-decoration: none;
	border-bottom: 2px solid var(--p-yellow);
}

input[type=email] {
	display: block;
	margin: 0 auto;
	font-size: 2em;
	border: none;
	border-radius: 0.9em;
	padding: 0.5em 0.7em;
	width: 100%;
	max-width: 50vw;
	box-shadow: 0 0.3em 1em rgba(0,0,0,0.4);
}

label {
	display: grid;
	grid-column-gap: 0.3em;
	max-width: 50vw;
	margin: 1em auto;
	text-align: left;
}

label > input[type=checkbox] {
	grid-column: 1;
	width: 2em;
	height: 2em;
}

label > span {
	grid-column: 2;
}

button {
	font-size: 2em;
	font-weight: 600;
	color: var(--p-dark);
	background-color: var(--p-yellow);
	border: none;
	border-radius: 0.9em;
	padding: 0.5em 0.7em;
	cursor: pointer;
	margin-top: 1em;
	margin-bottom: 4em;
}

footer {
	text-align: center;
	font-size: 0.7em;
	color: var(--p-light);
	padding-bottom: 2em;
}

@media (max-width: 800px) {
	body {
		background-size: 120vw, 120vw;
		background-position: -45vw -84vw, right -40vw top 85vh;
	}
	img {
		width: 7em;
		height: 7em;
	}
	h1 {
		font-size: 5em;
	}
	form h1 {
		font-size: 4em;
	}
	p {
		font-size:  1.5em;
		max-width: 90vw;
	}
	label, input[type=email] {
		max-width: 80vw;
	}
}