:root {
	--primer-color-accent: 255, 255, 255;
	--color-accent: rgb(var(--primer-color-accent));
}

body {
	background-color: #06c;
	background-image: 
		linear-gradient(rgba(255,255,255,0.2) 2px, transparent 2px),
		linear-gradient(90deg, rgba(255,255,255,0.2) 2px, transparent 1px),
		linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px)
	;
	background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
	background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

header {
	background-color: transparent;
}

img {
	user-select: none;
	pointer-events: none;
	image-rendering: pixelated;
}

/* # Sections */

/* ## Title */

section.title {
	display: grid;
	align-items: center;
	justify-items: center;
	min-height: 50vw;
	grid-template-columns: repeat(5, 1fr);
	padding-bottom: var(--padding);
}

section.title img {
	--outline-width: 5px;
	--outline-color: black;

	width: 10vw;
	transform: translateY(-1vw);
	animation: bouncy 1s infinite alternate ease-in-out;
	filter: 
		drop-shadow(0 10px 0 blue)
		drop-shadow(0 vaR(--outline-width) 0 var(--outline-color))
		drop-shadow(0 calc(var(--outline-width) * -1) 0 var(--outline-color))
		drop-shadow(vaR(--outline-width) 0 0 var(--outline-color))
		drop-shadow(calc(var(--outline-width) * -1) 0 0 var(--outline-color))
	;
}

@keyframes bouncy {
	25% { transform: translateY(0); }
	100% { transform: translateY(0); }
}

/* ### Super Secret Settings */

section.sss {
	border-radius: 6px;
	padding: var(--padding);
	margin: var(--padding) 0;
	background-color: rgba(255, 255, 255, .1);
}

section.sss button {
	margin-top: var(--padding);
}

/* ## Coffee */

section.coffee {
	display: grid;
	gap: var(--padding);
	grid-template-columns: 100px 1fr;
}

section.coffee img {
	width: 100%;
}

/* # Size queries */

@media (min-width: 700px) {
	section.title {
		gap: var(--padding);
		margin: 50px 0;
		min-height: unset;
		grid-template-columns: repeat(10, 1fr);
	}

	section.title img {
		width: 100%;
		transform: translateY(-10px);
	}
}