body {
  padding: 20px;
  background: blue;
}

.search {
  float: right;
  position: absolute;
  top: 20px;
  right: 20px;
}

.save-box {
  margin-top: 20px;
}

.new {
  position: absolute;
  top: 20px;
  left: 20px;
  margin-top: 20px;
}

.item_row {
  margin-top: 20px;
}

.boxes {
  padding-top: 20px;
}

/*.existing-box span {
  font-size: 2em;
}
*/

/* Smartphones (portrait and landscape) ----------- */
@media only screen
    and (min-device-width: 375px)
    and (min-device-height: 812px)
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: portrait) {
    /* styles */
    body {
      font-size: 3em !important;
    }
    .search input {
      display:block;
    }
    .search-boxes {
      float:right;
    }
    .boxes {
      padding-top: 120px;
    }
    .add_item .remove_item {
      font-size: 2em !important;
    }
    .item_name {
      width: 50%;
    }

}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */