#root {
  min-height: 100vh;
  width: 100vw;
  /* max-width: 1350px; */
  display: flex;
  /* max-width: 1148px; */
  margin-left: auto;
  margin-right: auto;
}

#root::before {
  /* content: ' '; */
  position: absolute;
  min-height: 100vh;
  width: 100vw;
  display: flex;
  background-color: #000;
}

#background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow: visible;
  z-index: -10000;
  background-color: #ffb829;
}

#bgtest {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  background-image: url(/images/bg_house.png), url(/images/bg_house.png);
  background-position: 314px 202px, -641px 202px;
  background-size: 1226px 1308px;
  background-repeat: no-repeat;
  will-change: transform;
  transition: background-position 100ms;
  overflow: visible;
}

@media screen and (min-height: 1250px) {
  #bgtest {
    transition: none;
    background-position: 314px 260px, -641px 260px;
  }
}

@media screen and (min-width: 1450px) {
  #bgtest {
    background-position: 314px 260px, -641px 260px;
  }
}

@media screen and (min-width: 1500px) {
  #bgtest {
    background-position: calc(100% + 40px) 260px, calc(100% - 918px) 260px;
  }
}

@media screen and (min-width: 2044px) {
  #bgtest {
    /* background-position: 856px 260px, -102px 260px; */
    background-position: calc(50% + 446px) 260px, calc(50% - 510px) 260px;
  }
}

/* @media screen and (min-width: 1500px) {
  #root {
    position: absolute;
    max-width: 1350px;
    right: 540px;
  }
}

@media screen and (min-width: 2044px) {
  #root {
    position: initial;
    max-width: 1350px;
    margin: 0 auto;
  } */
/* } */
