@font-face {
    font-family: 'Open Sans';
    src: url('../../img/OpenSans.ttf');
}

body {
	margin:0px;
	width:100%;
	height:100%;
	background-color:#fff;
	background-repeat:no-repeat;
	background-size:cover;
	font-family:'Open Sans', sans-serif;
	font-size:13px;
	color:#000;
}

#canvas-container {
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	background-color:#fff;
	overflow:hidden;
	color:#000;
}

#haiku {
	display:none;
	position:absolute;
	top:40%;
	left:50%;
	z-index:8;
	max-width:100%;
	text-align:left;
	font-size:50px;
	line-height:100px;
	transform:translate(-50%, -50%);
	transition:opacity 0.8s;
}

span.line {
	opacity:0;
	animation-name:fade;
	animation-duration:1s;
	animation-fill-mode:forwards;
	-webkit-animation-name:fade;
	-webkit-animation-duration:1s;
	-webkit-animation-fill-mode:forwards;
}

#line-2 {
	animation-delay:0.8s;
	-webkit-animation-delay:0.8s;
}

#line-3 {
	animation-delay:2s;
	-webkit-animation-delay:2s;
}

#text-container {
	position:absolute;
	top:50%;
	left:50%;
	z-index:9;
	max-width:70%;
	text-align:center;
	transform:translate(-50%, -50%);
	cursor:pointer;
	transition:opacity 0.8s;
}

#text-container img {
	max-width:100%;
	max-height:100px;
}

div.button {
	position:absolute;
	bottom:20px;
	left:50%;
	width:150px;
	height:150px;
	background-repeat:no-repeat;
	background-size:contain;
	cursor:pointer;
	transition:opacity 1s, transform 0.3s;
}

#btn-another {
	margin-left:-300px;
	background-image:url('img/another.png');
}

#btn-another:hover {
	transform:rotate(-7deg);
}

#btn-rand {
	margin-left:100px;
	background-image:url('img/rand.png');
}

#btn-rand:hover {
	transform:rotate(7deg);
}

@keyframes fade {
	0% { opacity: 0; }
	100% { opacity:1; }
}

@-webkit-keyframes fade {
	0% { opacity: 0; }
	100% { opacity:1; }
}