.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

#topbar {
  display: flex;
  position: absolute;
  z-index: 10000;
  width: 100%;
  justify-content: space-between;
  font-size: 11px;
  /* background-color: #030f1b24;
  border-bottom: 1px solid rgba(255, 255, 255, .05); */
}

#topbar div {
  display: flex;
  align-items: center;
}

#topbar a {
  display: inline-block;
  padding: 10px 20px;
  color: white;
  opacity: .5;
  cursor: pointer;
  transition: all .2s ease-out;
}

#topbar a:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, .1);
  transition: all .2s ease-out;
}

#topbar i {
  margin-right: 5px;
}

.header-main {
    /* background: linear-gradient(to right, rgba(133,147,152,0.8) 0%,rgba(40,48,72,0.8) 100%); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 17px;
    width: 100%;
    position: absolute;
    z-index: 1000;
    height: 230px;
    box-shadow: inset 0px 0px 30px 20px #000000bf;
    /* border-radius: 150px 150px 0px 0px; */
    color:white;
}

.header-main h1 {
  font-size: 11px;
  letter-spacing: -0.5px;
  font-family: 'Press Start 2P', monospace;
  position: relative;
  top: -28px;
  left: -26px;
  opacity: .8;
  text-shadow: 1px 1px black;
}

.header-main img {
  width: 501px;
}

/* Small mode */
#scroller, #scroller.small { transition: height .2s ease; }
#scroller.small  {
  height: 100px;
}

#scroller .header-main, #scroller.small .header-main { transition: height .2s ease; }
#scroller.small .header-main {
  padding-top: 24px;
  height: 100px;
}

#scroller .header-main img, #scroller.small .header-main img { transition: width .2s ease; }
#scroller.small .header-main img {
  width: 210px;
}

#scroller.small .header-main h1 {
  display: none;
}

/* MAIN HEADER ANIMATION */
@-webkit-keyframes STAR-MOVE {
	from {
		background-position: 0 50%
	}
	to { 
		background-position: -3564px 50%
	}
}

#scroller	{ 
	width: 100%; 
  height: 230px; 
  overflow: hidden;
  position: relative;
  background: #000101;
}

#bannerLogs {
  bottom: 0;
  position: absolute;
  right: 0;
  padding: 10px;
  text-align: right;
  z-index: 300;
  color: white;
  opacity: .2;
  font-family: 'Press Start 2P', monospace;
  font-size: 4px;
}

.shipselector {
  display: flex;
  margin: 0px 15px;
}

.levelselector {
  display: flex;
  align-items: center;
}

.levelselector span {
  padding: 10px;
  cursor: pointer;
  text-shadow: 0px 0px 2px #00000096;
}

.levelselector span.space {
  color: #FF781B;
}

.levelselector span.cave {
  color: #d20c8a;
}

.levelselector span.forest {
  color: #399041;
}

.levelselector span.sky {
  color: #98c9ed;
}

#bannerLogs div:nth-child(14) { opacity: 1 }
#bannerLogs div:nth-child(13) { opacity: .9 }
#bannerLogs div:nth-child(12) { opacity: .83 }
#bannerLogs div:nth-child(11) { opacity: .75 }
#bannerLogs div:nth-child(10) { opacity: .63 }
#bannerLogs div:nth-child(9) { opacity: .61 }
#bannerLogs div:nth-child(8) { opacity: .58 }
#bannerLogs div:nth-child(7) { opacity: .5 }
#bannerLogs div:nth-child(6) { opacity: .42 }
#bannerLogs div:nth-child(5) { opacity: .33 }
#bannerLogs div:nth-child(4) { opacity: .25 }
#bannerLogs div:nth-child(3) { opacity: .2 }
#bannerLogs div:nth-child(2) { opacity: .1 }
#bannerLogs div:nth-child(1) { opacity: .05 }

/* Parallax banners */

.parallax {
  display: none;
  position: absolute;
  height: 100%;
  width: 100%;
  pointer-events: none;
}

/* Cave level */
#cave-1 {
  background: black url(images/scroller/cave-1.png);
  background-position: left 50%;
  background-repeat: repeat-x;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 1;
  pointer-events: none;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 160s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#cave-2 {
  background: url(images/scroller/cave-2.png);
  background-position: left 50%;
  background-repeat: repeat-x;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 2;
  pointer-events: none;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 130s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#cave-3 {
  background: url(images/scroller/cave-3.png);
  background-position: left 50%;
  background-repeat: repeat-x;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 3;
  pointer-events: none;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 90s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#cave-4 {
  background: url(images/scroller/cave-4.png);
  background-position: left 50%;
  background-repeat: repeat-x;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 401;
  pointer-events: none;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 60s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

