:root {
	--mu: 4px;
	--gap: var(--mu);
	--pad: var(--mu);
	--href-fg: #F00;

	font-family: sans-serif;
	font-size: 18px;
}


body {
	margin: 0;
	padding: 0;
	background-color: #F4F0EC;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

a {
	color: var(--href-fg);
}

a.button {
	padding: 4px;
	color: var(--href-fg);

	border-radius: 4px;

	&:hover {
		background-color: var(--href-fg);
		color: #FFF
	}
}

.text-s { font-size: 14px }
.text-m { font-size: 20px }

.p-top-1 { padding-top: calc(var(--pad) * 1); }
.p-top-2 { padding-top: calc(var(--pad) * 2); }
.p-top-3 { padding-top: calc(var(--pad) * 3); }
.p-top-4 { padding-top: calc(var(--pad) * 4); }
.p-bottom-1 { padding-bottom: calc(var(--pad) * 1); }
.p-bottom-2 { padding-bottom: calc(var(--pad) * 2); }
.p-bottom-3 { padding-bottom: calc(var(--pad) * 3); }
.p-bottom-4 { padding-bottom: calc(var(--pad) * 4); }

.gap-1 { gap: calc(var(--gap) * 1); }
.gap-2 { gap: calc(var(--gap) * 2); }
.gap-3 { gap: calc(var(--gap) * 3); }
.gap-4 { gap: calc(var(--gap) * 4); }

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

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

.wrap { flex-wrap: wrap; }

.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }

.align-items-center { align-items: center; }