body { background-color: #223; color: #eef; font-family: sans-serif; }
a, a:visited { color: #eef; text-decoration: none; }

svg rect ~ [fill^="#"] { fill: #223; }
svg rect[fill] { fill: #eef; }


body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
}

header, footer {
	background: #112;
	height: 5rem;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
}

body ul {
	display: flex;
	flex: 1;
	align-items: center;
	flex-wrap: wrap;
	padding: 0;
}

li { flex: 1; list-style-type: none; padding: 2rem }

li a {
	display: flex; flex-direction: column; align-items: center;
}

li span {
	height: 2rem;
	text-align: center
}

svg {
	width: 4rem;
	margin: 1rem;
}