html {
  font-size: 10px;
  /* We have Fira Sans as default font in real device. But it isn't default in
   * browser. That's the main reason this line is here.*/
  font-family: "Fira Sans";
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: white;
}

a {
  outline: 0;
}

a:hover, a:active, a:focus {
  outline: 0;
}

section {
  font-size: 1.6rem;
}

#main-section {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#app-deck-grid-view-container {
  width: 100%;
  height: calc(100% - 46.6rem);
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: #e0e0e0;
}

#app-deck-grid-view {
  /* top = (6 - 5.8)rem */
  padding: 0.2rem 14.2rem 0;
  height: 100%;
  overflow: hidden;
  scroll-behavior: smooth;
}

#app-deck-grid-view:after {
  content: "";
  display: block;
  /* app-deck-grid-view has padding-top 0.2rem, and the buttons in the first row
     have margin-top 5.8rem, so app-deck-grid-view bottom should have height
     5.8 + 0.2 - 2.9(button margin-bottom) = 3.1rem */
  height: 3.1rem;
}

smart-button[type="app-button"] {
  width: 18rem;
  height: 18rem;
  background-color: transparent;
  background-repeat: no-repeat;
  margin: 5.8rem 2.6rem 2.9rem 2.6rem;
  background-size: 100% auto;
}

/** we use :after as label */
smart-button[type="app-button"]:after {
  width: 18rem;
  height: 5rem;
  font-size: 1.6rem;
}