* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%
}

body {
	height: 100%;
	background-color: #222;
}

#container {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

#threeCanvas {
	transition: all 500ms ease 0s;
	box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.5);
	border-radius: 6px;
	border: 1px solid #222;
}

#threeCanvas.isPlaying {
	transition: all 500ms ease 0s;
	border: 4px solid white;
}

#btn-play {
	transition: all 500ms ease 0s;
	position: absolute;
	bottom: 2%;
	left: calc(50% - 30px);
	background-color: white;
	height: 60px;
	width: 60px;
	border-radius: 30px;
	box-shadow: 4px 4px 10px #333;
	cursor: pointer;
}

#btn-play.isPlaying {
	transition: all 500ms ease 0s;
	background-color: #ccc;
	left: 2%;
}

#btn-play:hover {
	box-shadow: 8px 8px 10px #333;
}

#btn-play:active {
	background-color: #ddd;
	box-shadow: 8px 8px 10px #333;
}

.triangle {
	transition: all 500ms ease 0s;
	position: absolute;
	border-top: 16px solid transparent;
	border-bottom: 16px solid transparent;
	border-left: 30px solid #555;
	background-color: transparent;
	top: 14px;
	left: 20px;
}

.rect {
	transition: all 500ms ease 0s;
	position: absolute;
	background-color: transparent;
	top: 15px;
	left: 15px;
	width: 30px;
	height: 30px;
}

.isPlaying .triangle {
	border-left: 43px solid transparent;
}

.isPlaying .rect {
	background-color: #555;
}