@font-face {
  font-family: "Rascal";
  src: url("./JustMeAgainDownHere-Regular.woff2") format('woff2');
}
@font-face {
  font-family: "PlayPen";
  src: url("./PlaypenSans-VariableFont_wght.woff2") format('woff2');
}
:root {
	--pink: #E3236D;
	--blue: #204D94;
	--grey: #CCCCCC;
	--gold: #E0AE3B;
	--white: #FFFFFF;
	--pinksel: #FFAAEE;
}

* { box-sizing: border-box; }

body {
	font-family: "PlayPen";
	font-weight: 300;
	margin: 0; padding: 0;
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--pink) 20%, var(--grey) 80%) 0%,
		var(--grey) 50%,
		color-mix(in srgb, var(--blue) 20%, var(--grey) 80%) 100%);
	background-attachment: fixed;
}
h1, h2 { font-family: "Rascal"; font-weight: normal; }
h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
b, strong { font-weight: 450; }
p { max-width: 48rem; margin: 1lh auto; }
header, main, footer {
	max-width: 70rem;
	margin: 1rem auto 2rem auto;
	padding: 2rem;
	background: var(--white);
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3), 0 7px 24px 0 rgba(0, 0, 0, 0.2);
}


header {
	position: relative;
	text-align: center;
	h1 {
		font-size: 3.5rem;
		color: var(--blue);
		margin: 1.5rem 1rem 2.5rem 1rem;
		font-weight: normal;
		span {
			color: var(--pink);
		}
	}
	nav {
		font-family: "Rascal";
		font-size: 2rem;
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 0.25rem 1rem;
		a {
			display: inline-block;
			text-decoration: none;
			text-transform: uppercase;
			color: var(--pink);
			padding: 0rem 1.25rem;
			transition: background 0.3s, color 0.3s;
		}
		a:hover {
			background: var(--grey);
			color: var(--blue);
		}
	}
}

main {
	position: relative;
	line-height: 1.75rem;
	h1 {
		text-align: center;
		color: var(--blue);
	}
	time {
		color: var(--pink);
		position: absolute;
		top: 1rem;
		right: 1rem;
	}
}

#toc {
	a {
		display: block;
		font-family: "Rascal";
		font-size: 2rem;
		text-decoration: none;
		color: var(--blue);
		position: relative;
		background: color-mix(var(--grey) 30%, var(--white) 70%);
		margin: 0.5rem;
		padding: 1rem;
		border-radius: 0.5rem;
		time { font-family: "PlayPen"; font-size: 1rem; }
	}
	a:hover {
		background: color-mix(var(--gold) 30%, var(--white) 70%);
	}
}

footer {
	text-align: center;
}