body {
	font-family: "Lato", sans-serif;
	background-color: #fff;
	text-align: center;
	margin: 5% auto;
	color: #595959;
}
p {
	font-size: 0.8em;
	margin-top: 2em;
}
button {
	transition: opacity 2s ease-out, visibility 2s ease-out;
	background: url("img/indent.png"), none;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	aspect-ratio: 1 / 1;
	visibility: visible;
	font-size: 4vmin;
	border: none;
	height: 2em;
	width: 2em;
	opacity: 1;
}
img {
	filter: drop-shadow(0.25em 0.25em 0.25em rgba(0, 0, 0, 0.5));
	transition: transform 0.3s ease, filter 0.3s ease;
	height: auto;
	margin: auto;
	width: 100%;
	&:hover {
		filter: drop-shadow(1.25em 1.25em 0.25em rgba(0, 0, 0, 0.5));
		transform: translateY(-0.5em);
	}
}
#board {
	background-image: url("img/board.png");
	box-shadow: 1em 1em 2em #000;
	align-items: center;
	width: fit-content;
	border-radius: 2em;
	display: flex;
	margin: auto;
	padding: 1em;
}
#message {
	font-weight: bold;
	font-size: 1.2em;
	display: none;
}
.finished {
	visibility: hidden;
	opacity: 0;
}
.for-screenreaders {
	/* my own fix */
	white-space: nowrap;
	opacity: 0;

	/* official fix */
	position: absolute;
	overflow: hidden;
	/* left: -10000px; No good on mobile. */
	height: 1px;
	width: 1px;
	top: auto;

	/* This looks incredibly hacky because it is.
	 *
	 * Wanna know where I got it from?
	 * Not Stack Overflow, not AI--because I absolutely hate AI.
	 *
	 * I got it from THE OFFICIAL WebAIM WEBSITE!
	 * This is the OFFICIAL solution to make HTML elements
	 * visible to screen-readers but hidden visually.
	 * Right here, check it out for yourself:
	 *
	 * https://webaim.org/techniques/css/invisiblecontent/
	 *
	 * Now, why would a legit organization with a noble cause
	 * host such amateur-looking code as a solution to
	 * a real problem?
	 *
	 * Well, that, that is really simple.
	 * Because most of the modern internet and web browsers
	 * are actively hostile for users who are blind or
	 * visually impaired.
	 *
	 * It's not that no one is in need of a better solution.
	 * The reason behind this is that CSS and DOMs
	 * are processed by browsers in such a way that
	 * this is the ONLY METHOD which works effectively.
	 * And, despite the fact that most of the world is
	 * handled through the internet these days, no one
	 * cares enough to make it accessible for everyone.
	 *
	 * And I don't get it, it really should just be
	 * a simple fix for the web standard something like--
	 *
	 * 	display: screenreader;
	 *
	 * --in CSS. Visually equivalent to "display: none;" but
	 * fully visable for screenreaders.
	 *
	 * This is probably a horribly naive take and a lot
	 * of people would argue with me that its an issue of
	 * logistics or time or whatever, but to me it looks
	 * like laziness.
	 *
	 * If tech giants like Google can afford to dump loads
	 * of money into data-centers that nobody wants, they
	 * can spare a few thousand--more or less, I don't know
	 * how much these things cost--into adding a browser
	 * feature people actually need. If they got the ball
	 * rolling, I think everybody would follow. Or maybe
	 * Mozilla could beat them to the punch, I don't know.
	 * I'm just a university student who writes as a hobby.
	 * I don't know much about how anything works.
	 *
	 * If you're reading this then you were probably snooping
	 * around my code for whatever reason. Maybe you wanted to
	 * see how I did it for your own projects or you were just
	 * curious. Either way, I want you remember this.
	 *
	 * If you're the sort of person who writes websites--
	 * as a hobby or a living--get yourself a screen-reader
	 * program and test your work to see if it runs through
	 * it smoothly. There are a lot of free and open-source
	 * ones so finding one shouldn't be a problem. It seems
	 * like time-consuming work, especially considering that
	 * it rarely changes anything on the surface, but trust
	 * me--eventually someone will find your work and they'll
	 * be thankful you thought of them and their needs.
	 *
	 * This is not just an issue of software-design or
	 * engineering work. This problem comes down to a basic
	 * lack of human empathy in the industry. I try my best
	 * to make my work accessible and you should too.
	 *
	 * "Another flaw in the human character is that
	 * everybody wants to build and nobody wants to
	 * do maintenance." -- Kurt Vonnegut, Jr.
	 *
	 * Helping where we can makes a big difference.
	 *
	 * Caesar A.
	 * 07/08/2026
	 *
	 */
}

@media (orientation: portrait) {
	#board {
		flex-direction: column;
	}
	.end, .inner-edge, .peak, .outer-edge, .center {
		flex-direction: row;
		display: flex;
	}
	.inner-edge, .outer-edge {
		padding: 0.5em 0;
		.top {
			margin-right: 4em;
		}
		.bottom {
			margin-left: 4em;
		}
	}
	.center {
		padding: 1em 0;
	}
	.end {
		padding: 0.5em 0;
		.top {
			margin-right: 1em;
		}
		.bottom {
			margin-left: 1em;
		}
	}
	.peak {
		padding: 2em 0;
		.top {
			margin-right: 5em;
		}
		.bottom {
			margin-left: 5em;
		}
	}
}

@media (orientation: landscape) {
	#board {
		flex-direction: row;
	}
	.end, .inner-edge, .peak, .outer-edge, .center {
		flex-direction: column;
		display: flex;
	}
	.inner-edge, .outer-edge {
		padding: 0 0.5em;
		.top {
			margin-bottom: 4em;
		}
		.bottom {
			margin-top: 4em;
		}
	}
	.center {
		padding: 0 1em;
	}
	.end {
		padding: 0 0.5em;
		.top {
			margin-bottom: 1em;
		}
		.bottom {
			margin-top: 1em;
		}
	}
	.peak {
		padding: 0 2em;
		.top {
			margin-bottom: 5em;
		}
		.bottom {
			margin-top: 5em;
		}
	}
}

@media (max-width: 299px) or (max-height: 299px) {
	#board {
		display: none;
	}
	#message {
		display: block;
	}
}