@viewport {
  width: device-width;
  zoom: 1.0;
}

@media screen and (min-width: 768px) {
  #equation {
    height: 12vw;
  }

  #bits {
    height: 36vw;
    font-size: 4vw;
  }

  #bits_topleft, #bits_bottomleft, #bits_topright, #bits_bottomright{
    margin: 2vw 0;
  }

  .bit_name{
    font-size: 2.5vw;
    padding-left: 3.5vw;
    margin-top: 4vw;
  }

  #numbers, #operators {
    height: 55vw;
  }

  #back, #zero_shiftr {
    font-size: 5vw;
  }
}

@media screen and (min-width: 992px)  and (max-height: 1024px){
  #container {
    width: 75%
  }

  h1 {
    font-size: 3vw;
  }

  #equation {
    height: 8vw;
    font-size: 2vw;
  }

  #display {
    height: 4vw;
    font-size: 3vw;
  }


  #bits {
    height: 12vw;
    font-size: 2vw;
  }

  #bits_topleft, #bits_bottomleft, #bits_topright, #bits_bottomright{
    width: 50%;
    margin: 1vw 0;
  }

  .bit_name{
    font-size: 2vw;
    padding-left: 1vw;
    margin-top: 2.5vw;
  }

  #numbers, #operators {
    height: 30vw;
  }

  #back, #zero_shiftr {
    font-size: 4vw;
  }
}

@media screen and (min-width: 1200px) {
  #container {
    width: 60%
  }

  h1 {
    font-size: 2em;
  }

  #equation {
    height: 80px;
    font-size: 20px;
  }

  #display {
    height: 30px;
    font-size: 25px;
  }


  #bits {
    height: 115px;
    font-size: 20px;
    line-height: 15px;
  }

  #bits_topleft, #bits_bottomleft, #bits_topright, #bits_bottomright{
    width: 50%;
    margin: 8px 0;
  }

  .bit_name{
    font-size: 18px;
    padding-left: 1vw;
    margin-top: 25px;
  }

  .number, .operator, #back, #zero_shiftr {
    font-size: 35px;
  }

  #numbers, #operators {
    height: 270px;
  }

}