/* Core */

body {
	color: #eee;
	background: #111;
	margin: 0;
}

img {
	max-width: 100%;
}

*:any-link {
	color: #a8f;
}

/* General Layout */

.centered {
	text-align: center;
}

/* Main Page Layout */

.rows {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.infobox-container {
	padding: 0 1rem;
	gap: 1rem;
}

.infobox {
	padding: 0 1rem;
}

.purple {
	background: #214;
	border: 0.2rem solid #428;
	border-radius: 1rem;
}

.blue {
	background: #114;
	border: 0.2rem solid #228;
	border-radius: 1rem;
}

.medium {
	width: 35.1rem; /* 37.5rem, minus 2 for 1rem padding *2 and 0.4 for 0.2rem border *2 */
}

/* Work Page Layout */

.row {
	display: flex;
	flex-direction: row;
}

.content {
	flex: 1 1 0%;
}

.sidebar-toggle {
	position: fixed;
	top: 0.5rem;
	z-index: 1;
}

.sidebar-toggle:checked {
	right: 25.5rem; /* 0.5rem unchecked right value plus 25rem sidebar width */
}

.sidebar-toggle:not(:checked) {
	right: 0.5rem;
}

.sidebar {
	width: 25rem;
	height: 100vh;
	position: sticky;
	top: 0;
	overflow-y: auto;
}

.sidebar-toggle:not(:checked) + .sidebar {
	display: none;
}

.prose {
	padding: 0 7.5%;
}

/* .cyoa {} */

.cyoa ~ .sidebar {
	padding-left: 1rem;
}