html, body {
	height: 100%;
	width: 100%;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	display: flex;
	background-color: #3a975b;
}

#info {
	font-family: 'Bebas Neue', cursive;
	margin: auto;
	position: relative;
	z-index: 3;
	color: #626262;
	font-size: 2rem;
	pointer-events: none;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
    user-select: none;
	text-align: center;
	opacity: 0;
	transition-delay: 1000ms;
	animation: fadein 4000ms forwards;
	animation-delay: 1000ms;
}

#info img {
	width: 50%;
}

#info h1 {
	margin: 0;
}

#info small {
	color: #3a975b
}

.splash {
	position: absolute;
	z-index: 2;
}

.splash#splash1 {
	top: 10%;
	left: 15%;
	height: 30%;

	opacity: 0;
	animation: fadein 700ms forwards;
	animation-delay: 4000ms;
}

.splash#splash2 {
	bottom: 10%;
	height: 15%;
	right: 15%;
	opacity: 0;
	animation: fadein 700ms forwards;
	animation-delay: 5000ms;
}

canvas {
	z-index: 1;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}





@media only screen and (max-width: 990px) {
	#info h1 {
		font-size: 3rem;
	}

	#info small {
		font-size: 1.5rem
	}
	#info img {
		width: 60%;
	}
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	#info h1 {
		font-size: 1.5rem;
	}

	#info small {
		font-size: 1rem
	}
	#info img {
		width: 80%;
	}

	.splash#splash1 {
		height: 25%;
		animation-delay: 2500ms;
	}
	
	.splash#splash2 {
		bottom: 15%;
		animation-delay: 3000ms;
	}
}