/* 
	shapeSpace design by Jeff Starr @ Monzilla Media
	
	464646 = grey
	21759b = blue
	d54e21 = red
	
	afa09b = dark
	cdc0bc = med
	ddd5d3 = lite
*/

::selection      { color: #fff; background-color: #464646; }
::-moz-selection { color: #fff; background-color: #464646; }

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

body { display: flex; flex-direction: column; justify-content: center; color: #464646; line-height: 1.5; font-family: 'Ubuntu Condensed', sans-serif; text-align: center; }

a { color: #21759b; text-decoration: none; }

.box { padding: 10px 0; }

h1 { margin: 0; padding: 0; font-size: 48px; }
h2 { margin: 10px 0 0 0; padding: 0; font-size: 20px; }
h3 { margin: 10px 0; padding: 0; font-size: 16px; color: #998e8b; }

img { display: block; margin: 20px auto; width: 100px; height: 100px; border-radius: 100px; border: 10px solid #ddd5d3; }

.contact { margin: 10px 0 20px 0; font-size: 16px; }

.keywords { margin: 10px 0; padding: 0 5px; color: #cdc0bc; font-size: 14px; transition: color 5s; }
.keywords:hover, .details:hover { color: #afa09b; transition: color 5s; }

.details { margin: 0 0 10px 0; padding: 0 5px; color: #cdc0bc; font-size: 14px; transition: color 5s; }
.details:hover a { color: #21759b; transition: color 5s; }
.details a { color: #cdc0bc; transition: color 5s; }

.versions { margin: 20px 0 0 0; padding: 0; list-style: none; }
.versions li { display: inline-block; width: 30px; height: 30px; margin: 3px; padding: 0; border-radius: 30px; line-height: 30px; font-size: 12px; color: #fff; background-color: #21759b; }

@keyframes highlight {
	0%   { color: #cdc0bc; }
	50%  { color: #d54e21; }
	100% { color: #cdc0bc; }
	}
	.highlight { animation: highlight 0.5s; }