body {
   /* Background from CSS3 Patterns Gallery by Anna Kassner */

   background-color: #6d6aff;

   background-image:
      -webkit-repeating-linear-gradient(120deg, rgba(255,255,255,.1), 
                                                rgba(255,255,255,.1) 1px, 
                                                transparent 1px, transparent 60px),

      -webkit-repeating-linear-gradient(60deg, rgba(255,255,255,.1), 
                                               rgba(255,255,255,.1) 1px, 
                                               transparent 1px, transparent 60px),

      -webkit-linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%,
                                     transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),

      -webkit-linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, 
                                      transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));

   background-image:
      repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, 
                                        transparent 1px, transparent 60px),

      repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, 
                                       transparent 1px, transparent 60px),

      linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, 
                             rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),

      linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, 
                              rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));

   background-size: 70px 120px;
}

#arena {
   text-align: center;
   padding: 5px;
   width: 805px;
   height: 445px;
}

#wrapper {
   margin: 0 auto;
   margin-top: 10px;
   padding: 5px;
   width: 817px;
   height: 520px;
}
         
#score {
   font: 46px fantasy;
   text-align: center;
   color: #ff0;
   text-shadow: 2px 2px 4px rgba(0,0,80,1.0);
}

#wrapper #header h1 {
   font: 26px fantasy;
   margin: 0 auto;
   padding: 0;
   margin-top: 20px;
   margin-bottom: 0px;
   color: #ddf;
   text-shadow: 1px 1px 2px rgb(0,0,0);
   color: navy;
   text-shadow: 1px 1px 1px rgb(235,235,235);
}

#game-canvas {
   position: relative;
   border: 1px inset rgba(0,0,80,0.62);

   -webkit-transition: opacity 2.5s;
   -moz-transition: opacity 2.5s;
   -o-transition: opacity 2.5s;
   transition: opacity 2.5s;
}

#fps {
   position: absolute;
   margin-top: -45px;
   margin-left: 12px;
   z-index: 1;
   color: yellow;
   text-shadow: 1px 1px 1px rgb(0,0,80);
   font: bold 20px fantasy;
}

#toast {
   position: absolute;
   margin-top: 90px;
   width: 820px;
   font: 40px fantasy;
   text-align: center;
   color: #ff6;
   text-shadow: 2px 2px 4px rgb(0,0,0);

   -webkit-transition: opacity 0.5s;
   -moz-transition: opacity 0.5s;
   -o-transition: opacity 0.5s;
   transition: opacity 0.5s;

   opacity: 0;
   z-index: 2;
   display: none;
}

#instructions {
   height: 30px;
   margin-right: 8px;
   padding-top: 6px;
   padding-left: 25px;

   -webkit-transition: opacity 3s;
   -moz-transition: opacity 3s;
   -o-transition: opacity 3s;
   transition: opacity 3s;

   color: #ff0;
   font-size: 0.95em;
   opacity: 1.0;
}

.keys {
   color: blue;
   text-shadow: 1px 1px 1px rgba(255,255,0,1.0);
   background: rgba(0,0,0,0.1);
   border: thin solid rgba(0,0,0,0.20);
   border-radius: 5px;
   margin-left: 10px;
   padding-right: 10px;
   padding-left: 10px;
   padding-bottom: 5px;

   display: inline;
}

.explanation {
   color: #ff0;
   text-shadow: 1px 1px 1px rgba(0,0,0,1.0);
   display: inline;
   margin-top: 5px;
   padding-right: 5px;
   padding-left: 5px;
   padding-bottom: 2px;
}

#sound-and-music {
   position: absolute;
   top: 493px;
   margin-left: 30px;
   margin-top: 12px;
   color: #ff0;
   text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
   background: rgba(0,0,0,0.1);
   border-radius: 5px;
   border: thin solid rgba(0,0,0,0.20);
   padding-top: 2px;
   padding-bottom: 2px;
   z-index: 1;

   -webkit-transition: opacity 2s;
   -moz-transition: opacity 2s;
   -o-transition: opacity 2s;
   transition: opacity 2s;

   font-size: 0.9em;
}

