@import url(//fonts.googleapis.com/css?family=Roboto:400,300,300italic,700,500);

body {
  font-family: 'Roboto';
  font-size: 2em;
  font-weight: 100;
  height: 100%;
}

.container {
  margin: 0 17%;
}

h1 {
  font-size: 3em;
  text-align: center;
}

select, input {
  vertical-align: middle;
  margin-bottom: 4px;
}

select {
  margin-right: -2px;
}

@media (max-width: 650px) {
  body {
    font-size: 1.5em;
    margin: 0 5%;
  }
  h1 { font-size: 2em; }
}

input {
  border-radius: 6px;
  font-size: 0.75em;
  padding: 3px;
  vertical-align: middle;
  border: none;
  font-weight: 700;
  width: 65px;
  margin-right: -10px;
}

input:focus {
  outline: 0;
}

#cups, #caffeine {
  font-weight: 700;
}

@import url(//fonts.googleapis.com/css?family=Roboto:400,300,300italic,700,500);

body {
  font-family: 'Roboto';
  font-size: 2em;
  font-weight: 100;
  height: 100%;
}

.container {
  margin: 0 17%;
}

h1 {
  font-size: 3em;
  text-align: center;
}

select, input {
  vertical-align: middle;
  margin-bottom: 4px;
}

select {
  margin-right: -2px;
}

@media (max-width: 650px) {
  body {
    font-size: 1.5em;
    margin: 0 1%;
  }
  h1 { font-size: 2em; }
}

input {
  border-radius: 6px;
  font-size: 0.75em;
  padding: 3px;
  vertical-align: middle;
  border: none;
  font-weight: 700;
  width: 65px;
  margin-right: -10px;
}

input:focus {
  outline: 0;
}

#cups, #caffeine {
  font-weight: 700;
}

Make the margin even smaller on mobiles.
Make the margin even smaller on mobiles.
