* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.calculator {
  height: 80vmin;
  width: 50vmin;
  align-content: center;
  margin: auto;
  background-color: black;
  margin-top: 3vmin;
  border-radius: 2vmin;
}
.calc {
  height: 80%;
  width: 100%;
  border: 4px solid black;
  justify-items: center ;
}
.display {
    display: flex;
  width: 95%;
  height: 10vmin;
  background-color: rgb(135, 177, 90);
  color: white;
  font-size: 8vmin;
  border-bottom: 4px solid black;
  align-items: flex-end;
  justify-content: right;
}
.keys {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-template-rows: repeat(5,1fr);
  background-color: red;
  height: 80%;
  /* justify-content: space-around; */
  /* font-size: 2vw; */
  background-color: black;
  align-items: center;
  gap: 3vmin;
  margin-top: 7vmin;
  
}
.key {
  height:90%;
  width: 9vmin;
  font-size: 3vmin;
  border-radius: 50%;
  border-color: aliceblue;
  color: white;
  background-color: black;
}
.key:hover {
    background-color: red;}