html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}
.flex-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.calculator {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 600px;

}
.screen {
  background-color: black;
  font-size: 35px;
  font-family: "Courier New", Courier, monospace;
  color: white;
  height: 20%;
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 20px;
}
.btn-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  height: 80%;
  border: 1px solid black;
}
.btn {
  background-color: #d8d9db;
  height: 20%;
  width: 25%;
  font-size: 40px;
  box-shadow: none;
  border: 1px solid black;
}
.btn:hover {
  background-color: #ebebeb;
}
.btn:active {
  background-color: #979797;
}

.btn.clear-btn {
  width: 50%;
}
.btn.zero-btn {
  width: 50%;
}
.btn.orange {
  background-color: #df974c;
  color: white;
}
.btn.orange:hover {
  background-color: #ffb25f;
}
.btn.orange:active {
  background-color: #de8c34;
}

@media (max-width: 480px) {
  .calculator{
    height: 100%;
    width: 100%;
  }
}