/* Styling for the body */
body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("./Images/loading.png") center center/cover;
  backdrop-filter: blur(5px);
}

/* @media (min-width: 381px) and (max-width: 500px) {
  body {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url("./Images/loading.png") -1500 center;
  }
} */

@media (max-width: 751px) {
  body {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url("./Images/loading.png") 150vw center/cover;
  }
}

@media (max-width: 551px) {
  body {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url("./Images/loading.png") 160vw center/cover;
  }
}

@media (max-width: 451px) {
  body {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url("./Images/loading.png") 190vw center/cover;
  }
}

@media (max-width: 401px) {
  body {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url("./Images/loading.png") 210vw center/cover;
  }
}

@media (max-width: 351px) {
  body {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url("./Images/loading.png") 220vw center/cover;
  }
}

@media (max-width: 301px) {
  body {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url("./Images/loading.png") 240vw center/cover;
  }
}

/* Styling for the HTML */
html {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Styling for the background container */
.bg {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Styling for the loader container */
.loader {
  width: 100px;
  height: 100px;
}