:root {
	--headheight: 64px;
}

* {
	box-sizing: border-box;
}

#mainbox {
	text-align: justify;
	text-align-last: justify;
}

.main {
	display: inline-block;
	border: 2px grey solid;
	border-radius: 1ex;
	width: 30vw;
	height: 50vh;
	text-align: initial;
	text-align-last: initial;
	padding: 2ex;
	margin: 3ex;
	vertical-align: top;
}

.main a {
	text-decoration: none;
	color: black;
}

.main li {
	list-style-type: none;
	padding: 0ex 1ex 0ex 1ex;
	border: 1px lightgreen solid;
	border-radius: 2ex;
	margin: 1em 1em 1em 1em;
}

li {
	clear: both;
}

.float {
	float: left;
	width: 25%;
	padding: 0em 2em 2em 2em;
}

body {
	margin-bottom: 15em;
	/* Source: https://1-background.com/water_backgrounds_1.htm - Permits use free of charge. */
	background-image: url(../images/wbg.jpg);
}

#software {
	background-image: url(../images/software.png);
}

#hardware {
	background-image: url(../images/hardware.png);
}

#education {
	background-image: url(../images/education.png);
}

.tail {
	position: fixed;
	bottom: 0px;
	width: 100%;
	background-color: rgba(255, 255, 240, .8);
	text-align: center;
}

.tail > div {
	display: inline-block;
	margin-left: 10%;
	margin-right: 10%;
	vertical-align: top;
	text-align: left;
}

.tail li {
	list-style-type: none;
}

#header {
	font-size: 200%;
	float: left;
	padding: 0px 2em 0px 0px;
}

body > h1 {
	line-height: var(--headheight);
	text-align: center;
	padding-right: 20em;
}

body > h1 + p {
	clear: left;
}

#header a {
	text-decoration: none;
	color: black;
	line-height: var(--headheight);
	padding: 0px 0px 0px 0px;
}

#header a span {
	display: inline-block;
	vertical-align: top;
	height: var(--headheight);
	line-height: var(--headheight);
}