styles.css

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}
.container {
  display : flex;
  flex-direction: column;
  height: 450px;
  width :320px;
  padding: 5px 5x;
  background-color:black;
  color: white;
}


.numberDisplay{
  text-align: end;
  font-size:25px;
  height:35px;
}

.operatorDisplay{
  text-align: end;
  font-size : 14px;
  color:white;
  height:10px;
  width:auto;
  margin-bottom: 5px;
}

.calculator{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  row-gap: 5px;
  column-gap: 5px;
  text-align: center;
  padding: 0px;
  height:auto;
  padding-left: 20px;
}

.key{
  padding: 0px;
  height:50px;
  width:50px;
  border-radius:50%;
  border:1px solid black;
}

.screen {
  padding:50px;
  grid-column-start: 1;
  grid-column-end:5;
  display:flex;
  flex-direction: column;
}

#no0 {
  grid-column-start:1;
  grid-column-end: 3;
  text-align: left;
  width:125px;
  padding-left:44px;
  border-radius: 10px;
}

#AC,
#signChange,
#percentage {
  background-color:#807F68
  ;
}

.operatorKey,
#equals {
  background-color:#2B803E;
  color:white;
}