*{box-sizing:border-box}html{font-size:16px}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#1c191c;color:#fff}.app-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;padding:2rem}.app-container h1{margin-bottom:2rem;text-align:center}.calculator{width:320px;background:#4d4d4d;border-radius:4px;box-shadow:0 0 20px #00000080;overflow:hidden}.calculator-display{background:#000;color:#fff;font-size:2.5rem;padding:1rem;text-align:right;font-family:Digital,sans-serif;height:70px;border-bottom:1px solid #666;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.calculator-keypad{display:flex}.input-keys{width:75%}.function-keys{display:flex}.digit-keys{display:flex;flex-wrap:wrap}.operator-keys{width:25%;display:flex;flex-direction:column}.key{height:64px;font-size:1.8rem;border:none;background:none;color:#fff;border-top:1px solid #666;border-right:1px solid #666;margin-right:-1px;margin-top:-1px;cursor:pointer;transition:background-color .2s}.key:hover{background-color:#ffffff1a}.key:active{background-color:#fff3}.function-keys .key{background-color:#c73434;width:100%}.function-keys .key:hover{background-color:#9f2929}.function-keys .key:active{background-color:#761f1f}.digit-keys .key{background-color:#525252;width:33.33%}.digit-keys .key:hover{background-color:#6c6c6c}.digit-keys .key:active{background-color:#858585}.digit-keys .key#zero{width:66.66%}.operator-keys .key{background-color:#f99820}.operator-keys .key:hover{background-color:#faaf52}.operator-keys .key:active{background-color:#fcc683}@media (max-width: 480px){.calculator{width:100%;max-width:320px}.calculator-display{font-size:2rem}.key{height:54px;font-size:1.5rem}}