/* Forest level */
#forest-1 {
  background: black url(images/scroller/forest-1.png);
  background-position: left 50%;
  background-repeat: repeat-x;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 1;
  pointer-events: none;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 160s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#forest-2 {
  background: url(images/scroller/forest-2.png);
  background-position: left 50%;
  background-repeat: repeat-x;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 2;
  pointer-events: none;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 130s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#forest-3 {
  background: url(images/scroller/forest-3.png);
  background-position: left 50%;
  background-repeat: repeat-x;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 3;
  pointer-events: none;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 90s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#forest-4 {
  background: url(images/scroller/forest-4.png);
  background-position: left 50%;
  background-repeat: repeat-x;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 401;
  pointer-events: none;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 60s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#forest-5 {
  background: url(images/scroller/forest-5.png);
  background-position: left 50%;
  background-repeat: repeat-x;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 401;
  pointer-events: none;
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 40s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

/* Sky level */
#sky-1 {
  background: black url(images/scroller/sky-1.jpg);
  background-position: left 50%;
  background-repeat: repeat-x;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 1;
  pointer-events: none;
  transform: rotateZ(360deg);
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 200s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#sky-2 {
  background: url(images/scroller/sky-2.png);
  background-position: left 50%;
  background-repeat: repeat-x;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 2;
  pointer-events: none;
  transform: rotateZ(360deg);
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 180s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#sky-3 {
  background: url(images/scroller/sky-3.png);
  background-position: left 50%;
  background-repeat: repeat-x;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 3;
  pointer-events: none;
  transform: rotateZ(360deg);
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 130s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#sky-4 {
  background: url(images/scroller/sky-4.png);
  background-position: left 50%;
  background-repeat: repeat-x;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 401;
  pointer-events: none;
  transform: rotateZ(360deg);
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 60s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#sky-5 {
  background: url(images/scroller/sky-5.png);
  background-position: left 50%;
  background-repeat: repeat-x;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 401;
  pointer-events: none;
  transform: rotateZ(360deg);
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 50s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#sky-6 {
  background: url(images/scroller/sky-6.png);
  background-position: left 50%;
  background-repeat: repeat-x;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 401;
  pointer-events: none;
  transform: rotateZ(360deg);
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 40s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

/* Space level */

#background-1 {
  background: black url(images/scroller/space-0.jpg);
  background-position: left center;
  background-repeat: repeat-x;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 10;
  pointer-events: none;
  transform: rotateZ(360deg);
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 140s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#background-2 {
	background: url(images/scroller/space-1.png) repeat 0 0;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 20;
  pointer-events: none;
  transform: rotateZ(360deg);
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 120s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#starfield-0 {
	background: url(images/scroller/starfield-0.gif) repeat 0 0;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
  z-index: 11;
  opacity: .7;
  pointer-events: none;
  transform: rotateZ(360deg);
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 100s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#starfield-1 {
	background: url(images/scroller/starfield-1.gif) repeat 0 0;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
  z-index: 11;
  opacity: .8;
  pointer-events: none;
  transform: rotateZ(360deg);
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 80s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#starfield-2 {
	background: url(images/scroller/starfield-2.gif) repeat 0 0;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
  z-index: 11;
  opacity: .9;
  pointer-events: none;	
  transform: rotateZ(360deg);

	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 50s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

#clouds-0 {
	background: url(images/scroller/clouds-0.jpg) repeat 0 0;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
  z-index: 21;
  mix-blend-mode: lighten;
  opacity: .2;
  pointer-events: none;
  transform: rotateZ(360deg);
	
	-webkit-animation-name: STAR-MOVE;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

.ship {
  /* display: none; */
  width: 60px;
  height: 36px;
  position: absolute;
  top: 120px; left: -380px;
  z-index: 400;
  transform: rotateZ(360deg);
  will-change: transform;
  -webkit-animation: shipForward .5s steps(3) infinite;
      -moz-animation: shipForward .5s steps(3) infinite;
      -ms-animation: shipForward .5s steps(3) infinite;
        -o-animation: shipForward .5s steps(3) infinite;
          animation: shipForward .5s steps(3) infinite;
}

