body {
  width:100vw;
  height:100vh;
  overflow:hidden;
  padding:0;
  margin:0;
  perspective:33vw;
  background:#111;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #eee, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 40px 70px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 50px 160px, #ddd, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 90px 40px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 130px 80px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 160px 120px, #ddd, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 200px 200px;
}
#score {
  font-family:monospace;
  color:white;
  padding:10px;
  text-align:center;
  font-size:18px;
}
#lane {
  width:70vw;
  max-width:900px;
  height:150vh;
  transform:translateX(-50%) rotateX(45deg);
  transform-origin:bottom center;
  position:absolute;
  left:50%;
  bottom:0;
  transition:2s;
/*   background:#222;   */
}

#ship {
  width:20%;
  height:5vh;
  position:absolute;
  bottom:5%;
  left:40%;
  text-align:center;
}
.ship{
  width:100%;
  height:200%;
  background:linear-gradient(to bottom, white 15%, dodgerblue 15%);
  position:absolute;
  left:0;
  bottom:0;
  clip-path:polygon(50% 0%, 75% 75%, 97% 95%, 100% 70%, 100% 100%, 0% 100%, 0% 70%, 3% 95%, 25% 75%);
}
.ship:before {
  content:'';
  width:33%;
  height:50%;
  background:#fff;
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  border-radius:5px;
  clip-path:polygon(50% 0%, 100% 100%, 0% 100%);
  opacity:.75;
  
}
.barrel {
  animation:roll .25s linear forwards;
}
@keyframes roll {
  100% { transform:rotateZ(360deg); }
}
.rocket {
  width:50px;
  height:50px;
  background:lightblue;
  box-shadow:inset 0 -3px 0px 3px dodgerblue;
  border-radius:50%;
  position:absolute;
  bottom:-45%;
  left:50%;
  transform:translatex(-50%) rotateX(-45deg);
}
.rocket:after{
  width:200%;
  height:250px;
  content:'';
  position:absolute;
  left:-50%;
  background:linear-gradient(to bottom,skyblue 50%, transparent 50%);
  background-size:100% 5%;
  opacity:.25;
  border-radius:25px 25px 0 0;
  clip-path:polygon(0% 100%, 25% 0%, 75% 0%, 100% 100%);
  animation:rocket 2s linear infinite;
}
@keyframes rocket {
  100% { background-position:0 100% }
}

#ball {
  width:75px;
  height:75px;
  position:absolute;
  animation:roll 2s linear forwards;
  transform:rotateX(-45deg);
/*   clip-path:polygon(50% 0%, 100% 100%, 0% 100%); */
  transform-origin:center center;
}

@keyframes roll {
  0% { top:-50px; }
  100% { top:101%; transform:rotateX(-45deg) rotateZ(720deg)}
}

#menu {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);  
  text-align:center;
  color:white;
  font-family:monospace;
  font-size:36px;
  transition:2s;
  user-select:none;
}

#menu span {
  font-size:150px;
  line-height:110px;
  font-weight:900;
  text-shadow:3px 3px black, 3px -3px black, 6px 6px red,9px 9px yellow, 12px 12px lime,15px 15px cyan, 18px 18px magenta;
}

#menu .stuff {
  font-size:18px;
}

#menu .swapColor {
  font-size:12px;
}

#menu input {
  padding:10px 15px;
  border-radius:10px 0px 10px 0px;
  outline:0;
  font-family:monospace;
}

.dead .ship {
  transform-origin:center center;
  background:red;
  animation:dead 2s linear forwards;
}

@keyframes dead {
  100% { transform:scale(0) rotateZ(2160deg); opacity:0; }
}

.dead .rocket {
  opacity:0;
}

/* GATES CSS */
#barBar {
  width:100%;
  height:20px;
  position:absolute;
  top:0;
  left:0;
  animation:bar 2s linear forwards;
  background:red;
  z-index:-1;
  
}
@keyframes bar {
  100% { top:101%; }
}

.bar {
  width:33%;
  height:150%;
  background:#111;
  position:absolute;
  top:-25%;
}

/* CANYON CSS */

#canyonBox {
  width:100%;
  height:125%;
  position:absolute;
  left:0;
  bottom:0;
  transition:2s;
  z-index:-1;
  transform-origin: 50% 100%;
}
#can {
  width:100%;
  height:100px;
  position:absolute;
  top:0;
  left:0;
  animation:bar 2s linear forwards;
  background:red;
  z-index:-1;
}

.yon {
  width:50%;
  height:100%;
  background:#111;
  position:absolute;
  top:0;
  left:25%;
}