@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
* {
   margin: 0;
   padding: 0;
   font-family: "Poppins", sans-serif;
   box-sizing: border-box;
}

.container {
   width: 100%;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fca311;
}

.calculator {
   width: 25rem;
   height: 35rem;
   margin-top: 3rem;
   margin-bottom: 3rem;
   background: white;
   padding: 2rem;
   border-radius: 1.5rem;
   box-shadow: -0.4rem -0.4rem 1.5rem rgba(0, 0, 0, 0.7),
      0.4rem 0.4rem 1.5rem rgba(0, 0, 0, 0.5);
}

.calculator form input {
   border: 0;
   outline: 0;
   width: 4rem;
   height: 4rem;
   border-radius: 1.2rem;
   box-shadow: -0.5rem -0.5rem 1rem rgba(0, 0, 0, 0.5),
      0.3rem 0.3rem 1rem rgba(0, 0, 0, 0.2);
   background: transparent;
   font-size: 1.7rem;
   font-weight: 600;
   color: black;
   cursor: pointer;
   margin: 0.5rem;
}

form .display {
   display: flex;
   justify-content: flex-end;
   margin: 0.5rem 0;
}

form .display input {
   width: 20rem;
   color: black;
   font-weight: 600;
   background: white;
   padding: 1rem;
   text-align: right;
   font-size: 2.5rem;
}

form input.equal {
   width: 9.3rem;
   color: white;
   background: #fca311;
}
html {
   font-size: 100%;
}

form input.operator {
   background: #6c757d;
   color: white;
}

@media all and (max-width: 768px) {
   html {
      font-size: 80%;
   }
}