html {
	--black: #333;
	--white: #FFF;
	--green: #00FF77;
	--highlight: #E63BA7;

	--boxshadowsizedesktop: 10px;
	--boxshadowsizemobile: 5px;

	font-family: 'Inter', sans-serif;
	font-size:16px;
}

.wrapper--outer {
	max-width:1200px;
	width:100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	height:100vh;
}

.wrapper--inner {
	max-width:800px;
	width:100%;
	color:var(--black);
	margin:auto;
	text-align: center;
}

.logo {
	width:300px;
	margin: 100px 0 0 0;
}

header {
	text-align: center;
	padding:50px;
	width:100%;
}

header img {
	width:30%;
	margin:0;
	box-shadow: 10px 10px 0 0 var(--green), -10px -20px 0 0 var(--highlight), -10px 20px 0 0 var(--black);
}

h1 {
	font-weight: 900;
	text-transform: uppercase;
	font-size:7rem;
	line-height: 1;
	margin: 0;
	visibility: hidden;
	position: absolute;
}

h4 {
	font-size:3rem;
	line-height: 1;
	margin:0 0 100px 0;
	text-align: center;
}

ul {
	margin: 0;
	padding: 0;
	list-style:none;
	display: flex;
	justify-content:center;
	align-items: center
}

li {
	/*margin-right:30px;*/
}

.spooky:hover {
	color:var(--green);
}

.garish:hover {
	color:var(--highlight);
}


@media (max-width: 420px) {
	header {
		text-align: center;
		padding:20px 10px 10px 10px;
	}


	header img {
		width:200px;
		box-shadow: 5px 5px 0 0 var(--green), -5px -10px 0 0 var(--highlight), -5px 10px 0 0 var(--black);
	}


	h1 {
		font-size:3rem;
	}

	h4 {
		font-size:1rem;
	}

	.wrapper--inner {
		max-width: 420px;
		padding:0 10px;
	}

}