* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: lightsteelblue;
}

@media screen and (max-width: 767px) {
  main {
    height: 100vh;
    width: 100%;
    color: #cecece;
    font-family: Montserrat;
    font-size: 200%;
    margin: 0;
    text-align: center;
    transition: ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  main .calculator {
    background-color: #444f59;
    height: 80%;
    max-width: 90%;
    text-align: center;
    border: 2px solid #444f59;
    border-radius: 50px;
  }
  main .calculator .output {
    background-color: #444f59;
    box-sizing: border-box;
    color: #e44a4d;
    font-size: 80px;
    height: 25%;
    padding: 10% 5% 5%;
    text-align: right;
    border: 2px solid #444f59;
    border-radius: 50px;
  }
  main .calculator .button {
    background-color: #444f59;
    box-sizing: border-box;
    cursor: pointer;
    float: left;
    height: 15%;
    padding: 5%;
    transition: 0.3s;
    width: 25%;
    border: 2px solid #444f59;
    border-radius: 50px;
  }
  main .calculator .button:hover {
    background: lightseagreen;
    color: #fff;
  }
  main .calculator .double {
    width: 50%;
  }
  main .calculator .accent:hover {
    color: #fff;
  }
  main .calculator .submit:hover {
    background: #fd999a;
  }
}
@media screen and (min-width: 768px) {
  main {
    height: 100vh;
    width: 100%;
    color: #cecece;
    font-family: Montserrat;
    font-size: 200%;
    margin: 0;
    text-align: center;
    transition: ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  main .calculator {
    background-color: #444f59;
    height: 80%;
    margin: auto 300px;
    max-width: 90%;
    text-align: center;
    border: 2px solid #444f59;
    border-radius: 50px;
  }
  main .calculator .output {
    background-color: #444f59;
    box-sizing: border-box;
    color: #e44a4d;
    font-size: 80px;
    height: 25%;
    padding: 10% 5% 5%;
    text-align: right;
    border: 2px solid #444f59;
    border-radius: 50px;
  }
  main .calculator .button {
    background-color: #444f59;
    box-sizing: border-box;
    cursor: pointer;
    float: left;
    height: 15%;
    padding: 5%;
    transition: 0.3s;
    width: 25%;
    border: 2px solid #444f59;
    border-radius: 50px;
  }
  main .calculator .button:hover {
    background: lightseagreen;
    color: #fff;
  }
  main .calculator .double {
    width: 50%;
  }
  main .calculator .accent:hover {
    color: #fff;
  }
  main .calculator .submit:hover {
    background: #fd999a;
  }
}