h2{
  font-size: 3rem;
  padding: 1% 0;
}

nav{
  float: right;
  width: 40%;
}

.chessboard{
    border: 2px solid black;
    box-sizing: content-box;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 40vw;
    margin: auto;
    width: 50vw;
  }
  
  .row{
    display: flex;
    flex: 1;
    flex-direction: row;
  }
  
  .box{
    align-items: center;
    display: flex;
    font-size: 5vw;
    flex: 1;
    height: 5vw;
    justify-content: center;
    overflow: hidden;
    width: 6.25vw;
  }

    .box span{
      display: flex;
      height: 100%;
      overflow: hidden;
      width: 100%;
      align-items: center;
      font-size: 5vw;
      flex: 1;
      justify-content: center;
    }
  
  .white-box{
    background-color: #27cec6;
    flex: 1;
  }
  
  .black-box{
    background-color: #0f181c;
    flex: 1;
  }

  .white-piece{
    color: #1575b6;
  }

  .black-piece{
    color: #4d5a75;
  }

  @media (max-width: 1200px) {
    h2{
      font-size: 3rem;
      padding: 4% 0;
    }
    
    nav{
      float: right;
      width: 100%;
    }

    .chessboard{
      height: 50vw;
      width: 60vw;
    }

    .box{
      height: 6.25vw;
      width: 7.5vw;
    }

    .box span{
      font-size: 6.25vw;
    }
  }

  @media (max-width: 600px) {
    h2{
      font-size: 2.5rem;
      padding: 10% 0;
    }
    
    nav{
      float: right;
      width: 100%;
    }

    .chessboard{
      height: 80vw;
      width: 80vw;
    }

    .box{
      height: 10vw;
      width: 10vw;
    }

    .box span{
      font-size: 10vw;
    }
  }