*{
  box-sizing: border-box;
}
button{
  display: block;
  border-radius: 8px;
  border: 2px solid black;
  font-size: 24px;
  height: 40px;
}

body{
  width:600px;
  margin: 0 auto;
  margin-top: 10vh;
  background-color: rgb(174, 155, 165);
  font-family:Arial, Helvetica, sans-serif;
  text-align: center;
}

.calculator-body{
  background-color: rgb(155, 155, 155);
  border: 3px solid black;
  border-radius: 8px;
  padding: 2px;
  display: flex;
  flex-direction: column;
}

.text-line{
  background-color: rgb(196, 196, 196);
  min-height: 60px;
  border-radius: 8px;
  margin: 2px;
  padding:8px;
  font-size: 32px;
  display: flex;
  align-items: center;
}
.text-line p{
  margin: 0;
}

.buttons{
  flex:1;
  display: flex;
  align-items: stretch;
}

.panel{
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 1px;
}
.numbers{
  flex:2;
}
.operators{
  flex:1;
}

.numbers button{
  flex: 1;
  flex-basis: 100px;
  background-color: rgb(214, 214, 214);
}
.operators button{
  flex: 1;
  flex-basis: 90px;
  background-color: rgb(185, 185, 185);
}

#equals{
  background-color: rgb(135, 189, 158);
}

#clear, #erase{
  font-size: 18px;
}