:root {
  --bg-main: #ffebcd;
  --bg-btn: #333;
  --bg-btn-grey: #a6a6a6;
  --bg-btn-orange: #ff9501; 
  --shadow-color: #4f4f4f;
  --text-color: #fff;
  --bg-field: #000;
}

body {
  background-color: var(--bg-main);
}

.calc {
  margin: 50px auto;
  padding: 18px;
  width: 300px;
  height: 500px;
  border-radius: 20px;
  box-shadow: 4px 4px 4px var(--shdow-color);
  color: var(--text-color);
  font-family: Arial, Helvetica, sans-serif;
  background-color: var(--bg-field);
}

.calc-screen {
   overflow-x: auto;
   height: 125px; 
   padding: 10px;
   display: grid;
   justify-items: end;
   align-items: end;
   margin-bottom: 25px;
}

.calc-screen span {
    text-align: right;
    font-size: 60px;
    margin: 0;
}

.buttons {
  display: grid; 
  grid-template-areas: 
  "ac plus-minus percent division"
  "seven eigth nine myltiply"
  "four five six minus"
  "one two three plus"
  "zero zero dot equal"; 
  grid-gap: 7px;
  justify-items: center;
}

.btn {
  width: 60px;
  height: 60px;
  background-color: var(--bg-btn);
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  font-size: 25px;
  cursor: pointer;
  user-select: none;
}

.btn.myltiply {
  line-height: 75px;
  font-size: 30px;
}

.btn.zero {
  grid-area: zero;
  width: 100%;
  border-radius: 34px;
}

.btn:hover {
  filter: brightness(120%);
}

.btn:active {
  filter: brightness(90%);
  scale: 98%;
}

.btn.bg-grey {
  background-color: var(--bg-btn-grey);
}

.btn.bg-orange {
  background-color: var(--bg-btn-orange);
}