:root {
	--main-width: 80ch;

	--background: url("../img/cheese-background.png") repeat
		var(--colour-primary-1);

	--colour-primary-1: #e1a33f;
	--colour-primary-2: #fbe4c5;

	scrollbar-width: auto;
	scrollbar-color: var(--colour-primary-2) var(--colour-primary-1);
}

html {
	cursor: url("../img/knife-neutral-x2.png"), default;
}

html:active {
	cursor: url("../img/knife-pressed-x2.png"), default;
}

.home-icon {
	position: relative;
	display: block;

	width: 80px;
	height: 80px;

	background-color: white;
	border-radius: 6px;

	img {
		width: 100%;
		height: 100%;
	}
}

main > * + * {
	margin-top: 1.5em;
}

section img {
	margin-block: 12px;
}

li::marker {
	content: "🧀 ";
}

table-of-contents {
	display: block;
}

.post,
table-of-contents {
	padding-inline: min(3vw, 24px);
	background-color: white;
	border: 4px dotted #ffd86d;
	border-radius: 12px;
}

.marquee {
	position: relative;
	overflow: hidden;
}

.marquee__inner {
	width: fit-content;
	display: flex;
	position: relative;
	transform: translate3d(var(--move-initial), 0, 0);
	animation: marquee 5s linear infinite;
	animation-play-state: paused;
}

.marquee span {
	font-size: 10vw;
	padding: 0 2vw;
}

.marquee:hover .marquee__inner {
	animation-play-state: running;
}

@keyframes marquee {
	0% {
		transform: translate3d(0, 0, 0);
	}

	50% {
		transform: translate3d(-50%, 0, 0);
	}

	100% {
		transform: translate3d(0, 0, 0);
	}
}