html, body {
    overflow: auto;
  }
  body {
    width: 100vw;
    height: 100vh;
    background-image: url(640.webp);
    background-repeat:  no-repeat;
    background-position: center center;
    background-size: contain;
    background-attachment: fixed;
  }
  @media (orientation: portrait),
         (-webkit-min-device-pixel-ratio: 1.5),
         (min-resolution: 144dpi) {
    
    body {
      background-image: url(1280.webp);
    }
  }
  @media (min-width: 640px) and (orientation: landscape) {
    body {
      background-image: url(1280.webp);
    }
  }
  @media (min-width: 640px) and (orientation: portrait) {
    body {
      background-image: url(2560.webp);
    }
  }
  @media (min-width: 640px) and (-webkit-min-device-pixel-ratio: 1.5),
         (min-width: 640px) and (min-resolution: 144dpi) {
    
    body {
      background-image: url(2560.webp);
    }
  }
  @media (min-width: 1280px)  and (orientation: landscape) {
    body {
      background-image: url(2560.webp);
    }
  }
  @media (min-width: 1280px)  and (orientation: portrait) {
    body {
      background-image: url(5210.webp);
    }
  }
  @media (min-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5),
         (min-width: 1280px) and (min-resolution: 144dpi) {
    
    body {
      background-image: url(5210.webp);
    }
  }
  @media (min-width: 2560px)  and (orientation: landscape) {
    body {
      background-image: url(5210.webp);
    }
  }