/* style-003.css */

/*

Colours

Light_Blue 200	#81d4fa
Light_Blue 500	#03a9f4
Light_Blue 800	#0277bd
Purple 500	#9c27b0

*/



/* Tools */

@keyframes followThroughTiming {
	100% {
		left: calc(100% - 100px - 4rem);
	}
}

@keyframes followThroughKeyframes {
	85% {
		left: 100%;
	}
	
	100% {
		left: calc(100% - 100px - 4rem);
	}
}



/* Elements */

h1, h2, p, a {
	color: #222;
}

button {
	background-color: #9c27b0;
}



/* Objects */

.site-header {
	background-color: #03a9f4;
}

.site-footer {
	background-color: #0277bd;
}

.site-content {
	background-color: #81d4fa;
}

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



/* Components */

.animations-outer {
	padding: 2rem;
}

.animations-inner-1,
.animations-inner-2 {
	overflow: hidden;
}

.animation-1,
.animation-2 {
	position: relative;
	width: 100%;
}

.box {
	height: 100px;
	width: 100px;
	background-color: #9c27b0;
	position: relative;
	left: 0; /* hint: must have this as a starting value for animation to work??? */
}

@media screen and (min-width: 70rem) {
	.animations-outer {
		display: flex;
		flex-wrap: wrap;
	}
	
	.animations-outer h1 {
		flex-basis: 100%;
	}
	
	.animations-inner-1,
	.animations-inner-2 {
		flex-basis: 50%;
	}
}



/* Animations */

.is-playing-timing {
	animation: followThroughTiming 1s cubic-bezier(.17,.67,.75,1.74);
}

.is-playing-keyframes {
	animation: followThroughKeyframes 1s ease-out;
}

.is-playing-timing,
.is-playing-keyframes {
	animation-fill-mode: forwards;
}