
body {
  margin:0;
  background:#56565A;
  font-family:'Helvetica Neue', Helvetica, sans-serif;
}

body.demo-done #demo {
  margin:5em auto 7em auto;
}
textarea {
  font-family:'Helvetica-Neue',Helvetica,sans-serif;
  padding:0.2em;
}

#demo {
  width:25em;
  margin:12em auto 9em auto;
  -webkit-transition:all 1s;
  transition:all 1s;
}
#demo .expanding-wrapper {
  -webkit-perspective:1200px;
  perspective:1200px;
  -webkit-transition:all 1s;
  transition:all 1s;
}
#demo textarea.expanding, #demo pre.expanding-clone {
  font-size:250%;
  background:rgba(255,255,255,0.95);
  max-height:10.4em;
}
#demo textarea.expanding{
  z-index:1;
}
#demo pre.expanding-clone {
  opacity:0;
}
#demo.persp textarea {
  -webkit-transition:all 1s;
  -webkit-transform:  rotateY(28deg);
  transition:all 1s;
  transform:  rotateY(28deg);
  opacity:0.9;
}
#demo:hover textarea { /* flatten on mouseover to allow mouse text selection */
  -webkit-transition:all 200ms;
  -webkit-transform:  rotateY(0deg);
  transition:all 200ms;
  transform:  rotateY(0deg);
  opacity:1;
}
#demo pre.expanding-clone {
  -webkit-transform:  rotateY(0deg) translateZ(-100px);
  transform:  rotateY(0deg) translateZ(-100px);
  -webkit-transition: all 1s;
  transition: all 1s;
  visibility:visible !important;
}
#demo.persp pre.expanding-clone {
  opacity:0.2;
  -webkit-transform:  rotateY(28deg) translateZ(-100px);
  transform:  rotateY(28deg) translateZ(-100px);
  -webkit-transition: all 1s;
  transition: all 1s;
}
#demo:hover pre.expanding-clone {
  opacity:0;
  -webkit-transform:  rotateY(0deg) translateZ(-100px);
  transform:  rotateY(0deg) translateZ(-100px);
  -webkit-transition: all 200ms;
  transition: all 200ms;
}
#downarrow {
  text-align:center;
  color:#bbb;
  font-size:400%;
  position:absolute;
  width:100%;
  cursor:pointer;
  z-index:1;
  -webkit-transition:all 200ms;
  transition:all 200ms;
}
#downarrow:hover, body.demo-done #downarrow {
  color:white;
}
body.demo-done #downarrow {
  opacity:0;
  z-index:0;
}
#narrative {
  width:40%;
  margin: 0 auto 5em auto;
  opacity:0.05;
  position:relative;
  background:white;
  color:#212121;
  padding:30px;
}
body.demo-done #narrative{
  opacity:1;
  top:0;
  -webkit-transition:all 600ms;
  transition:all 600ms;
}

.top {
  text-align:center;
}
h1 {
  font-weight:normal;
}
h2 {
  font-weight:normal;
  font-size:120%;
  margin:2em 0 1em 0;
}
p{
  font-size:95%;
  line-height:1.5em;
}
code {
  font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
  font-size:90%;
  color:rgb(0,0,50);
  background: #eef;
  padding: 0.1em 0.2em;
}
a {
  color: grey;
}
a.button {
  font-size:80%;
  border: 1px solid grey;
  padding:0.3em 0.7em;
  border-radius:1em;
  line-height:1.4em;
  text-decoration:none;
}
a:hover {
  color:blue;
  background:#f7f7f7;
}
.footer {
  text-align:center;
  padding-top:3em;
  font-size:90%;
  opacity:0.7;
}