html, body {
        margin: 0px;
        padding: 0px;
        font-size: 14px;
        font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir,
        helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial,
        sans-serif;
      }
      html, body {margin: 0; height: 100%; overflow: hidden}
      /* UI Buttons */

      .moveToButtonStyle {
        position: relative;
        padding: 0.4rem 0.8rem 0.4rem 0.8rem;
        background-color: #3c4448c5;
        color: #fff;
        margin-bottom: 0.5rem;
        transition: background-color 0.2s ease;
        transition: color 0.2s ease;
        border-right: solid 0.6rem #3c4448c5;
        transition: border-right 0.2s ease;
      }
      .topSpacing {
        margin-top: 1rem;
      }
      .iconButtonStyle {
        align-self: flex-end;
        height: 2.5rem;
        width: 2.5rem;
        background-color: #3c4448c5;
        cursor: pointer;
      }
      .gyromode {
        height: 2.5rem;
        width: 2.5rem;
        background-color: #3c4448c5;
        cursor: pointer;
      }
      .settings {
        height: 2.5rem;
        width: 2.5rem;
        background-color: #3c4448c5;
        cursor: pointer;
      }
      #innerfullscreen {
        height: 2.5rem;
        width: 2.5rem;
        background-image: url("../assets/UI/openfullscreen.svg");
        background-size: 65%;
        background-position: center center;
        background-repeat: no-repeat;
      }
      #gyromodeIcon {
        height: 2.5rem;
        width: 2.5rem;
        background-image: url("../assets/UI/gyroscope.svg");
        background-size: 50%;
        background-position: center center;
        background-repeat: no-repeat;
      }
      #settingsIcon {
        height: 2.5rem;
        width: 2.5rem;
        background-image: url("../assets/UI/settings.svg");
        background-size: 70%;
        background-position: center center;
        background-repeat: no-repeat;
      }

      .isfullscreen > #innerfullscreen {
        background-color: #b5db1f;
        background-image: url("../assets/UI/closefullscreen.svg");
      }
      .currentlyInGyroMode > #gyromodeIcon {
        background-image: url("../assets/UI/touch.svg");
        background-size: 70%;
      }

      #innerfullscreen:hover {
        background-size: 75%;
      }
      #gyromodeIcon:hover {
        background-size: 55%;
      }
      #settingsIcon:hover {
        background-size: 80%;
      }
      .currentlyInGyroMode > #gyromodeIcon:hover {
        background-size: 75%;
      }
      .isfullscreen > #innerfullscreen:hover {
        background-size: 60%;
      }
      .moveToButtonStyle:hover {
        cursor: pointer;
        border-right: solid 0.6rem #b5db1f;
        transition: border-right 0.2s ease;
        transition: color 0.2s ease;
      }
      .uiElementsWrapper {
        right: 1vh;
        top: 1vh;
        position: absolute;
        display: flex;
        flex-direction: column;
        z-index: 100;
      }
      .active {
        border-right: solid 0.6rem #b5db1f;
        background-color: #b5db1f;
        color: #3c4448c5;
        transition: background-color 1s ease;
        transition: color 1s ease;
      }
      .locked {
        cursor: not-allowed !important;
        color: #666 !important;
        border-right: solid 0.6rem #3c3c3c !important;
        background-color: #3c4448c5 !important;
        transition: color 1s ease;
      }
      .hide {
        display: none !important;
      }

      /* Render Canvas */
      #container canvas {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
      }
      #container {
        position: relative;
        width: 100vw;
        height: 100vh;
      }


      /* Loading Screen Wrapper*/
      #loadingScreen {
        z-index: 10001;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: #3c3c3c;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        opacity: 1;
        transition: opacity 0.5s linear;
      }

      /* top left green accent */
      #loadingScreen::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 112px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3Csvg width='112px' height='16px' viewBox='0 0 112 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' fill='%23B5DB1F' fill-rule='evenodd'%3E%3Cpolygon points='0 0 112 0 96 16 0 16'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");
      }

      /* Loading Screen Progressbar */
      #loadingProgressBar {
        position: relative;
        width: 90%;
        max-width: 500px;
        height: 50px;
        overflow: hidden;
      }
      .loadingProgressBarCorner {
        width: 26px;
        height: 26px;
        position: absolute;
        transform: rotate(45deg);
        background-color: #3c3c3c;
      }
      .topLeftCorner {
        left: -16px;
        top: -16px;
      }
      .bottomRightCorner {
        right: -16px;
        bottom: -16px;
      }
      #loadingProgressBarColor {
        position: absolute;
        height: 100%;
        width: 0%;
        background-color: #b5db1f;
        transition: width 0.5s linear;
      }
      #border {
        position: absolute;
        width: 100%;
        height: 100%;
      }
      #loadingProgressBarText {
        margin-top: 1rem;
        font-size: 1.5rem;
        color: #b5db1f;
        font-weight: bold;
      }