*{margin:0;padding:0;box-sizing:border-box}

:root{
  --azul:#007bff;
  --azul-hover:#0056b3;
  --cinza:#f4f4f9;
  --cinza-caixa:#f9f9f9;
  --borda:#ccc;
  --txt:#333;
  --sombra:rgba(0,0,0,.1)
}

body{
  font-family:Arial,Helvetica,sans-serif;
  background:var(--cinza);
  color:var(--txt);
  display:flex;
  justify-content:center;
  padding:2rem 1rem;
  min-height:100vh;
}

.container{
  width:100%;
  max-width:680px;
  background:#fff;
  border-radius:8px;
  padding:2rem 2.5rem;
  box-shadow:0 4px 8px var(--sombra);
}

h1{
  text-align:center;
  color:var(--azul);
  margin-bottom:1.8rem;
  font-size:1.5rem;
}

.form-group{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:1.5rem;
}

label{
  flex:0 0 100%;
  font-weight:600;
  margin-bottom:.3rem;
}

input[type="number"]{
  flex:1 1 250px;
  padding:.65rem .8rem;
  font-size:1rem;
  border:1px solid var(--borda);
  border-radius:5px;
}

button{
  flex:0 0 120px;
  padding:.65rem;
  background:var(--azul);
  border:none;
  color:#fff;
  border-radius:5px;
  cursor:pointer;
  font-size:1rem;
  transition:.25s;
}
button:hover{background:var(--azul-hover)}

#erro{
  display:none;
  color:#d13434;
  font-weight:600;
  margin:.5rem 0;
}

.resultados{
  margin-top:2rem;
  background:var(--cinza-caixa);
  padding:1.5rem;
  border-radius:6px;
  box-shadow:0 2px 4px var(--sombra);
}
.resultados h3{
  text-align:center;
  color:var(--azul);
  margin-bottom:1rem;
}
.resultados p{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid #e4e4e4;
  padding:.3rem 0;
}
.resultados p:last-child{border-bottom:none;}
.valor{font-weight:600}

footer{
  margin-top:2.5rem;
  padding:1rem;
  background:#f1f1f1;
  border-radius:5px;
  font-size:.85rem;
  text-align:justify;
}

@media(max-width:480px){
  h1{font-size:1.25rem}
  button{flex:1 1 100%}
}