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

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

.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;
}

#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;
}

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