* {
  box-sizing: border-box;
}

  body {
    width: 70%;
    margin: 0 auto;
    background-color: white;
  }

  h1 {
    font-family: 'Bangers', cursive;
    margin: 0 auto;
    width: 38%;
    font-size: 4em;
    padding: 30px 0 20px 0;
  }

  button {
    text-align: center;
    cursor: pointer;
    margin: 28%;
    border: 0px solid #0F1BBC;
    box-shadow: #b4b5b5 9px 9px 9px; -webkit-box-shadow: #b4b5b5 9px 9px 9px; -moz-box-shadow: #b4b5b5 9px 9px 9px;
    border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
    font-size: 2em;
    font-family:'Poppins', sans-serif;
    padding: 13px 13px 13px 13px; text-decoration: none; display: inline-block;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    color: #FFFFFF;
    background-color: #0F1BBC;
    background-image: -webkit-gradient (linear, left top, left bottom, from(#0F1BBC), to(#D20202));
    background-image: -webkit-linear-gradient(top, #0F1BBC, #D20202);
    background-image: -moz-linear-gradient(top, #0F1BBC, #D20202);
    background-image: -ms-linear-gradient(top, #0F1BBC, #D20202);
    background-image: -o-linear-gradient(top, #0F1BBC, #D20202);
    background-image: linear-gradient(to bottom, #0F1BBC, #D20202);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#0F1BBC, endColorstr=#D20202);
  }

  button:hover {
     border: 0px solid #D20202;
     background-color: #D20202;
     background-image: -webkit-gradient (linear, left top, left bottom, from(#D20202), to(#0F1BBC));
     background-image: -webkit-linear-gradient(top, #D20202, #0F1BBC);
     background-image: -moz-linear-gradient(top, #D20202, #0F1BBC);
     background-image: -ms-linear-gradient(top, #D20202, #0F1BBC);
     background-image: -o-linear-gradient(top, #D20202, #0F1BBC);
     background-image: linear-gradient(to bottom, #D20202, #0F1BBC);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#D20202, endColorstr=#0F1BBC);
  }

  .container {
    display: flex;
    justify-content: center;
  }

  .grid {
    width: 100%;
    height: 100%;
    padding: 72px 35px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-image: url('images/boxingringabove.png');
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .gameBoard {
    width: 50%;
    height: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
 }

  .threed {
    border: 1px solid #00000052;
    height: 20%;
    width: 20%;
    padding: 13%;
    margin: 3px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    cursor: pointer;
    animation-delay: 1s;
    animation-iteration-count: 1;
  }

  .threed:hover {
    box-shadow: 4px 4px #B4B5B5;
    -webkit-transform: translateX(-4px);
    transform: translateX(-4px);
  }

  .redScore {
    float: right;
    margin-right: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.5em;
    color: #D20202;
    font-weight: bold;
  }

  .blueScore {
    margin-left: 6px;
    font-family: 'Poppins', sans-serif;
    font-size: 1.5em;
    color: #0F1BBC;
    font-weight: bold;
  }

  #message {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5em;
    font-weight: bold;
    text-align: center;
    margin: -25px;
    animation-name: tada;
    animation-duration: 4s;
    animation-iteration-count: 3;
  }

  #blueGlove {
    float: left;
    font-family: 'Poppins', sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    color: #0F1BBC;
  }

  #redGlove {
    float: right;
    font-family: 'Poppins', sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    color: #D20202;
  }