/* Basic styling */
body {
	margin: 0;
    color: white;
    font-family: Comic Mono;
	font-size: 1.2rem;
	background-color: #141016;
}

/* Setting up the centered content */
section {
	display: grid;
	justify-content: center;

	padding: 50px 0;
}
section > * {
	width: min(80vw, 700px)
}

/* Styles for the header */
header p:first-of-type {
    font-size: 2em;
}
h1 {
    font-size: 5em;
    margin-top: 15px;
    margin-bottom: 15px;
}
header {
    text-align: center;
	height: 100vh;
	display: grid;
	align-content: center;
	background-color: #2A1A35;
}

/* Color Scheme */
h1, a {
	color: #AA89FD;
}
h2 {
	color: #F10385;
}
section {
	counter-increment: section-number;
	background-color: rgba(42, 26, 53, calc(1 - var(--section-number) / var(--section-count, 5)));
}
section:nth-child(1) { --section-number: 1 }
section:nth-child(2) { --section-number: 2 }
section:nth-child(3) { --section-number: 3 }
section:nth-child(4) { --section-number: 4 }
section:nth-child(5) { --section-number: 5 }
section:nth-child(6) { --section-number: 6 }
section:nth-child(7) { --section-number: 7 }
section:nth-child(8) { --section-number: 8 }
section:nth-child(9) { --section-number: 9 }
section:nth-child(10) { --section-number: 10 }
section:nth-child(11) { --section-number: 11 }
section:nth-child(12) { --section-number: 12 }
section:nth-child(13) { --section-number: 13 }
section:nth-child(14) { --section-number: 14 }
section:nth-child(15) { --section-number: 15 }
section:nth-child(16) { --section-number: 16 }
section:nth-child(17) { --section-number: 17 }
section:nth-child(18) { --section-number: 18 }
section:nth-child(19) { --section-number: 19 }
section:nth-child(20) { --section-number: 20 }