body {
    padding: 0;
    margin: 0;
    background-color: darkgrey;
    width:100%;
    height: auto;
  }
  #content {
    margin: 20px;
    padding: 20px;
  }
  #gameboard{
    display: grid;
    grid-template-areas:
    'announcer'
    'H' 
    'G'
    'F'
    'E'
    'D'
    'C'
    'B'
    'A';
    width:100%;
  }

  .selected{
    border-color: rgb(253, 255, 140);
    border-style: dotted;
  }
  
  .navbar {
    background-color: black;
    display: inline-block;
    width: 100%;
  }
  
  .navbar a {
    background-color: black;
    float: left;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }
  
  .navbar a:hover {
    background-color: #ddd;
    color: black;
  }
  
  .messages .success {
    background-color: rgba(22, 216, 22, 0.479);
  }
  
  .messages .error {
    background-color: rgba(241, 45, 45, 0.212);
  }
  
  .chessblock {
    border-style: solid;
    border-width: 4px;
    width: 5em;
    height:5em;
    display: inline-block;
    text-align: center;
    overflow:hidden;
  }
  .chessblock img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
  }
  
    .white {
        background-color: #d3d3d3; 
    }

   .black {
        background-color: #2e2e2ea2; 
    }

   #announcer{
        text-align: center;
        grid-area: announcer;
    }


#A {
    grid-area: A;
    display: flex;
    justify-content: center;
}

#B {
    grid-area: B;
    display: flex;
    justify-content: center;
}

#C {
    grid-area: C;
    display: flex;
    justify-content: center;
}

#D {
    grid-area: D;
    display: flex;
    justify-content: center;
}

#E {
    grid-area: E;
    display: flex;
    justify-content: center;
}

#F {
    grid-area: F;
    display: flex;
    justify-content: center;
}

#G {
    grid-area: G;
    display: flex;
    justify-content: center;
}

#H {
    grid-area: H;
    display: flex;
    justify-content: center;
}

img{
    width: 90%;
    height: fit-content;
    margin: 0;
    border: 0;
    padding: 0;
    opacity: 75%;
    margin-top: 4px;
    pointer-events: none;
}

.blackpawn img{
    height: 90%;
}

#newGame{
    font-size: 72px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: darkslateblue;
    border-radius: 20%;
    border-width: 2px;
    border-color: slateblue;
}

a {
  text-decoration: none;
  color: midnightblue;
  font-size: 72px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: darkslateblue;
  border-radius: 20%;
  border-width: 2px;
  border-color: slateblue;
}