style.css

* {
    box-sizing: border-box;
  }
  
  body {
    display: flex;
    height: 100vh;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    background-image: url('images/backgroundimage.png');
    background-size: cover;
    font-family: 'Exo 2', sans-serif;
  }
  
  header {
    justify-content: center;
    font-size: 40px;
    align-content: center;
    letter-spacing: 10px;
    color: white;
    height: 10%;
    margin-bottom: 40px;
    font-weight: bold;
  }
  
  h1 {
    margin: 0;
  }
  
  .grid {
    height: 500px;
    width: 500px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 50px;
    border-bottom: 3px solid #01fe01;
  }
  
  .grid div {
    flex-grow: 1;
    height: 5.67%;
    width: 5.66%;
    margin: 2px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .activeAlien {
    background-image: url('images/alienimage.png');
  }
  
  .spaceship {
    background-image: url('images/userspaceshipone.png');
    background-size: 117%;
    -webkit-animation-name: spaceboots;
    -webkit-animation-duration: 2s;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
  }
  
  .bullet {
    background-image: url('images/userbulletone.png');
  }
  
  .bomb {
    background-image: url('images/rocket.png');
  }
  
  .score, .lives {
    display: inline-block;
    width: 150px;
    font-size: 20px;
    color: white;
  }
  
  .lives {
    float: right;
    text-align: right;
  }
  
  .endMessage {
    color: #ff4f00;
    font-size: 34px;
    text-align: center;
    margin-top: 20px;
    letter-spacing: 15px;
    font-weight: bold;
  }
  
  .start {
    color: white;
    font-size: 30px;
    text-align: center;
    margin-top: 30px;
    letter-spacing: 10px;
    font-weight: bold;
  }
  
  .start:hover {
    cursor: pointer;
    letter-spacing: 15px;
  }
  
  .explosion {
    background-image: url('images/explosion-two.png');
  }
  
  .hidden {
    display: none!important;
  }
  
  .countdown {
    color: white;
    font-size: 30px;
    text-align: center;
    margin-top: 30px;
    letter-spacing: 10px;
    font-weight: bold;
  }
  
  @-webkit-keyframes spaceboots {
     0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
     10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
     20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
     30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
     40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
     50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
     60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
     70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
     80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
     90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
     100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
  }