:root{
	--clr-text-muted: #888888;
	--clr-text-muted-dark: #666666;
	
	--clr-bg-muted: #eeeeee;
	--clr-bg-muted-dark: #dddddd;
}

/* --- color --- */
.white { color: white; }
.muted { color: var(--clr-text-muted); }

/* --- layout --- */
.flex-center {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.column {
	flex-direction: column;
}
.full-absolute {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 1;
}

.box {
	border: 1px solid var(--clr-bg-muted);
	border-radius: 4px;
    padding: 1em;
}
.box.muted {
	color: var(--clr-text-muted-dark);
	background-color: var(--clr-bg-muted);
	border-color: var(--clr-bg-muted-dark);
}

.subcontent {
	border-width: 0;
	border-left-width: .1em;
	border-color: var(--clr-bg-muted);
    border-style: solid;
    padding: 0.5em 1em;
}