html {
	font-family: sans-serif;
	height: 100%;
}

body {
	border-left-style: solid;
	border-left-color: black;
	border-left-width: .25em;
	margin-bottom: 3em;
	margin-top: 3em;
	margin-left: 50%;
	margin-right: 0;
	padding: 0;
}

body::-webkit-scrollbar {
	display: none;
}

a {
	text-decoration: none;
	font-weight: bold;
	color: purple;
}

.pad {
	height: 6em;
}

.block {
	transform: translate(-50%, 0);
	border-bottom-style: solid;
	border-bottom-width: .25em;
	border-top-style: solid;
	border-top-width: .25em;
	background-color: white;
	text-align: center;
	padding: 1em;
	width: 32em;
	margin: 0;
}

.headblock {
	transform: translate(-50%, 0);
	border-bottom-style: solid;
	border-bottom-width: .25em;
	border-top-style: solid;
	border-top-width: .25em;
	background-color: white;
	text-align: center;
	padding: 1em;
	width: 20em;
	margin: 0;
}

.circle {
	transform: translate(-50%, 0);
	background-color: white;
	display: inline-block;
	border-style: solid;
	border-width: .25em;
	white-space: nowrap;
	text-align: center;
	padding: 1em;
	height: 20em;
	width: 20em;
}	

.centerimage {
	vertical-align: middle;
	display: inline-block;
	height: 100%;
}

.centeredimage {
	vertical-align: middle;
	height: auto;
	width: 100%;
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	animation-play-state: paused;
}

.centeredimage:active {
	vertical-align: middle;
	height: auto;
	width: 100%;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
	animation:spin 30s linear infinite;
}


@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }