body{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
}

h1 {
    padding: 10px;
    margin: 0;
}

.editor{
    float: left;
    width: 50%;
    height: 90%;
}
.editor textarea{
    width: 90%;
}

.preview{
    float: right;
    width: 50%;
    height: 90%;
}

header{
    width: 100%;
    height: 10%;
    text-align: center;
}

#preview\.threejs{
    width: 100%;
    height: 100%;
    z-index: 0;
}

.gui-wrap {
  position: absolute;
  top: 10%;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.gui-wrap > .main {
  pointer-events: all;
  max-height: 100%;
  overflow: auto;
}


.spinner,
.spinner:after {
  box-sizing: border-box;
}
.spinner {
  position: absolute;

  color: white;
    background-color: rgba(0, 0, 0, 0.80);

  top: 10%;
  right: 0;
  padding: 20% 25% 0 25%;

  display: inline-block;
  width: 50%;
  height: 90%;
}
.spinner:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6.4px solid currentColor;
  border-color: currentColor transparent currentColor transparent;
  animation: spinner 1.2s linear infinite;
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}