/* style.css */
body { font-family: Arial, sans-serif; margin: 20px; }
h1 { color: #2c3e50; text-align: center; }
.calculator { margin-top: 20px; padding: 10px; border: 1px solid #ccc; width: 320px; margin-left:auto; margin-right:auto; }
input { width: 100%; padding: 5px; margin: 5px 0; }
button { width: 100%; padding: 10px; margin-top: 10px; background-color: #27ae60; color: white; border: none; cursor: pointer; }
button:hover { background-color: #2ecc71; }
p.result { background-color: #ededed; padding: 10px; margin-top:10px; }
a.home-btn {
  display: block;
  text-align: center;
  margin-top: 20px;
  padding: 10px;
  width: 150px;
  margin-left:auto;
  margin-right:auto;
  background-color: #2980b9;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}
a.home-btn:hover { background-color: #3498db; }

/* Add nav hover styles here too */
nav {
  text-align: center;
  margin-top: 15px;
}
nav a {

  text-decoration: underline;
  margin: 0 5px;
  color: #2980b9;
  transition: color 0.3s;
}
nav a:hover {
  color: #2c3e50;
  text-decoration: none;
}