* {
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
}


body {
	background-color: midnightblue;
	background-image: url(art/Sky.png);
	background-size: cover;
	
	color: lightyellow;
	font-family: Comic Sans MS, sans-serif;
}


a {
	filter: invert(100%);
}

button {
	border: none;
	background: none;
	padding: 0;
	
	color: greenyellow;
	font-size: 1em;
	font-family: inherit;
	
	cursor: pointer;
}

button:hover {
	color: limegreen;
}

button:active {
	text-shadow: .5px .5px lightgreen;
}

button.bad:hover {
	color: lightcoral;
}

button:disabled {
	color: lightgray;
	cursor: not-allowed;
	text-shadow: none;
}



@keyframes bounceX {
	50% { transform: translateX(-3px); }
}
.highlighted {
	animation: 0.8s bounceX forwards infinite;
	transform: translateX(3px);
}
.highlighted::before {
	content: "» ";
	color: lightcoral;
}
.highlighted::after {
	content: " «";
	color: lightcoral;
}



#tooSmall {
	text-align: center;
	font-weight: bold;
	border: 3px solid red;
	padding: 3px;
	margin: 3px;
}

@media (min-aspect-ratio: 1/1)
{
	#tooSmall {
		display: none;
	}
}

#errors:empty, #score:empty {
	display: none;
}

#errors {
	float: left;
}

#errors > * {
	border: 2px solid red;
	padding: 3px;
	margin: 3px;
}

#errors > * button:first-child {
	float: right;
	border: 0;
	background-color: transparent;
	font-weight: bolder;
	font-size: 1.2em;
	cursor: pointer;
	padding: 0 3px;
}


#errors > * button:first-child:hover {
	color: #444;
}


#description, #gameInfo {
	max-width: 27%;
}

#exampleStar, #exampleDoubleStar {
	display: inline-block;
	height: 1em;
	width: 1em;
	
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}



#loading, #difficulty, #levelChoice, #gameInfo {
	float: right;
	clear: right;
}

#speed {
	float: right;
	margin-right: 10px;
}


#difficulty {
	margin-bottom: 10px;
}

select {
	font-family: inherit;
	color: inherit;
	background: transparent;
	border-radius: 5px;
}

option {
	color: black;
}


#levelChoice {
	text-align: center;
	border-collapse: collapse;
}

#levelChoice thead th {
	border-bottom: 1px solid lightyellow;
}

#levelChoice thead th:last-child {
	border-left: 1px dotted lightyellow;
}

#levelChoice th, td:first-child {
	padding-left: 3px;
	padding-right: 3px;
}

#levelChoice tbody tr:last-child > * {
	border-top: 1px solid lightyellow;
}

#levelChoice tbody th {
	text-align: right;
}


#gameInfo {
	text-align: right;
}

#gameInfo h2 {
	margin-top: 10px;
}

#gameInfo p {
	margin: .3em 0;
}

#score::before {
	content: "Score: ";
}


#go {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	
	font-size: 2em;
	text-align: center;
	font-weight: 500;
	
	/*text-shadow: -1px -1px 0 #000,
				 1px -1px 0 #000,
				 -1px 1px 0 #000,
				 1px 1px 0 #000;*/
}

.bad {
	color: red;
}
.good {
	color: lawngreen;
}
@keyframes rainbow { 
    0%{background-position: 0% 82%}
    50%{background-position: 100% 19%}
    100%{background-position: 0% 82%}
}
.perfect {
	animation: rainbow .5s linear infinite;
	background: linear-gradient(to right, orange , yellow, green, cyan, blue, violet);
	background-size: 300% 300%;
	-webkit-background-clip: text;
			background-clip: text;
	color: transparent;
}


.beating {
	/*transform: translateY(5px);*/
	margin-top: 3px;
}


#invisiBuffers {
	opacity: 0;
	z-index: -1;
}

#vanGogh {
	position: fixed;
	top: 28%;
	left: 46%;
	
	width: 8%;
	
	background-image: url(art/GoghIdle.png);
}
/*[catching="1"] {
	transform: scaleX(-1) rotate(-20deg);
}
[catching="2"] {
	transform: rotate(-20deg);
}
[catching="3"] {
	transform: scaleX(-1);
}
[catching="4"] {
	
}
[catching="5"] {
	transform: scaleX(-1) rotate(20deg);
}
[catching="6"] {
	transform: rotate(20deg);
}*/
#vanGogh[catching="1"], #vanGogh[catching="2"], #invisiBuffer1 {
	background-image: url(art/GoghJump.png);
}
#vanGogh[catching="3"], #vanGogh[catching="4"], #invisiBuffer2 {
	background-image: url(art/GoghStand.png);
}
#vanGogh[catching="5"], #vanGogh[catching="6"], #invisiBuffer3 {
	background-image: url(art/GoghCrouch.png);
}
[catching="1"], [catching="3"], [catching="5"] {
	transform: scaleX(-1);
}

@keyframes celebrating {
	0% {
		background-image: url(art/GoghYay_1.png);
	}
	8% {
		transform: translateY(0);
		background-image: url(art/GoghYay_2.png);
	}
	30% {
		background-image: url(art/GoghYay_3.png);
	}
	100% {
		transform: translateY(-50%);
		background-image: url(art/GoghYay_3.png);
	}
}
#vanGogh.celebrating {
	animation: 0.6s celebrating cubic-bezier(.25,.46,.45,.94) infinite alternate;
}

#invisiBuffer4 {
	background-image: url(art/GoghYay_1.png);
}
#invisiBuffer5 {
	background-image: url(art/GoghYay_2.png);
}
#invisiBuffer6 {
	background-image: url(art/GoghYay_3.png);
}



#vanGogh, #stars > * {
	position: fixed;
	height: 15%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	z-index: 10; /* To make sure players don't have any trouble clicking them */
}

#stars > :nth-child(2n) {
	transform: scaleX(-1);
}

#star1 {
	top: 10%;
	left: 35%;
}
#star2 {
	top: 10%;
	right: 35%;
}
#star3 {
	top: 30%;
	left: 30%;
}
#star4 {
	top: 30%;
	right: 30%;
}
#star5 {
	top: 50%;
	left: 35%;
	transform: scaleY(-1);
}
#star6 {
	top: 50%;
	right: 35%;
	transform: scaleX(-1) scaleY(-1) !important;
}

.star, .doubleStar {
	cursor: crosshair;
}

.star, #exampleStar {
	background-image: url(art/star.png);
}
.doubleStar, #exampleDoubleStar {
	background-image: url(art/doubleStars.png);
}


footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	
	font-size: 0.8rem;
	text-align: center;
}

footer p {
	max-width: 50%;
	margin: auto;
	margin-bottom: 5px;
}