/* style-000.css */

/*

	Colours

	Material Design
	Yellow 200	#fff59d
	Yellow 500	#ffeb3b
	Yellow 800	#f9a825
	Teal 500	#009688

*/

/* Keyframes */

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 0.9;
	}
}

@keyframes advance {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.05);
	}
}

@keyframes retreat {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(0.95);
	}
}

/* Generic */

/* Elements */

h1 + p {
	text-align: center;
}

/* Objects */

.site-header  { background-color: #fff59d; }
.site-content { background-color: #ffeb3b; }
.site-footer  { background-color: #f9a825; }
.site-footer * { color: #222; }

/* Components */

.container-inner {
	
}

.content {
	box-shadow: 3px 3px 3px -2px rgba(0,0,0,.25);	
}

.js-partition {
	margin-top: 0;
}

.js-partition-on {
	display: none;
}

@media screen and (min-width: 70rem) { /* large width */
	.container-inner {
		display: flex;
		margin-left: -1rem;
	}
	
	.content {
		flex-basis: calc(33.33333% - 1rem);
		max-width: calc(33.33333% - 1rem);
		box-sizing: border-box;
		padding: 1rem;
		background-color: #f9a825;
		margin-top: 0;
		margin-left: 1rem;
	}
	
	.js-partition-on {
		display: block;
		background-color: #009688;
		z-index: 10;
		position: fixed;
		top: 0; right: 0; bottom: 0; left: 0;
		animation: fadeIn 0.3s ease-in-out forwards;
	}
	
	.js-is-clicked {
		position: relative;
		z-index: 100;
		animation: advance 0.3s ease-in-out forwards;
	}
	
	.js-is-not-clicked {
		animation: retreat 0.3s ease-in-out forwards;
	}
}

/* Trumps */

/* Animation */