* {margin:0;box-sizing: border-box;}

html, body {
height:100vh;
width:auto;
  overflow:hidden;
  margin:0;
  padding:0;
}
#renderCanvas {
  display:block;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  user-select: none;
  z-index: 1
 
}

span {color:white}

#coverImage {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  height: 100%;
  width: 177.77777778vh; /* 100 * 16 / 9 */
  min-width: 100%;
  min-height: 56.25vw; /* 100 * 9 / 16 */
  transition: opacity 2s;
}

#loader_container {
  position: absolute;
  z-index: 7;
  left: 0;
  right: 0;
  top: 70%;
  bottom: 0;
  margin: 0 auto;
  width: 300px;
  text-align: center;
  padding-top: 50px;
}
#bar_container {
  height: 24px;
  background: #dcdbd7;
  border-radius: 20px;
  border-top: 1px solid #cfcec9;
  border-bottom: 1px solid #f7f6f4;
  box-shadow: 0 -1px 0 #bab9b4;
  margin-bottom: 24px;
  position: relative;
  transition: opacity 2s;
}
#progress_bar {
  background-color: #dcf1c6;
  background-image: -webkit-gradient(
    linear,
    center top,
    center bottom,
    color-stop(0%, #9fbff4),
    color-stop(100%, #555bb4)
  );
  background-image: -webkit-linear-gradient(top, #9fbff4 0%, #555bb4 100%);
  background-image: -moz-linear-gradient(top, #9fbff4 0%, #555bb4 100%);
  background-image: -ms-linear-gradient(top, #9fbff4 0%, #555bb4 100%);
  background-image: -o-linear-gradient(top, #9fbff4 0%, #555bb4 100%);
  background-image: linear-gradient(to bottom, #9fbff4 0%, #555bb4 100%);
  height: 110%;
  position: absolute;
  top: -3px;
  left: 0px;
  border-top: 1px solid #e5ebf4;
  border-radius: 20px;
  box-shadow: 0 3px 10px #717171;
  width: 10%;
  transition: width 0.1s ease-in-out;
}


/* Loader 2 */
.loader-2 {
  display: block;
  margin: 10px auto;
  height: 32px;
  width: 32px;
  -webkit-animation: loader-2-1 3s linear infinite;
  animation: loader-2-1 3s linear infinite;
}
@-webkit-keyframes loader-2-1 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes loader-2-1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loader-2 span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 32px;
  width: 32px;
  clip: rect(16px, 32px, 32px, 0);
  -webkit-animation: loader-2-2 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  animation: loader-2-2 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@-webkit-keyframes loader-2-2 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes loader-2-2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loader-2 span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 32px;
  width: 32px;
  border: 3px solid transparent;
  border-top: 3px solid blue;
  border-radius: 50%;
  -webkit-animation: loader-2-3 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  animation: loader-2-3 1.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}
@-webkit-keyframes loader-2-3 {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes loader-2-3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loader-2 span::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 32px;
  width: 32px;
  border: 3px solid rgba(22, 55, 75, 0.5);
  border-radius: 50%;
}

*:before,
*:after {
  box-sizing: border-box;
}