/* Keep the canvas opaque before the application styles load in wallet WebViews. */
html,
body {
  background-color: #0a0118;
}

#home-hero-prepaint {
  display: none;
}

/* Override reset.css's viewport height so the dark body covers the full home page. */
html[data-home-entry='true'] body {
  height: auto;
  min-height: 100vh;
}

html[data-home-entry='true'] #root {
  position: relative;
  background: transparent;
}

html[data-home-entry='true'] #home-hero-prepaint {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 898px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

html[data-home-entry='true'] #home-hero-prepaint > img {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1920px;
  max-width: none;
  height: 898px;
  transform: translateX(-50%);
  pointer-events: none;
}

@media screen and (min-width: 900px) {
  html[data-home-entry='true'] #home-hero-prepaint {
    min-width: 1280px;
  }
}

@media screen and (min-width: 900px) and (max-width: 1511px) {
  html[data-home-entry='true'] #home-hero-prepaint {
    height: 775px;
  }

  html[data-home-entry='true'] #home-hero-prepaint > img {
    width: 1440px;
    height: 775px;
  }
}

@media screen and (max-width: 899px) {
  html[data-home-entry='true'] #home-hero-prepaint {
    height: 500px;
  }

  html[data-home-entry='true'] #home-hero-prepaint > img {
    top: 50px;
    width: 375px;
    height: 450px;
  }
}