@import "normalize.css/normalize.css";
@import "./material/theme.css";

:root {
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-left: env(safe-area-inset-left);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  --safe-area-inset-right: env(safe-area-inset-right);
  background-color: var(--tutu-color-surface, transparent);
}

/*
Fix the bottom gap on iOS standalone.
https://stackoverflow.com/questions/66005655/pwa-ios-child-of-body-not-taking-100-height-gap-on-bottom
*/
@media screen and (display-mode: standalone) {
  body {
    width: 100%;
    height: 100vh;
  }

  #root {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
  }
}

.custom-emoji {
  width: 1em;
}

h1 {
  margin: 0;
}