@import url(https://fonts.googleapis.com/css?family=Anonymous+Pro);

:root {
	/* Base font size */
	font-size: 10px;

	/* Heading height variable*/
	--heading-height: 30em;
}

body {
	font-family: 'Anonymous Pro', monospace;
	min-height: 100vh;
    margin: 0%;
}

header {
	position: fixed;
	width: 100%;
	height: var(--heading-height);
}

/* Create angled background with 'before' pseudo-element */
header::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 6em;
	width: 100%;
	height: calc(var(--heading-height) + 10em);
	z-index: -1;
	transform: skewY(-3.5deg);
	background: 
		linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)),
		url(https://github.blog/wp-content/uploads/2021/02/card.png?resize=1200%2C630) no-repeat center,
		linear-gradient(#4e4376, #2b5876);
	background-size: cover;
	border-bottom: .2em solid #fff;
}

h1 {
	font-size: calc(2.8em + 1vw);
	font-weight: 700;
	letter-spacing: .01em;
	padding: 10rem 0 0 4.5rem;
	text-shadow: .022em .022em .022em #111;
	color: #fff;
}

main {
	padding: calc(var(--heading-height) + 1.5vw) 4em 0;
}

p {
	font-size: calc(2em + .25vw);
	font-weight: 400;
	margin-bottom: 1.5em;
    text-align: center;
}