<div id="calc-body">
      <div id="top-text"><p><br> КАЛЬКУЛЯТОР</break></p></div>
  
    <form name="calc">
      <table class="screen">
        <tr>
        <td colspan=4><input id="screen" type="text" name="display" readonly="readonly"></td>
        </tr>
      </table>
      <table class="buttons">
        
        <tr>
          <td colspan=2><input class="calc-button red" type="button" value="Clear" OnClick="calc.display.value=''"></td>
          <td><input class="calc-button" type="button" value="%" OnClick="calc.display.value+=''"></td>
          <td><input class="calc-button green" type="button" value="÷" OnClick="calc.display.value+='/'"></td>
        </tr>

        <tr>
          <td><input class="calc-button" type="button" value="7" OnClick="calc.display.value+='7'"></td>
          <td><input class="calc-button" type="button" value="8" OnClick="calc.display.value+='8'"></td>
          <td><input class="calc-button" type="button" value="9" OnClick="calc.display.value+='9'"></td>
          <td><input class="calc-button green" type="button" value="x" OnClick="calc.display.value+='*'"></td>
        </tr>  

        <tr>
          <td><input class="calc-button" type="button" value="4" OnClick="calc.display.value+='4'"></td>
          <td><input class="calc-button" type="button" value="5" OnClick="calc.display.value+='5'"></td>
          <td><input class="calc-button" type="button" value="6" OnClick="calc.display.value+='6'"></td>
          <td><input class="calc-button green" type="button" value="-" OnClick="calc.display.value+='-'"></td>
        </tr>
  
        <tr>
          <td ><input class="calc-button" type="button" value="1" OnClick="calc.display.value+='1'"></td>
          <td><input class="calc-button" type="button" value="2" OnClick="calc.display.value+='2'"</td>
          <td><input class="calc-button" type="button" value="3" OnClick="calc.display.value+='3'"></td>
          <td rowspan=2><input id="plus" class="calc-button green" type="button" value="+" OnClick="calc.display.value+='+'"></td>
        </tr>

         <tr>
          <td><input class="calc-button" type="button" value="0" OnClick="calc.display.value+='0'"></td>
          <td><input class="calc-button" type="button" value="." OnClick="calc.display.value+='.'"></td>
          <td><input class="calc-button green" type="button" value="=" OnClick="calc.display.value=eval(calc.display.value)"></td>
        </tr>
      </table>
    </form>
  </div>

#calc-body {
  background: #F16843;
  height: 415px;
  width: 325px;
  margin: 0 auto;
  border-top-left-radius: 80%20px;
  border-top-right-radius: 80%20px;
  border-bottom-left-radius: 80%20px;
  border-bottom-right-radius: 80%20px;
  
  box-shadow: inset 2px 0 3px -5px #4F4F4F,
              inset -5px 0 4px -5px #4F4F4F,
              inset 0px -5px 4px -2px #4F4F4F,
                    0 0 10px 2px #4F4F4F,
                    0 4px 10px 0 #4F4F4F;
}

#top-text {
  height: 70px;
  width: 325px;
  margin: 0 auto;
}

#top-text p {
  text-align: center;
  padding-top: 10px;
  color: #E2E2E2;
}

#top-text p span {
  font-size: 24px;
  font-family: "Hind";
  letter-spacing: 1px;
}

.screen {
  margin: 0 auto;
}

#screen {
  height: 50px;
  width: 275px;
  background: #D0DBDB;
  text-align: right;
  font-size: 36px;
  color: #4A5242;
  border: none;
  box-shadow: inset 0px -2px 2px #146170;
  border-radius: 5px;
}

.buttons {
  margin: 0 auto;;
  border-collapse: separate;
  border-spacing: 15px 5px;
  padding-top: 5px;
}

.calc-button {
  font-family: "Quicksand";
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  color: #363636;
  background: #FECEA8;
  border-radius: 25%;
  table-layout: fixed;
  width: 55px;
  height: 45px;
  border: 1px solid #BDBF8A;
  box-shadow: inset 0px 0px 0px #BDBF8A, 0px 3px 0px 0px #BDBF8A;
}

.calc-button:focus {
  outline: 0;
}

.calc-button:active {
    vertical-align: top;
    padding: 4px 10px 3px;
    position: relative;
    top: 1px;
}

#plus {
  height: 95px;
}

.green {
  background: #99B898;
  border: 1px solid #68A693;
  box-shadow: inset 0px 0px 0px #68A693, 0px 3px 0px 0px #68A693;
}

.red {
  background: #E04848;
  width: 127px;
  border: 1px solid #A84343;
  box-shadow: inset 0px 0px 0px #A84343, 0px 3px 0px 0px #A84343;
}