* {
    margin:0;
    padding:0;
}

html, body {
    height:100%;
    width:100%;
}

body {
    background-color:#000000;
    overflow:hidden;
    font-family:"Arial Black", Gadget, sans-serif;
    background-image:url('../images/background.png');
    background-repeat:repeat;
}

canvas {
    position:absolute;
    z-index:0;
}

#spritesheet,
#effects {
    left:0;
    position:absolute;
    top:0;
    visibility:hidden;
}

#info-screen,
#title-screen {
    color:#00ff00;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    text-align:center;
    opacity:1;
    z-index:1;
    -webkit-touch-callout:none;
      -webkit-user-select:none;
       -khtml-user-select:none;
         -moz-user-select:none;
          -ms-user-select:none;
              user-select:none;
    -webkit-transition:opacity 0.5s ease-in-out;
       -moz-transition:opacity 0.5s ease-in-out;
        -ms-transition:opacity 0.5s ease-in-out;
         -o-transition:opacity 0.5s ease-in-out;
}

#title-screen {
    height:370px;
}

#info-screen {
    height:1em;
}

#instructions {
    font-size:2em;
}

.title,
#info-screen {
    color:#00ff00;
    font-size:7em;
    text-shadow:-2px 5px 4px #00ff00, 0px 20px 3px #000000;
}

#credits {
    font-size:1em;
}

.hidden {
    opacity:0 !important;
}