@import url(http://fonts.googleapis.com/css?family=Press+Start+2P);

html, body {
  height: 100%;
  user-select: none;
  cursor: default;
  transition: background-color .2s linear;
}

html {
  background: white;
  color: black;
  font-family: 'Press Start 2P', sans-serif;
  letter-spacing: -1px;
  height: 100%;
  overflow: hidden;
}

#container {
  margin: 150px auto 0;
  max-width: 900px;
  padding: 30px 0;
  position: relative;
  text-align: center;
  z-index: 250;
}
#container.game-over {
  background: none;
}
#container.game-over #start {
  visibility: hidden;
}

h1 {
  color: rgba(102,250,102,.9);
  font: normal 64px/1 'Press Start 2P', sans-serif;
  margin: 0 auto 1em;
  position: relative;
  text-rendering: optimizeLegibility;
  text-shadow: rgba(150,150,150,.8) -4px 4px 0;
  text-transform:uppercase;
  word-wrap: break-word;
}

  h1 span {
    cursor: crosshair;
    display: inline-block;
    position: relative;
    letter-spacing: 0px;
    top: -10px;
    transition: all 0.2s ease-out;
    user-select: none;
    -moz-user-select: none;
  }

  h1#title .title span:hover {
    color: rgba(32,200,32,.9);
    top: -16px;
  }

  h1#title .title span:nth-child(2n+3) {
    transform: rotate(3deg);
  }

  h1#title .title span:nth-child(2n+3):hover {
    color: rgba(230,32,230,.9);
    transform: rotate(-1deg);
  }

  h1#title .title span:nth-child(3n-1) {
    transform: rotate(2deg);
  }

  h1#title .title span:nth-child(3n-1):hover {
    top: -7px;
    color: rgba(32,200,200,.9);
    transform: rotate(-2deg);
  }

  h1#title .title span:nth-child(2n+4) {
    transform: rotate(-2deg);
  }

  h1#title .title span:nth-child(2n+4):hover {
    color: rgba(200,32,32,.9);
    transform: rotate(-5deg);
  }

  h1#title .title .char1 {
    transform:rotate(-3deg);
  }

  h1#title .title .char3 {
    top: -7px;
    transform: rotate(2deg);
  }

  h1#title .title .char4 {
    top: -12px;
  }
  h1#title .title .char4, h1#title .title .char10 {
    letter-spacing: -15px;
    margin-left: -11px;
  }

  h1#title .title .char5 {}

  h1#title .title .char6 {}

  h1#title .title .char7 {}

  h1#title .title .char8 {
    transform: rotate(-2deg);
  }

  h1#title .title .char9 {
    transform: rotate(2deg);
  }

  h1#title .title span:focus {
    color: red
  }

img.random {
  display: block;
  position: absolute;
  bottom: -300px;
  left: 160px;
  z-index: 230;
  max-height: 600px;
}

/* start */

#start a {
  color: rgba(240,120,20,.9);
  font-size: 20px;
  margin-bottom: 20px;
  position: relative;
  text-shadow: rgba(150,150,150,.4) -3px 3px 0;
  text-decoration: none;
  cursor: help;
}

#start a:hover {
  color: rgba(0,0,0,.6);
}

/* totally ripped off from http://css-tricks.com/parallax-background-css3/ */

#mode {
  position: fixed;
  top: 1em;
  right: 1em;
  z-index: 9000;
}

.intro.LightMode™ .bg {
  display: none;
}

.intro .animate#background {
  background: black url(/pics/background.png) repeat 5% 5%;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 100;
}

.intro .animate#midground {
  background: url(/pics/midground.png) repeat 20% 20%;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 200;
}

.intro .animate#foreground {
  background: url(/pics/foreground.png) repeat 35% 35%;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 240;
}

/*.intro h1#title .title {
  color: rgba(32,62,200,.8);
  text-shadow: rgba(130,40,100,.6) -4px 4px 0;
}
.intro #start h2,
.intro #start h3 {
  color: rgba(32,62,200,.8);
  text-shadow: rgba(130,40,100,.6) -2px 2px 0;
}*/

.gif {
  max-width: 200px;
  max-height: 200px;
}