@font-face {
  font-family: SWCrawlBody;
  src: url("../assets/SWCrawlBody.ttf"); }
html {
  height: 100%; }

body {
  background: black url("../assets/stars.jpg") no-repeat top center fixed;
  background-size: cover;
  font-family: SWCrawlBody;
  height: 100%;
  overflow: hidden; }

.scene {
  position: relative;
  width: 60%;
  margin: 0 auto;
  height: 100%;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
  -webkit-perspective-origin: 50% 40%;
  -moz-perspective-origin: 50% 40%;
  -o-perspective-origin: 50% 40%;
  perspective-origin: 50% 40%; }

.input {
  display: none;
  text-align: center;
  position: absolute;
  top: 40%;
  width: 100%;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -ms-transition-property: -ms-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  -webkit-transition-duration: 3s;
  -moz-transition-duration: 3s;
  -ms-transition-duration: 3s;
  -o-transition-duration: 3s;
  transition-duration: 3s;
  -webkit-transition-timing-function: linear;
  -moz-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  transition-timing-function: linear; }
  .input.zoomed {
    -webkit-transform: translateZ(1500px);
    -moz-transform: translateZ(1500px);
    -ms-transform: translateZ(1500px);
    -o-transform: translateZ(1500px);
    transform: translateZ(1500px); }
  .input input {
    font-size: 1.5em;
    color: #faa620;
    width: 60%;
    border-radius: 10px;
    padding: 8px;
    border-width: 1px;
    background-color: rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 0 4px 3px #ddd; }
    .input input:focus {
      outline: none; }

.plane {
  display: none;
  position: absolute;
  width: 100%;
  top: -20%;
  height: 140%;
  text-align: center;
  -webkit-transform: rotateX(70deg) translateY(-20%);
  -moz-transform: rotateX(70deg) translateY(-20%);
  -ms-transform: rotateX(70deg) translateY(-20%);
  -o-transform: rotateX(70deg) translateY(-20%);
  transform: rotateX(70deg) translateY(-20%); }

.content {
  position: absolute;
  width: 100%;
  font-size: 36px;
  margin: 0 auto;
  top: 95%;
  color: #fcdf2b;
  opacity: 0;
  -webkit-animation: crawling 25s linear;
  -moz-animation: crawling 25s linear;
  animation: crawling 25s linear; }

.paused {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused; }

@-webkit-keyframes crawling {
  from {
    top: 98%; }
  1% {
    opacity: 1; }
  to {
    top: 0%; } }
@-moz-keyframes crawling {
  from {
    top: 98%; }
  1% {
    opacity: 1; }
  to {
    top: 0%; } }
@-ms-keyframes crawling {
  from {
    top: 98%; }
  1% {
    opacity: 1; }
  to {
    top: 0%; } }
@-o-keyframes crawling {
  from {
    top: 98%; }
  1% {
    opacity: 1; }
  to {
    top: 0%; } }
@keyframes crawling {
  from {
    top: 98%; }
  1% {
    opacity: 1; }
  to {
    top: 0%; } }

/*# sourceMappingURL=styles.css.map */