@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
html {
  min-height: calc(100% + env(safe-area-inset-top));
}
* {
  margin: 0;
  font-family: "Roboto", sans-serif;
  accent-color: rgb(97 218 251);
}
.screen-content {
  overflow: hidden !important;
}
body {
  overscroll-behavior: none;
}
div.app {
  width: 100vw;
  height: 100vh;
}
div.screen-fallback::before {
  position: absolute;
  text-align: center;
  display: flex;
  top: 0;
  left: 0;
  padding: calc(env(safe-area-inset-top) * 1.25) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  width: 100vw;
  height: calc(64px - env(safe-area-inset-top));
  background-color: rgba(254, 226, 85);
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 1.5em;
}
div.details.screen-fallback::before {
  content: "Details";
  opacity: 0;
}
div.details.screen-fallback img:empty {
  background-color: #efefef;
  color: transparent;
}
div.tiles.screen-fallback::before {
  content: "Tiles Demo";
}
div.cards.screen-fallback::before {
  content: "Cards Demo";
}
div.cards-2.screen-fallback::before {
  content: "Cards Demo 2";
}
div.home.screen-fallback::before {
  content: "React Motion Router";
}
div.not-found.screen-fallback::before {
  content: "Not Found";
}
div.screen-fallback {
  background-color: white;
  width: 100vw;
  height: 100vh;
  position: absolute;
}
div.screen-fallback.home {
  background-color: #efefef;
}
div.screen-fallback.slides {
  background-color: rgb(34, 34, 34);
}
div.screen-fallback.overlays {
  background-color: white;
}
div.screen-fallback.modal {
  background-color: rgba(0, 0, 0, 0);
}
meta[name="theme-color"] {
  transition: 3s ease;
}