html {
  background-color: #8dd7ff;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #9bdcff),
    color-stop(1, #7cd1ff)
  );
  background-imaged: -o-linear-gradient(top, #9bdcff 0%, #7cd1ff 100%);
  background-image: -moz-linear-gradient(top, #9bdcff 0%, #7cd1ff 100%);
  background-imaged: -webkit-linear-gradient(top, #9bdcff 0%, #7cd1ff 100%);
  background-imaged: -ms-linear-gradient(top, #9bdcff 0%, #7cd1ff 100%);
  background-image: linear-gradient(to bottom left, #9bdcff, #7cd1ff);
}

html,
body,
#page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

#page {
  padding: 0;
}

#app .rays {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent url('/assets/app/bg-ray.png');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

#app .title {
  position: absolute;
  top: 8%;
  left: 0;
  right: 0;
  bottom: 70%;
  text-align: center;
}

#app .title img {
  max-width: 80%;
  max-height: 100%;
  width: auto;
  height: auto;
}

@keyframes titleHover {
  0% {
    margin-top: 0px;
  }
  100% {
    margin-top: 25px;
  }
}

@-webkit-keyframes titleHover {
  0% {
    margin-top: 0px;
  }
  100% {
    margin-top: 25px;
  }
}

#app .title img {
  animation: titleHover 2s ease-in-out alternate infinite;
  -webkit-animation: titleHover 2s ease-in-out alternate infinite;
}

#app .backClouds {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 60%;
  background: url('/assets/app/clouds-biggy.png');
  background-position: center top;
  background-size: cover;
}

#app.retina .backClouds {
  background-image: url('/assets/app/clouds-biggy@2x.png');
}

#app .frontClouds {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 107px;
  max-height: 20%;
  background: url('/assets/app/clouds-fronty.png');
  background-position: center top;
  background-size: cover;
}

#app.retina .frontClouds {
  background-image: url('/assets/app/clouds-fronty@2x.png');
}

#app .phone {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 40%;
  text-align: center;
}

#app .phone a {
  display: block;
  height: 100%;
}

#app .phone a img {
  width: auto;
  max-height: 100%;
}

@keyframes rotateRays {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes rotateRays {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

#app .rays {
  animation: rotateRays 60s linear infinite;
  -webkit-animation: rotateRays 60s linear infinite;
}

/** Sparkles **/

#app .sparkle {
  position: absolute;
  width: 35px;
  height: 35px;
  transform-origin: center center;
  -webkit-transform-origin: center center;
}

/** Clouds **/

#app .cloud {
  position: absolute;
  transition-timing-function: linear;
  -webkit-transition-timing-function: linear;
}