* {
  margin: 0;
  padding: 0;
}

body {
  padding: 15px;
  height: 100vh;
}

.container-main {
  margin: 25px auto 0 auto;
  display: flex;  
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30%;
  height: 80%;
  font-size: 40px;

  border: 1px black solid;
  border-radius: 16px;
  background-color: rgb(234, 234, 234);
}

.operators {
  display: flex;
}

.display {
  font-size: 36px;
  text-align: right;
  border: 1px black solid;
  border-radius: 16px;
  width: 70%;
  padding: 15px;
  height: 1em;
  margin: 15px auto;
  background-color: white;
}

.row {
  display: flex;
}

button {
  width: 80px;
  height: 80px;
  text-align: center;
  font-size: 18px;
  padding: 2em;
  margin: 5px;

  border-radius: 12px;
  border: none;
  background-color: gray;
  color: white;
}

button:hover {
  background-color: rgb(82, 82, 82);
}

button:active {
  background-color: rgb(33, 33, 33);
  transform: scale(0.9, 0.9);
  
}

#clear {
  background-color: tomato;
  color: white;
  font-weight: bold;
}#clear:hover {
  background-color: rgb(221, 63, 36);
}#clear:active {
  background-color: brown;
}

#equ {
  background-color: rgb(34, 74, 221);
  font-weight: 700;
}#equ:hover {
  background-color: rgb(32, 64, 179);
}#equ:active {
  background-color: rgb(24, 49, 136);
}