body {
	background-color: white;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	
	-webkit-transition: background-color 3s
	transition: background-color 3s
}

body.night {
	background-color: rgb(0, 0, 52);
	transition: background-color 5s
}

body.thumb {
	animation: thumb_body 3s;
}

canvas {
	margin-top: 3%;
	border-radius: 3px;
	border: 0px solid black;
	opacity: 1;

	-webkit-transition: opacity 3s;
	transition: opacity 3s;
}

canvas.isPlaying {
	cursor: none;
}

canvas.thumb {
	animation: thumb_canvas 3s;
}

.hidden {
	opacity: 0;
}

@keyframes thumb_body {
    0%  {background-color: rgb(0, 0, 52)}
    5%  {background-color: white;}
    7%  {background-color: rgb(0, 0, 52)}
    10%  {background-color: white}
    40%  {background-color: rgb(0, 0, 52)}
    100% {background-color: rgb(0, 0, 52)}
}

@keyframes thumb_canvas {
    0%  {transform: rotate(0deg)}
    5%  {transform: rotate(5deg)}
    10%  {transform: rotate(0deg)}
    20%  {transform: rotate(0deg)}
    100% {transforM: rotate(0deg)}
}