body {
  background-color: #142e4d;
}

.frame {
  background-color: #245c90;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: auto auto auto auto auto;
  gap: 10px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  padding: 3%;
  width: 25%;
  height: 75vh;
  border-radius: 8%;
  min-width: 240px;
}

.gridItem {
  background-color: #c4c4c4;
  border-radius: 10%;
  font-family: "Macondo", cursive, bold;
  font-size: 1.5rem;
}

#inputField {
  grid-column-start: 1;
  grid-column-end: 5;
  border-radius: 0%;
  text-align: right;
}

.bigButton {
  grid-column-start: 1;
  grid-column-end: 3;
  
}

.nondigits{
  background-color: rgb(142, 139, 203);
}

/*For mobile view*/

@media only screen and (max-width:768px){
 
  .frame{
    margin-top: 15%;
    padding: 6%;
    width: 30%;
    height: 65vh;
    border-radius: 8%;
    
  }
}