.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: 
		repeating-linear-gradient(
			45deg,
			var(--background-secondary),
			var(--background-secondary) 20px,
			var(--background-tertiary) 20px,
			var(--background-tertiary) 40px
		),
		linear-gradient(135deg, 
			var(--accent-tertiary) 0%,
			var(--background-quaternary) 30%,
			var(--accent-secondary) 100%
		);
	background-blend-mode: overlay;
	height: 400px;
	width: 100%;
}

.hero h1 {
	font-size: 3rem;
}

.structure ul {
	list-style-type: none;
	padding: 0;
	margin: 20px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.structure li {
	height: 100px;
	width: 100%;
	padding: 10px;
	border-radius: 8px;
	background: var(--accent-tertiary);
}

section {
	padding: 10px;
}

.fs-diagram {
	padding: 10px;
	display: flex;
	gap: 20px;
}

.fs-diagram > div {
	flex: 1;
	background: var(--background-tertiary);
	border-radius: 8px;
	padding: 10px;
}

.fs-diagram h3 {
	font-size: 1.2rem;
}

/* css wizardry */

.directory {
	font-family: monospace;
	padding: 10px;
}

.directory li::marker {
	content: "├───";
}

.directory li:last-child::marker {
	content: "└───";
}

.directory li:not(.directory > ul > li) {
	position: relative;
}

.directory li:not(.directory > ul > li):not(.directory > ul > li:last-child li)::before {
	content: "│";
	position: absolute;
	left: -9.6ch;
}