html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  height: 100vh;
  width: 100vw;
  background: url('./1920x1080.jpg') no-repeat center center;
  background-size: cover;
  min-height: 100vh;
}

/* Tablet and Large Tablets */
@media (max-width: 1440px) and (min-width: 1025px) {
  body {
    background-image: url('./1440x1024.jpg');
  }
}
@media (max-width: 1280px) and (min-width: 1025px) {
  body {
    background-image: url('1280x720.jpg');
  }
}

/* Tablet Portrait Large */
@media (max-width: 1536px) and (min-width: 1201px) and (orientation: portrait) {
  body {
    background-image: url('1536x2048.jpg');
  }
}
@media (max-width: 1200px) and (min-width: 1025px) and (orientation: portrait) {
  body {
    background-image: url('1200x1920.jpg');
  }
}

/* Mobile Devices */
@media (max-width: 1080px) and (min-width: 701px) {
  body {
    background-image: url('1080x1920.jpg');
  }
}
@media (max-width: 750px) and (min-width: 376px) {
  body {
    background-image: url('750x1334.jpg');
  }
}
@media (max-width: 375px) {
  body {
    background-image: url('375x667.jpg');
  }
}