body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  background-color: black; /* the background color of your page (if you do not use skybox map*/
}

a:link {
  text-decoration: none;
  color: white;
}

a:visited {
  text-decoration: none;
  color: white;
}

a:hover {
  text-decoration: none;
  color: yellow;
}

a:active {
  text-decoration: none;
  color: yellow;
}

hr {
  border-top: 0px solid white;
}

model-viewer {
  width: 100vw;
  height: 100vh;
  position: absolute;
  right: 0px;
  background-color: unset;
}

#ar-button {
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  background-color: unset;

  position: absolute;
  margin-top: 30px;
  margin-right: 30px;

  top: 0;
  right: 0;

  white-space: normal;

  height: 60px;
  width: 60px;
  border-radius: 0px;
  border: 0px solid white;
}

#ar-button:active {
  opacity: 0.2;
}

/*===============QR CODE===============*/

canvas {
  position: absolute;
  position: absolute;
  margin-top: 30px;
  margin-right: 30px;

  top: 0;
  right: 0;

  height: 60px;
  width: 60px;

  opacity: 1;
}

/*===============RESPONSIVE===============*/

/* On screens that are 800px or more*/
@media screen and (min-width: 800px) {
  .custom-model-main:before {
    content: "";
    display: inline-block;
    height: auto;
    vertical-align: middle;
    margin-right: -0px;
    height: 100%;
  }
}

/* On screens that are 600px or less */
@media screen and (max-width: 600px) {
  canvas {
    display: none;
    pointer-events: none;
  }

  /* model-viewer {
    width: 100%;
    height: 88vh;
  }

  .custom-model-inner {
    margin-top: 45px;
  } */
}