body {
  border: 0px solid green;
  padding: 0px;
  margin: 0px;
}

.tot {
  grid-area: tot;
  position: sticky;
  top: 0;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  flex: 1;
  display: flex;
  justify-content: center;
  border: 0px solid #555;
  box-sizing: border-box;
  display: block;
}

/*************
  BACKGROUND
**************/

#background {
  position: relative;
  left: 0%;
  top : 0%;
  background-color: transparent;
  width : 100%;
  height : 100%;
}

#backgroundImage {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

#backgroundFrame {
  position: absolute;
  background-color: transparent;
  width: 100%;
  height: 100%;
  bottom: 0%;
  left: 0%;
  object-fit: fill;
}

/*****************
      TITLE
*****************/

#titlesContainer {
  position: absolute;
  left: 30%;
  top : 45%;
  background-color: transparent;
  width : 50%;
  height : 15%;
  opacity: 1;
}

/*****************
  MODEL VIEWERS
*****************/

.modelViewer {
  position: absolute;
  background-color: transparent;
  width: 100%;
  height: 100%;
  left: 3%;
  top: 0%;
}

model-viewer {
  --poster-color: #FFFFFF00;
  position: absolute;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.posterImage {
  position: absolute;
  background-color: transparent;
  width: 90%;
  height: 90%;
  opacity: 1;
  object-fit: contain;
}

button {
  background-color: red;
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
}

.img-container {
  background-color: red;
  text-align: center;
  display: block;
}

/***************
    BULLETS
***************/

#button {

  position: relative;
  background-color: transparent;
  left: 40%;
  top: 80%;
  width: 12%;
  height: 12%;
}

#buttonBackground {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  object-fit: contain;
}