html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #f1f3f4;
}

html.dark-theme {
  background: #222222;
}

.surface {
  box-sizing: border-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  min-height: 100%;
  padding-bottom: 3em;
  flex-direction: column;
  justify-content: center;
  z-index: 10;
}

@media (min-width: 800px) {
  .mock-browser {
    width: 100%;
    background: #dee1e6;
    flex-shrink: 0;
  }

  html.dark-theme .mock-browser {
    background: #202123;
  }

  .mock-browser-content {
    position: relative;
    z-index: 1;
    background: #fff;
    margin-top: -1px;
  }

  .chrome-tabs-optional-shadow-below-bottom-bar {
    z-index: 2;
  }

  html.dark-theme .mock-browser-content {
    background: #252729;
  }
}


@media (max-width: 799px) {
  html {
    background: #fff;
  }

  html.dark-theme {
    background: #252729;
  }

  .mock-browser .chrome-tabs {
    border-radius: 0;
  }
}

@supports (-webkit-overflow-scrolling: touch) {
  /* Prevent double tap to zoom on iOS https://stackoverflow.com/a/47131647 */
  button {
    touch-action: manipulation;
  }
}
