body {
   font-family: Arial, Helvetica, sans-serif;
}

.calculator {
   width: 420px;
   margin: auto;
   border-radius: 10px;
   background-color: darkgrey;
   box-shadow: 2px 2px 5px rgb(75, 75, 105),
      -2px -2px 5px rgb(75, 75, 105);
}

h1 {
   margin: 0;
   padding: 10px;
   width: 25%;
   font-style: italic;
   text-decoration: underline;
}

.screen {
   width: 400px;
   height: 80px;
   margin: 20px auto;
   border-radius: 10px;
   background-color: aliceblue;
}

.input {
   margin: 0;
   padding-left: 5px;
   padding-top: 5px;
}

.output {
   margin-top: 10px 0 0 0;
   padding-right: 5px;
   float: right;
   font-weight: bold;
   font-size: 1.3em;
}

.buttons {
   width: 400px;
   margin: 50px auto;
   overflow: auto;

}

.options {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 5px;
}

.options>p {
   margin: 5px;
   border: 1px solid black;
   border-radius: 20px;
   background-color: gold;
   padding: 1em;
   text-align: center;
   cursor: pointer;
}

.digits {
   width: 75%;
   float: left;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 5px;
}

.digits>p:hover,
.operators>p:hover {
   background-color: dimgray;
}

.digits>p {
   margin: 5px;
   border: 1px solid black;
   border-radius: 50px;
   padding: 1em;
   text-align: center;
   cursor: pointer;
}

.zero {
   grid-column: 1/3;
}

.operators {
   width: 25%;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(4, 1fr);

}

.operators>p {
   margin: 5px 5px 10px 5px;
   border: 1px solid black;
   border-radius: 20px;
   padding: 1em;
   text-align: center;
   cursor: pointer;
}

.equal {
   margin-bottom: 5px;
   background-color: dodgerblue;
   grid-column: 1/3;
   grid-row: 3/5;
}