@import url('https://fonts.googleapis.com/css?family=Open+Sans');

body {
	align-items: center;
	color: #222;
	display: flex;
	flex-direction: column;
	font-family: 'Open Sans', 'Arial', sans-serif;
	min-height: 100vh;
	justify-content: flex-start;
	margin: 0;
	background: #D3CCE3;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #E9E4F0, #D3CCE3);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #E9E4F0, #D3CCE3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

h1 {
	margin-top: 20px;
	margin-bottom: 10px;
}

small {
	margin-bottom: 20px;
}

button {
	margin-bottom: 10px;
}

canvas.woop {
	animation: woop .4s ease-in;
	transform: scale(1);
}

@keyframes woop {
	0%, 100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.2);
	}
}

#time {
	border: 2px solid black;
	display: none;
	position: fixed;
	top: 10px;
	right: 10px;
	padding: 5px 10px; 
}

footer {
	background-color: #222;
	color: #fff;
	bottom: 0;
	position: fixed;
	left: 0;
	right: 0;
	letter-spacing: 1px;
	text-align: center;
}

footer p {
	margin: 10px 0;
}

footer i {
	color: red;
}

footer a {
	color: #3C97BF;
	text-decoration: none;
}