@media (height:100%) and (width:100%){
  
  html {
    height: 100%;
    width: 100%;
  }

  button {
    color: black;
    border: none;
    height: 200px;
    width: 200px;
    box-shadow: 0 2px 4px darkslategray;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  button:hover {
    background-color: #65b9e6;
  }

  .rounded-circle {
    border-radius: 70%;
  }

  #a {
    font-family: 'Times New Roman';
    font-size: 50px;
  }

  #center {
    /* width: 50%; */
    margin-top: 22%;
    font-size: 50px;
    width: 100%;
  }

  .col {
    width: 100%;
  }

  #first {
    width: 20%;
  }

  #second {
    width: 20%;
  }

  #char {
    width: 20%;
  }

  #mult {
    width: 20%;
  }

  #result{
    width: 70%;
  }

  #answer{
    height: 100%;
    width: 10%;
    font-size: 15px;
  }
  
  #result{
    height: 100%;
    width: 20%;
    font-size: 15px;
  }


  #board {
    height: 200px;
    width: 300px;
    background-color: gray;
    color: white;
    font-size: 40px;
    font-family: Arial;
    text-align: center;
  }

  #board_two {
    height: 150px;
    width: 280px;
    background-color: gray;
    color: white;
    font-size: 35px;
    font-family: Arial;
    text-align: center;
  }
}