/* style-002.css */

/*

Colours

Blue 200	#90caf9
Blue 500	#2196f3
Blue 800	#1565c0
Pink 500	#e91e63

*/

@keyframes slide {
	100% {
		left: calc(100% - 200px);
	}
}



.site-header {
	background-color: #2196f3;
}

.site-footer {
	background-color: #1565c0;
}

.site-content {
	background-color: #90caf9;
	padding-bottom: 1rem;
}

.site-footer * {
	color: #fff;
}

.animation-container {
	position: relative;
	width: calc(100% - 2rem);
	margin-top: 0;
}

.box {
	height: 200px;
	width: 200px;
	background-color: #e91e63;
	position: relative;
	left: 0;
}

.is-playing {
	animation: slide 1s ease-in-out;
	animation-fill-mode: forwards;
}

.play {
	background-color: #e91e63;
}