.ship.viper {
  background-image: url(images/scroller/viper.png);
}

.ship.silverhawk {
    background-image: url(images/scroller/silverhawk.gif);
}

.ship.r9 {
    background-image: url(images/scroller/r9.png);
}

.ship.styx {
    background-image: url(images/scroller/styx.png);
}

.ship.pentarou {
    background-image: url(images/scroller/pentarou.png);
      -webkit-animation: shipForward .5s steps(2) infinite;
      -moz-animation: shipForward .5s steps(2) infinite;
      -ms-animation: shipForward .5s steps(2) infinite;
        -o-animation: shipForward .5s steps(2) infinite;
          animation: shipForward .5s steps(2) infinite;
}

/* Ship buttons */
.smallShip {
  display: inline-block;
  width: 40px;
  height: 20px;
  background-image: url(images/scroller/viper.png);
  /* opacity: .3; */
  cursor: pointer;
}

.smallShip:hover, .smallShip.active {
  opacity: 1;
}

.smallShip.viper {
  background-position: 42px -15px;
}
.smallShip.silverhawk {
  background-position: 42px -35px;
}
.smallShip.r9 {
  background-position: 42px -54px;
}
.smallShip.styx {
  background-position: 42px -71px;
}
.smallShip.pentarou {
  background-position: 42px -90px;
}

.goingUp {
	-webkit-animation: shipUp .5s steps(3) infinite;
       -moz-animation: shipUp .5s steps(3) infinite;
        -ms-animation: shipUp .5s steps(3) infinite;
         -o-animation: shipUp .5s steps(3) infinite;
            animation: shipUp .5s steps(3) infinite;
}

.goingDown {
	-webkit-animation: shipDown .5s steps(3) infinite;
       -moz-animation: shipDown .5s steps(3) infinite;
        -ms-animation: shipDown .5s steps(3) infinite;
         -o-animation: shipDown .5s steps(3) infinite;
            animation: shipDown .5s steps(3) infinite;
}

.goingRight {
	-webkit-animation: shipRight .5s steps(3) infinite;
       -moz-animation: shipRight .5s steps(3) infinite;
        -ms-animation: shipRight .5s steps(3) infinite;
         -o-animation: shipRight .5s steps(3) infinite;
            animation: shipRight .5s steps(3) infinite;
}

.goingLeft {
	-webkit-animation: shipLeft .5s steps(3) infinite;
       -moz-animation: shipLeft .5s steps(3) infinite;
        -ms-animation: shipLeft .5s steps(3) infinite;
         -o-animation: shipLeft .5s steps(3) infinite;
            animation: shipLeft .5s steps(3) infinite;
}

.ship.pentarou.goingUp {
	-webkit-animation: shipUp .5s steps(2) infinite;
       -moz-animation: shipUp .5s steps(2) infinite;
        -ms-animation: shipUp .5s steps(2) infinite;
         -o-animation: shipUp .5s steps(2) infinite;
            animation: shipUp .5s steps(2) infinite;
}

.ship.pentarou.goingDown {
	-webkit-animation: shipDown .5s steps(2) infinite;
       -moz-animation: shipDown .5s steps(2) infinite;
        -ms-animation: shipDown .5s steps(2) infinite;
         -o-animation: shipDown .5s steps(2) infinite;
            animation: shipDown .5s steps(2) infinite;
}

.ship.pentarou.goingRight {
	-webkit-animation: shipRight .5s steps(2) infinite;
       -moz-animation: shipRight .5s steps(2) infinite;
        -ms-animation: shipRight .5s steps(2) infinite;
         -o-animation: shipRight .5s steps(2) infinite;
            animation: shipRight .5s steps(2) infinite;
}

.ship.pentarou.goingLeft {
	-webkit-animation: shipLeft .5s steps(2) infinite;
       -moz-animation: shipLeft .5s steps(2) infinite;
        -ms-animation: shipLeft .5s steps(2) infinite;
         -o-animation: shipLeft .5s steps(2) infinite;
            animation: shipLeft .5s steps(2) infinite;
}

@-webkit-keyframes shipForward {
   from { background-position:    0px 72px; }
     to { background-position: -180px 72px; }
}

