html, body, #container {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

body {
	background: grey;
	animation: colorchange 50s infinite;
}

@keyframes colorchange {
	00.00% {background: blue;}
	16.66% {background: green;}
	33.33% {background: yellow;}
	50.00% {background: orange;}
	66.66% {background: red;}
	83.33% {background: violet;}
	100.0% {background: blue;}
}

html, a, a:hover, a:active {
	color: #222222;
	font-family: 'Vollkorn', serif;
	font-weight: bold;
	font-size: 3vmin;
	text-decoration: none;
}

#container {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.4);
}

.row {
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.person {
	text-align: center;
	min-width: 20vmin;
	min-height: 17.3vmin;
	margin: 1.73vmin 2vmin;
	padding: 1.73vmin 2vmin;
	display: flex;
	align-items: center;
	justify-content: center;
}
a:not([href]) {
	cursor: default;
}

.circle {
	width: 10vmin;
	height: 10vmin;
	margin: 1vmin auto;
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	background-color: rgba(255,255,255,0.8);
	border-radius: 50%;
	font-size: 6vmin;
	box-shadow: 0 0 2vmin rgba(0,0,0,0.5);
	
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

.circle span {
	margin-bottom: -1vmin;
}

.name {
	opacity: 0;
	transition: opacity 0.5s;
}

.person:hover .name {
	opacity: 1;
	text-shadow: 0 0 2vmin rgba(255,255,255,0.5);
}