iframe {
	display: none;
}

#body {
	margin: 0;
	background-color: white;

	transition-property: background-color;
	transition-duration: 1s;

	overflow: hidden;
}

canvas {
	border-color: black;
	border-width: 1px;
	border-style: solid;

	transition: border-color 1s, filter 3s;

	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
	filter: blur(0);

	animation: none;
}

#red {
	pointer-events: none;
	opacity: 0;
	position: absolute;

	background-color: red;

	animation: none;

	margin: auto;
}

#gameOver {
	visibility: hidden;
	opacity: 0;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;

	font-size: 120px;
	font-family: Ubuntu;
	color: red;

	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;

	user-select: none;

	transition-property: opacity;
	transition-duration: 3s;

	filter: drop-shadow(9px 9px 9px black);
}

canvas[shake] {
	animation: shake 0.2s;
}

canvas[shake] + #red {
	animation: shake_red 0.3s;
}

@keyframes shake {
    0% {
    	transform: scale(1) rotate(0deg);
    }
    25% {
   		transform: scale(1.03) rotate(-1deg);
   	}
   	50% {
   		transform: scale(1) rotate(0deg);
   	}
   	75% {
   		transform: scale(1.03) rotate(1deg);
   	}
  	100% {
  		transform: scale(1) rotate(0deg);
  	}
}

@keyframes shake_red {
	0% {
		opacity: 0.5;
    	transform: scale(1) rotate(0deg);
    }
    25% {
   		transform: scale(1.03) rotate(-1deg);
   	}
   	50% {
   		transform: scale(1) rotate(0deg);
   	}
   	75% {
   		transform: scale(1.03) rotate(1deg);
   	}
  	100% {
		opacity: 0;
  		transform: scale(1) rotate(0deg);
  	}
}

#points {
	color: black;
	font-size: 30px;
	opacity: 0;
	margin-top: 100px;
	transition: margin-top 3s, opacity 3s;
}

#highscore {
	color: black;
	font-size: 20px;
	opacity: 0;
	margin-top: 0;
	transition: opacity 3s;
}

.endButton {
	background-color: #555555;
	color: white;
	border-radius: 4px;
	border-style: solid;
	border-color: black;
	padding: 15px 15px;
	font-size: 26px;
	margin-top: 25px;
}

.endButton:hover, #start:hover{
	border-width: 3px;
}

.endButton:focus, #start:focus, #mute:focus {
	outline: none;
}

#startMenu {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;

	background-color: white;
}

#start {
	background-color: #555555;
	color: white;
	border-radius: 4px;
	border-style: none;
	padding: 15px 15px;
	font-size: 26px;

	margin: auto;
	position: absolute;

	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	width: 4em;
	height: 3em;
}

#mute {
	padding: 15px 15px;
	border-style: none;
	font-size: 30px;
	background-color: transparent;
	color: black;

	transition: color 1s;

	position: relative;
}

#mute[st="true"]::before {
	position: absolute;
	content: "";
	left: 10px;
	top: 50%;
	right: 10px;
	border-top: 3px solid;
	border-color: black;

	-webkit-transform:rotate(-5deg);
	-moz-transform:rotate(-5deg);
	-ms-transform:rotate(-5deg);
	-o-transform:rotate(-5deg);
	transform:rotate(-5deg);

	transition: border-color 1s;
}

#body[invert] {
	background-color: black;
}

#body[invert] #mute, #body[invert] .copyright {
	color: white;
}

#body[invert] #mute::before {
	border-color: white;
}

#body[invert] canvas {
	border-color: white;
}

.copyright {
    font-size: 16px;
    position: absolute;
    bottom: 0;
    left: 0;
    font-family: monospace;
    color: black;
    transition: color 1s;
}