@-moz-keyframes shipForward {
   from { background-position:    0px 72px; }
     to { background-position: -180px 72px; }
}

@-ms-keyframes shipForward {
   from { background-position:    0px 72px; }
     to { background-position: -180px 72px; }
}

@-o-keyframes shipForward {
   from { background-position:    0px 72px; }
     to { background-position: -180px 72px; }
}

@keyframes shipForward {
   from { background-position:    0px 72px; }
     to { background-position: -180px 72px; }
}

@-webkit-keyframes shipUp {
   from { background-position:    0px 108px; }
     to { background-position: -180px 108px; }
}

@-moz-keyframes shipUp {
   from { background-position:    0px 108px; }
     to { background-position: -180px 108px; }
}

@-ms-keyframes shipUp {
   from { background-position:    0px 108px; }
     to { background-position: -180px 108px; }
}

@-o-keyframes shipUp {
   from { background-position:    0px 108px; }
     to { background-position: -180px 108px; }
}

@keyframes shipUp {
   from { background-position:    0px 108px; }
     to { background-position: -180px 108px; }
}

@-webkit-keyframes shipDown {
   from { background-position:    0px 36px; }
     to { background-position: -180px 36px; }
}

@-moz-keyframes shipDown {
   from { background-position:    0px 36px; }
     to { background-position: -180px 36px; }
}

@-ms-keyframes shipDown {
   from { background-position:    0px 36px; }
     to { background-position: -180px 36px; }
}

@-o-keyframes shipDown {
   from { background-position:    0px 36px; }
     to { background-position: -180px 36px; }
}

@keyframes shipDown {
   from { background-position:    0px 36px; }
     to { background-position: -180px 36px; }
}

@-webkit-keyframes shipRight {
   from { background-position:    0px 180px; }
     to { background-position: -180px 180px; }
}

@-moz-keyframes shipRight {
   from { background-position:    0px 180px; }
     to { background-position: -180px 180px; }
}

@-ms-keyframes shipRight {
   from { background-position:    0px 180px; }
     to { background-position: -180px 180px; }
}

@-o-keyframes shipRight {
   from { background-position:    0px 180px; }
     to { background-position: -180px 180px; }
}

@keyframes shipRight {
   from { background-position:    0px 180px; }
     to { background-position: -180px 180px; }
}

@-webkit-keyframes shipLeft {
   from { background-position:    0px 144px; }
     to { background-position: -180px 144px; }
}

@-moz-keyframes shipLeft {
   from { background-position:    0px 144px; }
     to { background-position: -180px 144px; }
}

@-ms-keyframes shipLeft {
   from { background-position:    0px 144px; }
     to { background-position: -180px 144px; }
}

@-o-keyframes shipLeft {
   from { background-position:    0px 144px; }
     to { background-position: -180px 144px; }
}

@keyframes shipLeft {
   from { background-position:    0px 144px; }
     to { background-position: -180px 144px; }
}

/* Zoom in animation */

.woosh {
  -webkit-animation: woosh 1s 1 ease;
  -moz-animation: woosh 1s 1 ease;
   -ms-animation: woosh 1s 1 ease;
       animation: woosh 1s 1 ease;
}

@-webkit-keyframes woosh {
	0% { -webkit-transform: translate3d(-200px, 0, 0) scale(3); }
	100% { -webkit-transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes woosh {
	0% {  transform: translate3d(-200px, 0, 0) scale(3); }
	100% {  transform: translate3d(0, 0, 0) scale(1); }
}

/* Ship is firing */
.bullet {
  position: absolute;
  display: block;
  width: 15px;
  height: 8px;
  background-image: url(images/scroller/bullets.gif);
  background-position: 0px 0px;
  background-repeat: no-repeat;
  z-index: 399;
  transform: rotateZ(360deg);
  will-change: transform;
}

.bullet.vulcan { background-position: 0px 0px; }
.bullet.missile { background-position: -15px 0px; }
.bullet.dot { background-position: -30px 0px; }
.bullet.flame { background-position: -45px 0px; }
.bullet.bigdot { background-position: -60px 0px }
.bullet.bigmissile { background-position: -75px 0px; }
.bullet.laser { background-position: -90px 0px; }

.bullet.fire {
  -webkit-transform: translateX(2000px);
			transform: translateX(2000px);
	transition: transform 3500ms linear;
	will-change: transform;
}