body {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
}

.main-container {
  position: relative;
  /* display: flex;
  justify-content: center;
  align-items: end; */
  width: 100%;
  height: 100%;
  background-color: #e9e9e2;
  margin-bottom: 100;
  /* flex-direction: column; */
  /* background-image: url("./BgSplashWeb.png");
  background-repeat: no-repeat no-repeat; */
}

.bgImage {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #e9e9e2;
  background-image: url("./BgSplashWeb.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  justify-content: center;
}

.bgImageInitial {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("./BgSplashWeb.png");
  height: 100vh; /* Full height */
  width: 100vw; /* Full width */
  background-color: #e9e9e2; /* Background color to contrast video */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  justify-content: center;
}

#loadingVideo {
  width: 30%; /* Adjust as necessary */
  height: 30%; /* Maintain aspect ratio */
}

#canvas {
  width: 30%; /* Adjust as necessary */
  height: 30%; /* Maintain aspect ratio */
}

@media screen and (min-width: 700px) and (max-width: 1366px) and (orientation: landscape) {
  .bgImage {
    background-image: url("./BgSplashWeb.png");
  }
}

@media screen and (min-width: 700px) and (max-width: 1024px) {
  .bgImage {
    background-image: url("./BgSplashTab.png");
    background-repeat: no-repeat no-repeat;
    background-size: 100% !important;
  }
}

@media screen and (max-width: 700px) {
  .bgImage {
    background-image: url("./BgSplashMobile.png");
    background-repeat: no-repeat no-repeat;
    background-size: 100% !important;
  }
}