/* style-000.css */

/*

	Colours

	Material Design
	Lime 200	#e6ee9c
	Lime 500	#cddc39
	Lime 800	#9e9d24
	Cyan 500	#00bcd4

*/

/* Keyframes */

@keyframes ballMove {
	0%, 65%, 100% {
		transform: translateX(0) scale(1, 1);
	}
	15%, 50% {
		transform: translateX(11rem) scale(1, 1);
		/* 11rem = width of full-sized ball - width of squashed ball - 25% */
	}
	32.7% {
		transform: translateX(calc(12rem - 5px)) scale(0.5, 1.1);
		/* 4px is approx border width
		   12rem = width of full-sized ball - width of squashed ball
		   (this time without -25% */
	}
	82.5% {
		transform: translateX(-1rem) scale(0.5, 1.1);
	}
}

/* Generic */

* {
	color: #fff;
}

/* Elements */

h1 {
	text-align: center;
}

/* Objects */

.site-header  { background-color: #e6ee9c; }
.site-header *,
.site-content * { color: #222; }
.site-content { background-color: #cddc39; }
.site-footer  { background-color: #9e9d24; }

/* Components */

.container {
	width: 15rem;
	height: 8rem;
	margin: 1rem auto 0;
	border-left: 2px solid #222;
	border-right: 2px solid #222;
	position: relative;
	box-sizing: border-box;
}

.ball {
	background-color: #00bcd4;
	border-radius: 50%;
	width: 4rem; height: 4rem;
	position: relative;
	top: 25%;
	box-shadow: 3px 3px 3px -2px rgba(0,0,0,.25);

}

.play {
	background-color: #00bcd4;
	color: #222;
}

/* Trumps */

/* Animation */

.js-animate {
	animation: ballMove 1s ease-in-out infinite;
}