/* CSS just for the game/play page */

canvas {
    background-image: url("../resources/background.png");
    margin-left: -1%;
    padding-right: 1%;
}

#start { /* start button */ 
    position: absolute;
    left: 37%;
    top: 55%;
}

#playAgain { /* play again button */ 
    position: absolute;
    left: 32%;
    top: 65%;
}

#logo { /* game logo */ 
    position: absolute;
    left: 290px;
    top: 150px;
    font-size: 70px;
    color: #FF82F3;
    text-shadow: 6px 6px 6px black;
} 

.sound { /* sound logo */ 
    position: absolute;
    right: 20px;
    top: 12%;
    text-shadow: 6px 6px 6px black;
}

#score { /* game score */ 
    position: absolute;
    left: 2%;
    top: 8%;
    font-size: 25px;
    color: white;
    text-shadow: 2px 2px 2px black;
}

#end { /* end screen text */ 
    position: absolute;
    font-size: 80px;
    color: #FF82F3;
    text-shadow: 2px 2px 2px black;
    left: 20%;
    top: 20%;
}

#score-check { /* end screen text */ 
    position: absolute;
    font-size: 25px;
    color: white;
    text-shadow: 2px 2px 2px black;
    left: 10%;
    top: 50%;
    text-align: center;
}

@keyframes spin { /* animation for trap/obstacle to spin */ 
    0% {
          transform: rotate(0deg); 
      }
    50% {
          transform: rotate(180deg); 
      }
    100% {
          transform: rotate(360deg); 
      }
  }


.spin { 
    animation: spin 15s infinite linear; 
}