body,
input {
    font: 16px/24px 'Karla', sans-serif;
    text-align: center;
}
body {
  padding-top: 2rem;
  background: rgb(248, 248, 248);
}

h1 {
  margin: .2rem 0;
}
small {
  opacity: .6;
}

main {
  width: 300px;
  display: flex;
  margin: 2rem auto 0;
  align-items: center;
}
aside {
  width: 40%;
}
output {
  width: 60%;
}

label {
  display: block;
}

input[type="number"] {
  width: 100%;
  line-height: 48px;
  font-size: 28px;
  border: 1px solid gray;
  border-radius: 5px;
  background: #fff;
  
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#article {
  text-align: left;
  padding: 10% 10% 1%;
}