@import url('https://fonts.googleapis.com/css?family=Montserrat');

/* Global variables.  */

:root {
	--bg: url("screen.png"); /* Change to any image.  */
	--time: 2s; /* Change speed.  */
	
	--count: infinite; 
	--direction: alternate-reverse; 
}

/* Container for screens.  */

.springy .screens {
	width: 100%;
	max-width: 500px;
	margin:520px auto 0;
}

/* Settings for all screens.  */

.springy .screen, .springy .screen-one, .springy .screen-two, .springy .screen-three, .springy .screen-four {
	height: 470px;
	width:auto;
	position: relative;	
	margin-top: -430px;
	background:  var(--bg) no-repeat center top;
	background-size: 100%;
	animation-duration:var(--time);
	animation-iteration-count: var(--count);
	animation-direction:var(--direction);
} 

/* Top / visible screen.  */

.springy .screen { z-index: 6} 

/* Spring effect.  */

.springy .screen-one {
	opacity: .8;
	z-index: 5;
	animation-name:spring-one;
	animation-direction: alternate-reverse;
}
	
.springy .screen-two {
	opacity: .6;
	z-index: 4;
	animation-name:spring-two;
	animation-direction: alternate-reverse;
}
.springy .screen-three {
	opacity: .4;
	z-index: 3;
	animation-name:spring-three;
	animation-direction: alternate-reverse;
}
.springy .screen-four {
	opacity: .2;
	z-index: 2;
	animation-name:spring-four;
	animation-direction: alternate-reverse;
}

@keyframes spring-one {
0% {transform:translateY(20px)}
100% {transform:translateY(-40px)}}
@keyframes spring-two { 
0% {transform:translateY(40px)}
100% {transform:translateY(-80px)}}
@keyframes spring-three { 
0% {transform:translateY(40px)}
100% {transform:translateY(-120px)}}
@keyframes spring-four { 
0% {transform:translateY(40px)}
100% {transform:translateY(-160px)}}



/* Template. Not part of the effect. Discard at will.  */

:root  /* Episode 2. */ {	
	 /* Boilerplate (not required): */
	--font: 'Montserrat', sans-serif; /* Not required. More info: https://en.wikipedia.org/wiki/Montserrat_(mountain) */
	--coral: rgba(250, 114, 104, 1);	 /* Pantone COTY 2019. Not required.  */
}

*, *:before,*:after { box-sizing: border-box}

.springy  {
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: var(--font);
	line-height: 1.5em;
	font-size: 1em;
}

.springy section {
	padding: 5vh 10vw;
	width: 100vw;
	height: 80vh;
	max-width: 90%;
	margin: 0 auto 20px;
	position: relative;
	overflow: hidden;
	color: rgba(250, 230, 229,1);
	background: var(--coral);
	background: radial-gradient(ellipse at center, rgba(250,114,104,1) 0%,rgba(250,114,104,1) 30%,rgba(109,0,25,1) 100%);
}

/* Vignette.  */
.springy section:after {
	content: "";
	position: absolute;
	padding: 40vh 45vw;
	top: 0;
	left: 0;
	z-index: 9;
	box-shadow:inset 0 3px 30vw rgba(0,0,0,.3);
}

a {	color:var(--coral)}
h1 { position: relative; z-index: 10;margin-top: 50px;
} /* Z-index to overlay vignette.  */

.springy .credits {
	color: #f3e9e9;
	bottom: 0;
	right: 0;
	padding: 10px 5vw;
	font-size: .7em;
}

/* Larger font for bigger screens.  */
 @media only screen and (min-width: 30em) {
 .springy  {	line-height: 1.5em;font-size: 1.4em}
}