/* style-004.css */

/*

Colours

Material Design
Cyan 200	#80deea
Cyan 500	#00bcd4
Cyan 800	#00838f
Deep_Purple 500	#673ab7


*/

/* Keyframes */

@keyframes shazam {
	0% {
		transform: translateX(-100%);
	}
	
	75% {
		transform: translateX(10%);
	}
	
	100% {
		transform: translateX(0);
	}
}

/* Elements */

a {
	color: #00838f;
}

h1 {
	text-align: center;
}

h2 {
}

/* Objects */

.site-header {
	background-color: #00bcd4;
}

.site-content {
	background-color: #80deea;
	padding: 1rem;
}

.site-footer {
	background-color: #00838f;
}

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

/* Components */

.list-outer {
	width: 15em;
	margin: 0 auto;
	background-color: #00bcd4;
	padding: 1rem;
	box-shadow: 3px 3px 3px -2px rgba(0,0,0,.25);
}

.play {
	display: block;
	margin: 1em auto;
	background-color: #673ab7;
	color: #fff;
}

.list {
	list-style: none;
	overflow: hidden;
	position: relative;
}

.list-item {
	background-color: #80deea;
	text-align: center;
	padding: 0.5em 0;
	position: relative;
}

/* Animation */

.is-playing {
	animation: shazam 0.75s ease-in-out forwards;
}