:root {
	--grey: #333;
	--light-grey: #666;
	--cork-board-border-width: 16px;
}

body {
	font-family: "Inter", sans-serif;
	font-weight: 400;
	background-image: url("../img/textures/memphis-colorful.webp");
	margin: 0px 16px 0px 16px;
}

.not-selectable {
	pointer-events: none;
	user-select: none;
}

.pixelated {
	font-family: "Jersey 25", "Courier New", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.handwriting {
	font-family: "Playpen Sans", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wavy {
	text-decoration: #000 wavy underline 1px;
	text-decoration-skip-ink: none;
}

.rainbow {
	background: linear-gradient(to right, #E64A39, #E97439, #EDD157, #65ED99, #5F8BE9, #6F1BC6, #E64A39);
	background-clip: text;
	-webkit-background-clip: text;
	font-weight: bold;
	color: transparent;
	animation: rainbow_animation 10s linear infinite;
	background-size: 200% 100%;
}

@keyframes rainbow_animation {
	0% { background-position: 0 0 }
	100% { background-position: 400% 0 }
}

#cork-board {
	max-width: 900px;
	min-width: calc(300px + 2 * var(--cork-board-border-width));
	background-image: url("../img/textures/cork-board.webp");
	box-shadow: inset 1px 1px 8px rgba(0, 0, 0, 0.3);
	position: relative;
	margin-top: var(--cork-board-border-width);
	margin-bottom: 60px;
}

#cork-board::before {
	content: "";
	position: absolute;
	top: calc(-1 * var(--cork-board-border-width));
	left: calc(-1 * var(--cork-board-border-width));
	width: calc(100% + 2 * var(--cork-board-border-width));
	height: calc(100% + 2 * var(--cork-board-border-width));
	background-image: url("../img/textures/wood.webp");
	z-index: -2;
	box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

#cork-board::after {
	content: "";
	position: absolute;
	top: calc(-1 * var(--cork-board-border-width));
	left: calc(-1 * var(--cork-board-border-width));
	width: calc(100% + 2 * var(--cork-board-border-width));
	height: calc(100% + 2 * var(--cork-board-border-width));
	clip-path: polygon(
		0 0,
		var(--cork-board-border-width) var(--cork-board-border-width),
		var(--cork-board-border-width) calc(100% - 1 * var(--cork-board-border-width)),
		0px 100%,
		100% 100%,
		calc(100% - 1 * var(--cork-board-border-width)) calc(100% - 1 * var(--cork-board-border-width)),
		calc(100% - 1 * var(--cork-board-border-width)) var(--cork-board-border-width),
		100% 0
	);
	background-image: url("../img/textures/wood-90.webp");
	z-index: -1;
}

#content {
	padding: 64px var(--cork-board-border-width);
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: center;
	align-content: space-around;
	gap: var(--cork-board-border-width);
}

#content-header {
	display: grid;
	grid-template-columns: 1fr 300px 1fr
}


#footer {
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translate(-50%, 100%);
	line-height: var(--cork-board-border-width);
	font-size: 0.7em;
	color: #c9a07c;
}