html, body {font-family:'Raleway',sans-serif;background:#eee;height:100vh;margin:0;display: flex;justify-content: center;align-items: center;}
span{position:absolute;top:0;left:55%;border-radius:100%;background-color:#fff;z-index:10}
h3{text-align:center;text-shadow:0 0 10px #eee;color:#eee;letter-spacing:2px}
h4{color:#111;position:absolute;top:30%;width:100%;;letter-spacing:2px}
h1{color:#111;position:fixed;display:block;width:100%;top:0;text-align:center}
p {font-size: 14px;color: #fff;padding: 0px 1em;letter-spacing: 1px; display: block;}
li{position:absolute;top:50%;list-style:none;color:#111}
li:nth-child(1){left:15%;animation:simple1 1s linear infinite}
li:nth-child(2){right:15%;animation:simple 1s linear infinite}
#c0{position:absolute;top:0;width:100%;height:100%;background:linear-gradient(to bottom,#eba65b 30%,#d99267 100%);z-index:300;box-shadow:0 20px 100px #555}
#c1{background:linear-gradient(to bottom,#59476f 30%,#7b88d1 100%);box-shadow:0 20px 100px #555;left:100%;z-index:0}
#c2{left:-100%;z-index:0;background:linear-gradient(to bottom,#59476f 30%,#7b88d1 100%);box-shadow:0 20px 100px #555}
#i1{background:linear-gradient(to bottom,#59476f 30%,#7b88d1 100%)}
#i2{background:linear-gradient(to bottom,#59476f 30%,#7b88d1 100%)}
#sh1{fill:#f8c56f;opacity:.4}
#sh2{opacity:.5}
#sh3{opacity:.3}
#s1{background:linear-gradient(to top,#5b62a2 0%,#7b88d1 100%)}
#s2{background:linear-gradient(to top,#5b62a2 0%,#7b88d1 120%)}
.wrapper{aspect-ratio: 3 / 5;min-width: 40ch;max-width: 50ch; perspective:150vh}
.container{position:absolute;top:0;width:100%;height:100%;transition:.5s all ease;transform:rotateX(60deg) scale(0.7);perspective:900px;box-shadow:0 20px 50px #555;animation:entry 1s linear 1}
.container:hover{cursor:pointer;transform:rotate(0deg) scale(1) translateY(10px);transition:.5s all ease;z-index:400}
.image{position:absolute;top:0;left:0;width:100%;height:45%;background:linear-gradient(to top,#eba65b 30%,#d99267 100%)}
.st4{fill:#f8c56f;opacity:1}
.st5,.st7{fill:#fff}
.st6{fill:#59476f}
.st10{fill:#c5a7e5;stroke:#222}
.st11{stroke:#212121;opacity:.5}
.st0{fill:#a25a62;stroke:none;stroke-miterlimit:10}
.st1{fill:none;stroke:#a25a62;stroke-width:2;stroke-miterlimit:10}
.st2{fill:#cd775c}
.st3{fill:#fff;opacity:.3}
.story{position:absolute;top:45%;left:0;height:55%;width:100%;background:linear-gradient(to bottom,#eba65b 0%,#d99267 40%);z-index:30}
.info{position:absolute;width:100%}
.page{position:absolute;top:80%;width:100%;height:20%;z-index:30;text-align:center;}
@keyframes simple { 50%{transform:translateX(10px);opacity:.5} 100%{transform:translateX(10px);opacity:0} }
@keyframes simple1 { 50%{transform:translateX(-10px);opacity:.5} 100%{transform:translateX(-10px);opacity:0} }
@keyframes entry { 0%{top:-20%;opacity:.1} 100%{top:0} }