@import url("https://fonts.googleapis.com/css?family=Fira+Mono&display=swap");*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#e9e9e9;font-family:"Fira Mono";font-size:20px}body{height:100vh;width:100vw;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.header{font-size:2rem;margin-bottom:30px;text-shadow:-1px -1px 2px #fff,2px 2px 2px rgba(0,0,0,0.4);color:#ff652f}main{-webkit-box-shadow:-6px -6px 9px #fff,6px 6px 9px rgba(0,0,0,0.4);box-shadow:-6px -6px 9px #fff,6px 6px 9px rgba(0,0,0,0.4);padding:2rem;border-radius:30px}main input,main button{outline:none}main input::-webkit-outer-spin-button,main input::-webkit-inner-spin-button{-webkit-appearance:none}main input{-webkit-box-shadow:inset -6px -6px 9px #fff,inset 6px 6px 9px rgba(0,0,0,0.4);box-shadow:inset -6px -6px 9px #fff,inset 6px 6px 9px rgba(0,0,0,0.4);width:320px;height:60px;padding:16px 32px;text-align:right;border:none;text-shadow:-1px -1px 2px #fff,2px 2px 2px rgba(0,0,0,0.4)}main .keys{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4, 1fr);grid-gap:0.8rem;margin-top:20px}main button{-webkit-box-shadow:-6px -6px 9px #fff,6px 6px 9px rgba(0,0,0,0.4);box-shadow:-6px -6px 9px #fff,6px 6px 9px rgba(0,0,0,0.4);width:60px;height:60px;border:none;cursor:pointer;background:#e9e9e9}main button:hover,main button:active{background-color:#ccc}main button:active{-webkit-box-shadow:inset -6px -6px 9px #fff,inset 6px 6px 9px rgba(0,0,0,0.4);box-shadow:inset -6px -6px 9px #fff,inset 6px 6px 9px rgba(0,0,0,0.4)}main .op__key,main .eq__key{color:#ff652f}