: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 {
	image-rendering: pixelated;
}

/* # Sections */

/* ## Title */

section.title {
	gap: var(--padding);
	display: grid;
	align-items: center;
	justify-items: center;
	grid-template-columns: repeat(10, 1fr);
	min-height: 30vh;
}

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

	width: 100%;
	transform: translateY(-10px);
	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(10px); }
	100% { transform: translateY(10px); }
}

/* ## Coffee */

section.coffee {
	display: grid;
	grid-template-columns: 100px 1fr;
}

section.coffee img {
	height: 100%;
}