*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background-color:#f8f8f8;padding:20px}form{background-color:#fff;padding:20px;border-radius:5px;box-shadow:0 0 10px rgb(0 0 0 / .1);max-width:600px;margin:0 auto}label{display:block;margin-bottom:5px}input[type=number],input[type=button]{width:100%;padding:8px;margin-bottom:10px;border-radius:3px;border:1px solid #ccc}input[type=button]{background-color:#4caf50;color:#fff;cursor:pointer}input[type=button]:hover{background-color:#45a049}#result{margin-top:20px}h2{margin-bottom:10px}h3{margin-top:20px}p{margin-bottom:5px}@media screen and (max-width:768px){form{padding:15px}input[type=number],input[type=button]{padding:6px}h2{font-size:1.2em}h3{font-size:1.1em}}@media screen and (max-width:480px){form{padding:10px}input[type=number],input[type=button]{padding:5px;font-size:.9em}h2{font-size:1em}h3{font-size:.9em}}