body {
  background: url(../img/food2.jpg) no-repeat center center/cover;
}

form {
  font-size: 1.3rem;
  background-color: rgba(0, 0, 0, 0.3);
}

label {
  display: inline-block;
  width: 90px;
}

label[for=result] {
  display: inline-block;
  width: 100%;
}

input {
  outline: none;
  border: none;
}

input[type=number] {
  width: 20%;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  padding-right: 3px;
}

input[type=button] {
  transform: translateX(50%);
}

@media screen and (min-width: 768px) {
  form {
    width: 60%;
  }

  input[type=button] {
    transform: translateX(100%);
  }

  input[type=number] {
    width: 30%;
  }
}
@media screen and (min-width: 1024px) {
  form {
    width: 40%;
  }

  input[type=button] {
    transform: translateX(100%);
  }

  input[type=number] {
    width: 50%;
  }
}

/*# sourceMappingURL=style.css.map */