body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
  background-color: #4CAF50;
  color: white;
  padding: 20px;
}

.container {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

.d-flex {
  display: flex;
  justify-content: center;
}

.form-group label {
  display: block;
  font-size: 20px;
  margin-bottom: 10px;
  text-align: center;
}

.form-group input[type="text"] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid #4CAF50;
  text-align: center;
}

.d-flex button {
    display:inline-block; 
    padding:10px 20px; 
    margin:0px; 
    font-size:18px; 
    font-weight:bold; 
    text-align:center; 
    color:#fff; 
    background-color:#007bff; 
    border:none; 
    border-radius:5px; 
    cursor:pointer; 
}

#calculate-button {
    background-color:#007bff; 
	margin: 0 5px;
}

#calculate-button:hover {
    background-color:#0069d9; 
}

#reset-button {
    background-color:#dc3545;
	margin: 0 5px;
}

#reset-button:hover {
    background-color:#C62828; 
}

.result {
    font-size:24px; 
    font-weight:bold; 
    text-align:center; 
}
.result span {
  padding-left: 5px;
}