style.css

body {background-color:black;
    font-family: Arial, Helvetica, sans-serif;
}
h1{color:#808080;
font-weight: bold;
text-align: center;
}

#box{
    background-color: white;
    width:  600px;
    padding:20px;
    margin: 0px auto;
    border-radius: 25px;
}

#rate{
    width: 181px;
}
#years{
    width: 70px;
}
 
#form{
   
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px;
    width: 400px;
    margin-left:100px;
}

#form label, #form  button {
    grid-column: 1 / 2;
  }

  #form input,  .input {
    grid-column: 2 / 3;
  }
  
  #result{
      grid-column: 1/3;
  }
 

#footer{
    margin-top:10px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
 
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

span.highlight{
    background-color: yellow;
}