@import 'https://fonts.googleapis.com/css?family=Lato';
	*, *::after, *::before {
		box-sizing: border-box;
	}
	body {
		font-family: 'Lato', sans-serif;
		font-size: 20px;
	}
	.main-container {
		padding: 50px 50px 0;
	}
	.main-container h1 {
		text-align: center;
		color: #ff00b4;
	}
	.canvas-container {
		position: relative;
		margin: 0 auto;
		width: 600px;
		height: 450px;
	}
	.flowers {
		text-align: center;
	}
	.flowers img {
		padding: 0 20px 10px;
	}
	.char-selection {
		text-align: center;
		margin-top: 15px;
	}
	.char {
		cursor: pointer;
		width: 120px;
		padding: 10px;
		text-align: center;
		display: inline-block;
		margin: 5px 20px;
		border-radius: 10px;
	}
	.char img {
		vertical-align: middle;
	}
	.selected-char {
		background: #70ff70;
	}
	.controls-infos {
		text-align: center;
		font-size: 0.7em;
	}
	.controls-message {
		padding: 10px;
	}
	.control {
		display: inline-block;
		width: 200px;
	}
	.control i {
		font-size: 1.8em;
		vertical-align: middle;
	}
	.level-label {
		text-align: center;
		color: #ff00b4;
	}
	.overlay {
		width: 100%;
		height: 100%;
		position: absolute;
		background: rgba(0,0,0,0.4);
		z-index: 99;
		display: none;
		cursor: pointer;
	}
	.overlay-message {
		padding: 40px 20px;
		text-align: center;
		position: absolute;
		margin: 75px 100px;
		opacity: 1;
		background: #FFF;
		width: 400px;
		height: 300px;
	}
	.overlay-message img {
		padding: 20px;
	}