html
{
  height:100%;
  width:100%;
  overflow:hidden;
}

body
{
  padding:0px;
  margin:0px;
  height:100vh;
  width:100vw;
  background-image: url("../img/splash/stars.svg");
}

.splash-container
{
  height: 100vh;
  width:100vw;
  padding:0px;
  margin:0px;
  background-image: linear-gradient(rgba(32,77,117,0.6), rgba(255,63,159,0.6),rgba(247,144,32,0.6) );
}

.header-container
{
  text-align:center;
  align:center;
  position:absolute;
  top:40vh;
  width:100%;
  margin:10px;
  height:30vh;
  Z-index:12;
}

.header-logo-text
{
  font-family:"Verdana", sans-serif;
  font-weight:bolder;
  font-size:4em;
  text-align:center;
  letter-spacing:0.5em;
  text-transform: uppercase;
  color:#f5f5f5;
  text-shadow:0px 4px 8px #000000;
}

img.logo
{
  align:center;
  position:absolute;
  text-align:justify;
  top:0px;
  left:25vw;
  width:50vw;
  opacity:0.2;
  z-index:11;
}

canvas
{
  position:absolute;
  z-index:11;
}


.ground-container
{
  overflow:hidden;
  position:absolute;
  bottom:0;
  width:100vw;
  height:100%;
}

@keyframes slide
{
  0%{transform:translate3d(0,0,0);}
  100%{transform: translate3d(-3000px, 0,0);}
}

@keyframes launch
{
  0%{transform:translate3D(0,400vh,0);}
  100%{transform:translate3d(0,-500px,0);}
}


.ground
{
  background: url("../img/splash/ground.svg") repeat-x;
  background-position:bottom;
  width:9000px;
  height:100%;
  position:fixed;
  bottom:0px;
  animation: slide 64s linear infinite;
  z-index:9;
}

.groundback
{
  background: url("../img/splash/GroundBack.svg") repeat-x;
  background-position:bottom;
  width:9000px;
  height:100%;
  position:fixed;
  bottom:0px;
  animation: slide 80s linear infinite;
  z-index:8;
}

.back1
{
  background: url("../img/splash/back1.svg") repeat-x;
  background-position:bottom;
  width:9000px;
  height:100%;
  position:fixed;
  bottom:0px;
  animation: slide 160s linear infinite;
  z-index:7;
}

.back2
{
  background: url("../img/splash/back2.svg") repeat-x;
  background-position:bottom;
  width:9000px;
  height:100%;
  position:fixed;
  bottom:0px;
  animation: slide 320s linear infinite;
  z-index:6;
}

.rocket
{
  background: url("../img/splash/rocket.svg");
  background-position:center;
  background-size: 100% 100%;
  width:32px;
  height:1050px;
  position:fixed;
  bottom:200vh;
  left:50vw;
  z-index:5;
  animation: launch 60s linear infinite;
}
