.hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	/* REPLACE THIS */
	background-image:
		linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		/* If link breaks, post is here: https://www.reddit.com/r/unixporn/comments/1f1n5t3/cinnamon_linux_mint/ */
		url("https://preview.redd.it/cinnamon-linux-mint-v0-cdrnxz2y60ld1.png?width=1080&crop=smart&auto=webp&s=ffea184a85faccdfa44e2dc0efd2a8dd80443641");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height: 400px;
	width: 100%;
}

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

.explanation {
	padding: 20px;
	margin: 20px 10%;
	border-radius: 16px;
	background: var(--background-secondary);
	border: var(--border) solid 2px;
	box-shadow: var(--shadow);
}

.why {
	padding: 20px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.why h2 {
	grid-column: 1 / -1;
	margin-bottom: 20px;
}

.why hr {
	grid-column: 1 / -1;
	margin-top: 10px;
	margin-bottom: 20px;
}

.why h4 {
	grid-column: 1 / -1;
}

.cell {
	padding: 8px;
}

.learn {
	display: flex;
	justify-content: space-evenly;
	gap: 50px;
	padding: 20px 10%;
}

.learn .button {
	flex: 1;
}

.cta {
	margin-top: 20px;
}

.who-graphic {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5%;
}

.who-graphic aside {
	background: var(--background-secondary);
	height: 300px;
	border-radius: 8px;
	border: var(--border) solid 2px;
	padding: 20px;
	transition: opacity ease-in 0.3s;
	width: 200px;
	opacity: 0;
}

/* Cool hover effect using only CSS */
.who-graphic aside > div { display: none; }
.who-graphic:has(li:hover, li:focus) aside { opacity: 1; }
.who-graphic:has(li.developers:hover, li.developers:focus) aside div.developers { display: block; }
.who-graphic:has(li.learners:hover, li.learners:focus) aside div.learners { display: block; }
.who-graphic:has(li.hobbyists:hover, li.hobbyists:focus) aside div.hobbyists { display: block; }

ul.circular {
	position: relative;
	width: 300px;
	height: 300px;
	list-style: none;
	margin: 50px;
	border: var(--border) solid 3px;
	border-radius: 50%;
}

ul.circular li {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) rotate(calc(var(--item) * 120deg)) translateY(-150px) rotate(calc(var(--item) * -120deg));
	background: var(--accent-primary);
	border-radius: 8px;
	padding: 10px;
	cursor: pointer;
}

ul.circular li:nth-child(1) { --item: 1; }
ul.circular li:nth-child(2) { --item: 2; }
ul.circular li:nth-child(3) { --item: 3; }