.checkbox-div {
   display: inline;
   margin-right: 20px;
   text-shadow: 1px 1px 1px blue;
}

#lives {
   position: absolute;
   margin-top: -40px;
   margin-left: 5px;

   -webkit-transition: opacity 2s;
   -moz-transition: opacity 2s;
   -o-transition: opacity 2s;
}

.credits {
   position: absolute;
   margin-left: 50px;
   margin-top: 5px;
   padding-bottom: 20px;
   text-align: center;
   width: 630px;
   background: rgba(0,0,0,0.4);
   background: rgba(255,255,230,0.9);
   border: thin solid blue;
   padding-top: 20px;
   padding-left: 40px;
   padding-right: 40px;

   -webkit-transition: opacity 2s;
   -moz-transition: opacity 2s;
   -o-transition: opacity 2s;
   transition: opacity 2s;

   -webkit-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   -moz-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   -o-box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;
   box-shadow: rgba(0,0,0,0.5) 8px 8px 16px;

   border-radius: 10px;

   opacity: 0;
   display: none;
   z-index: 2;
}

#credits a:hover {
   color: blue;
   text-shadow: 1px 1px 1px rgba(0,0,200,0.5);
}

#credits p {
   margin-top: 20px;
   margin-bottom: 10px;
   font: 24px fantasy;
   color: yellow;
   text-shadow: 1px 1px 1px rgba(0,0,0,0.8);
   color: blue;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}

#credits .attribution {
   font: 17px fantasy;
   color: blue;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}

#credits .title {
   margin-bottom: 10px;
   font-size: 25px;
   color: blue;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}

#new-game-link {
  margin-top: 10px;
  float: right;
  margin-right: 20px;
  font-size: 0.9em;
}

#art-title {
   margin-top: 20px;
}

#sound-and-music-title {
   margin-top: 20px;
}
#running-slowly {
   position: absolute;
   width: 600px;
   margin-top: 85px;
   margin-left: 90px;
   text-align: center;
   background: rgba(255,255,255,0.85);
   text-align: left;
   padding: 0px 20px 20px 20px;
   color: navy;
   text-shadow: 1px 1px 1px rgba(255,255,255,0.5);

   -webkit-transition: opacity 1s;
   -moz-transition: opacity 1s;
   -o-transition: opacity 1s;
   transition: opacity 1s;
   
   -webkit-box-shadow: rgba(0,0,0,0.5) 4px 4px 8px;
   -moz-box-shadow: rgba(0,0,0,0.5) 4px 4px 8px;
   -o-box-shadow: rgba(0,0,0,0.5) 4px 4px 8px;
   box-shadow: rgba(0,0,0,0.5) 4px 4px 8px;

   opacity: 0;
   display: none;

   z-index: 2;
}

#running-slowly h1 {
   padding-top: 0;
   text-align: center;
   color: rgb(50,50,250);
}

#slowly-okay:hover {
   color: blue;
}

#slowly-dont-show:hover {
   color: blue;
}

#slowly-okay {
   margin-top: 20px;
   float: left;
   margin-left: 50px;
   font-size: 1.2em;
}

#slowly-dont-show {
   margin-top: 20px;
   float: right;
   margin-right: 50px;
   font-size: 1.2em;
}

#running-slowly p {
   color: navy;
   font-size: 1.05em;
}

.tweet-link {
  margin-top: 10px;
  margin-left: 20px;
  float: left;
  font-size: 0.9em;
}

#copyright {
   float: right;
   margin-top: -30px;
   margin-right: 15px;
   padding: 2px;
   color: rgb(40, 40, 255);
   text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
   font-size: 0.85em;

   -webkit-transition: opacity 5s;
   -moz-transition: opacity 5s;
   -o-transition: opacity 5s;
   transition: opacity 5s;
}