@font-face {
  font-family: 'Calculator';
  src: local('Calculator'),
  url(7SDD.ttf);
  }

.calc {
width: 330px;
height: 500px;
border: 1px solid #000000;
margin: 50px 800px;
background: #000000;
color: #ffffff;
font-family: Arial;
display: grid;
padding: 18px;
}

.page{
  position: relative;
  width: 500px;
  height: 700px;
  display: block;
  margin: 50px 800px;
  font-family: Arial;
  display: grid;
  padding: 18px;
}


.calc-screen {
  height: 125px;
  position: absolute;
  margin-top: 33px;
  margin-left: 240px;
  padding: 10px;
  display: grid;
  justify-items: end;
  align-items: end;
 }



.calc-screen p {
  color: rgb(39, 155, 91);
  font-family: 'Calculator';
  position: absolute;
  margin-top: -30px; /* Добавьте это свойство */
  text-align: right;
  font-size: 2.5rem;
 }

button {
color: #ffffff;
font-family: Arial;
width: 60px;
height: 60px;
justify-items: center;
align-items: center;
}
.buttons {
  position: absolute;
    display: grid;
    grid-template-areas:
    "seven eigth nine division percent"
    "four five siz multi proc"
    "one two three minus 1delx"
    "zero dot CK plus equal";
    gap: 7px; /* отступ между рядами и столбцами */
    justify-items: center;
    align-items: center;
    margin: 259px 44px;
    grid-template-columns: 55px 18px 53px 17px 58px; /* увеличиваем отступ между третьим и четвертым столбцом */
    grid-template-rows: 55px 28px 54px 30px;
   }

.btn {
    width: 36px;
    height: 25px;
    background: #464545;
    text-align: center;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    outline: none;
    user-select: none;
    border: 1px solid #000; /* черная окантовка */
    position: relative; /* добавлено для позиционирования вложенного элемента */
  }

.btn:hover {
filter: brightness(130%);
}
.btn:active {
filter: brightness(90%);
}



.bg-red{
  background: red;
  line-height: 1px;
}


.sbros {
position: absolute;
display:grid;
grid-gap: 7px;
grid-template-columns: 60px 60px 60px 60px 60px;
justify-items: center;
align-items: center;
margin: 211px 42px;
grid-template-columns: 55px 18px 55px 18px 55px; /* увеличиваем отступ между третьим и четвертым столбцом */
grid-template-rows: 55px 28px 54px 30px;
}

.sbros button {
grid-column: 5;
} 

.manual{
  position:absolute;
  font-size: 1.3rem;
  font-family: Arial, Helvetica, sans-serif;
  }