body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f7f7f7; font-family: Arial, sans-serif; } .calculator { border: 1px solid #ccc; border-radius: 5px; width: 300px; padding: 20px; box-shadow: 0px 0px 10px 0px #0000001a; background-color: white; } .calculator h2 { text-align: center; margin-bottom: 20px; } .calculator label { display: block; margin-top: 10px; } .calculator-input { width: 100%; height: 40px; padding: 5px; margin-top: 5px; margin-bottom: 20px; font-size: 1em; } .calculate-button { width: 100%; height: 40px; background-color: #34c759; color: white; border: none; font-size: 1.2em; cursor: pointer; } .result { margin-top: 20px; text-align: center; } .result h3 { margin: 0; }