.roboto-<uniquifier> {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-style: normal;
  font-variation-settings:
  "wdth" 100;
}


body {
  background-color: #E6E6FA;
  display: flex;
  justify-content: center;
  align-content: center;
}

.calculator {
  height: 650px;
  width: 425px;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 425px;
  max-height: 600px;
  min-height: 640px;
  min-width:  350px; 
  padding:0;
  margin: 0;
  border: solid 5px black;
 }

.calcbody {
  height: auto;
  width: 95%;
  background-color: #87CEFA;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


.buttons {
  height: auto;
  width: 95%;
 /* background-color:#F0EAD6;*/
  background-color:pink; 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  padding:10px;
  margin: 0;
}

.button {
  font-family: roboto, Helvetica, sans-serif;
  font-size: 2rem;
  height: 60px;
  width: 60px;
  background-color: sandybrown;
  display: flex; 
  justify-content: center; 
  align-items:center;
  border-radius: 10%;
  margin:10px;
}

.display {
  width: 93%;
  max-width: 93%;
  min-height: 48px;
  height: 150px;
  background-color: aliceblue;
  border-radius: 3%;
  margin: 15px;
  padding: 5px;
}

 .display-contents {
  width:50px;
  display: grid;
  grid-template-columns: auto 1fr auto; /* better sizing */
  grid-template-rows: 1fr 1fr;
  margin:0;
}

.equals {
  grid-row: 1 / span 2;
  display: flex;
  align-items: start;
  justify-content: center;
  padding-right: 5px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.valueone {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: end;
  justify-content: start;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.valuetwo {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: start;
  justify-content: start;
  margin:0;
  padding:0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;

}

.valueoperator {
  grid-row: 1 / span 2;
  display: flex;
  align-items: start;
  justify-content: start;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}