/* Springy Mobile Screens (supplied from the original source; the archive never kept it) */
@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.  */

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

/* Settings for all screens.  */

.screen, .screen-one, .screen-two, .screen-three, .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.  */

.screen { z-index: 6}

/* Spring effect.  */

.screen-one {
    opacity: .8;
    z-index: 5;
    animation-name:spring-one;
    animation-direction: alternate-reverse;
}

.screen-two {
    opacity: .6;
    z-index: 4;
    animation-name:spring-two;
    animation-direction: alternate-reverse;
}
.screen-three {
    opacity: .4;
    z-index: 3;
    animation-name:spring-three;
    animation-direction: alternate-reverse;
}
.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}

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

section {
    padding: 5vh 10vw;
    width: 100vw;
    height: 80vh;
    max-width: 90%;
    margin: 10vh auto;
    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.  */
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.  */

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

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