/* style-000.css */

/*

	Colours

	Material Design
	Green 200	#a5d6a7
	Green 500	#4caf50
	Green 800	#2e7d32
	Light_Blue 500	#03a9f4

*/

/* Keyframes */

@keyframes thanks {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* Generic */

/* Elements */

h1 { text-align: center; }

/* Objects */

.site-header  { background-color: #4caf50; }
.site-content { background-color: #fff; }
.site-footer  { background-color: #2e7d32; }
.site-footer * { color: #fff; }

/* Components */

.thanks {
	background-color: #a5d6a7;
	padding: 1rem;
	box-shadow: 3px 3px 3px -2px rgba(0,0,0,.25);
}

@media screen and (min-width: 25rem) {
	.thanks {
		width: 20rem;
		margin: 0 auto;
	}	
}

.thanks button {
	background-color: #2e7d32;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.play {
	background-color: #03a9f4;
}

/* Trumps */

/* Animation */

/*
	Need to set initial opacity to 0 to prevent elements from
	flashing momentarily on screen before animation kicks in.
*/
.js-thanks h1,
.js-thanks p:first-of-type,
.js-thanks p:nth-of-type(2),
.js-thanks label,
.js-thanks input,
.js-thanks button {
	opacity: 0;
}


/*
	Total duration = animation duration + delay = 1 second
	animation-fill-mode property set to 'forwards' to prevent ugly flash back to
	opacity: 0 at the end.
*/
.js-thanks                    { animation: thanks 1s ease-in-out forwards; }
.js-thanks h2                 { animation: thanks 0.9s ease-in-out 0.1s forwards; }
.js-thanks p:first-of-type    { animation: thanks 0.8s ease-in-out 0.2s forwards; }
.js-thanks p:nth-of-type(2)   { animation: thanks 0.7s ease-in-out 0.3s forwards; }
.js-thanks label[for="email"] { animation: thanks 0.6s ease-in-out 0.4s forwards; }
.js-thanks input              { animation: thanks 0.5s ease-in-out 0.5s forwards; }
.js-thanks button             { animation: thanks 0.4s ease-in-out 0.6s forwards; }