:root {
	--jua: "Jua", sans-serif;
	--pixel: "Pixelify Sans", sans-serif;
	--bk: #111111;
	--wht: #EEEEEE;
}

* {
	text-align: center;
	font-family: var(--pixel);
	text-transform: uppercase;
}

body {
	background-color: var(--wht);
	image-rendering: pixelated;
	color: var(--bk);
	background-image: url("../assets/8bit3.webp");
	background-size: 286%;
}

/* HERO TEXT */
h1 {
	font-family: var(--pixel);
	color: var(--bk);
	font-size: calc(var(--font-size)*2);
	font-weight: 800;
}

.hero, .sub {
	width: fit-content;
	margin: auto;
	padding: var(--padding);
	border: solid 2px var(--bk);
	background-color: var(--wht);
}

.hero {
	margin-top: var(--margin);
}

.sub {
	font-weight: var(--bolded);
	background-color: var(--wht);
	color: var(--bk);
}

.colophon {
	background-color: var(--wht);	
	padding: var(--padding);
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	font-weight: var(--bolded);
	color: var(--bk);
	margin-left: var(--margin);
	border: solid 2px var(--bk);
	margin-right: var(--margin);
	margin-bottom: var(--padding);
}


/* BUTTON */
button {
	padding: var(--padding);
	border: solid 2px var(--black);
	background-color: var(--wht);
	font-weight: var(--bolded);
	margin-top: var(--margin);
	min-width: 20.5rem;
	display: flex;
	justify-content: center;
	gap: .5rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--margin);
	animation: extend 1.5s ease-in-out infinite;
	box-shadow: 3px 3px var(--yellow);
}

button > a {
	/* text-decoration: underline; */
	color: var(--black);
}

@keyframes extend {
	0% {
		box-shadow: 3px 3px var(--yellow);
	}

	50% {
		transform: translate(-4px, -4px);
		box-shadow: 5px 5px var(--yellow);
	}

	100% {
		box-shadow: 3px 3px var(--yellow);
	}
}


/* HERO IMAGE */
.hero-image {
	margin-left: var(--margin);
	margin-right: var(--margin);
	margin-top: var(--margin);
	
	img {
		margin-bottom: var(--padding);
	}
}


/* FOOTER */
footer {
	padding: var(--padding);
	/* background-color: var(--wht);
	border: var(--bk) 2px solid; */
	font-weight: var(--bolded);
	margin-top: var(--margin);
}


/* 800PX */
@media (min-width: 800px) {
	body {
		background-size: 162%;
	}

	.hero-image {
		width: 30rem;
		margin-left: auto;
		margin-right: auto;

		img {
			width: 100%;
		}
	}

	.colophon {
		width: 30rem;
		margin: auto;
		font-size: calc(var(--font-size)*1.3);
	}

	a {
		font-size: calc(var(--font-size)*1.3);
	}

	button {
		min-width: 30rem;
	}

}


/* 1290px */
@media (min-width: 1290px) {
	/* BACKGROUND IMAGE */
	body {
		background-size: 90%;
	}

	/* MAIN */
	main {
		display: flex;
		max-width: 65rem;
		margin: auto;
		margin-top: calc(var(--margin)*6);
		margin-bottom: calc(var(--margin)*4);
	}

	.colophon {
		margin-top: calc(var(--padding)*1.5);
	}

	.hero-img {
		width: 33rem;
		padding-left: 0;
	}

	.hero-img > img {
		width: 100%;
		margin-bottom: 0;
	}
}