/* Wider than desktop */
@media (min-width: 1200px) { 
    .box {
        width: 85%;
        height: 250px;
        padding-bottom: 20px;
      }
 }

/* Landscape phone to desktop */
@media (max-width: 1199px) { 
    .box {
        width: 85%;
        height: 250px;
        padding-bottom: 20px;
      }
 }


/* Landscape phone to landscape tablet */
@media (max-width: 979px) {
    .box {
        width: 85%;
        height: 250px;
        padding-bottom: 20px;
      }
  }

/* Small desktop */
@media (min-width: 980px) and (max-width: 1199px) { 
    .box {
        width: 85%;
        height: 250px;
        padding-bottom: 20px;
      }
 }

/* Portrait tablet to landscape tablet */
@media (min-width: 768px) and (max-width: 979px) {
    .box {
        width: 85%;
        height: 250px;
        padding-bottom: 20px;
      }
      #result{
        font-size: 45px;
      }
  }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { 
    .box {
        width: 100%;
        height: 150px;
        padding-bottom: 20px;
      }
 }

/* Landscape phones and smaller */
@media (max-width: 480px) { 
    .box {
        width: 100%;
        height: 150px;
        padding-bottom: 20px;
      }
 }