/* CSS Basic */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    font-family: monospace;
    outline: none;
    border: none;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #231F20;
    overflow: hidden;
}


/* Canvas and BabylonJS Properties */

#renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
    z-index: 999;
    opacity: 0;
}

#renderCanvas:focus {
    cursor: none;
}

#renderCanvas:hover {
    cursor: none;
}

#babylonVRiconbtn {
    border-radius: 12px;
    opacity: 1;
    background-color: #999999;
    background-size: 70%;
}

#babylonVRiconbtn:hover {
    transform: scale(1.05);
    background-color: #2A9293;
}


/* Loading Animation */

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
}
  
.anim {
  margin: 0 15px;
  width: 35px;
  height: 15px;
  border-radius: 8px;
  background: #2A9293;
  box-shadow: 0 0 10px 0 #FECDFF;
}

.first {
  margin-right: -18px;
  transform-origin: center left;
  animation: spin 3s linear infinite;  
}

.second {
  transform-origin: center right;
  animation: spin2 3s linear infinite;
  animation-delay: .2s;
}

.third {
  transform-origin: center right;
  animation: spin3 3s linear infinite;
  animation-delay: .3s;
}

.fourth {
  transform-origin: center right;
  animation: spin4 3s linear infinite;
  animation-delay: .4s;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(360deg);
  }
  30% {
    transform: rotate(370deg);
  }
  35% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
  
@keyframes spin2 {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-180deg);
  }
  35% {
    transform: rotate(-190deg);
  }
  40% {
    transform: rotate(-180deg);
  }
  78% {
    transform: rotate(-180deg);
  }
  95% {
    transform: rotate(-360deg);
  }
  98% {
    transform: rotate(-370deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes spin3 {
  0% {
    transform: rotate(0deg);
  }
  27% {
    transform: rotate(0deg);  
  }
  40% {
    transform: rotate(180deg);
  }
  45% {
    transform: rotate(190deg);
  }
  50% {
    transform: rotate(180deg);
  }
  62% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(360deg);
  }
  80% {
    transform: rotate(370deg);
  }
  85% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin4 {
  0% {
    transform: rotate(0deg);
  }
  38% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(-360deg);
  }
  65% {
    transform: rotate(-370deg);
  }
  75% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}


/* MVR Image Properties */

#mvr {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20%;
    z-index: 999;
    transition: all 0.1s;
}