body{
  background-color: black;  
  overflow: hidden;
  font-family: 'komtit';
  -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

#loading{
  position: absolute;
  top:0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(/img/logos/sword2.png);
  background-position-x: 50%;
  background-position-y: 50%;
  background-repeat: no-repeat;
  min-height: 100vh;
  animation-name: rotate;
  animation-duration:2s;
  animation-iteration-count:infinite;
  animation-timing-function:linear;  
}

@keyframes rotate {
  from {-webkit-transform:rotate(0deg);}
  to {  -webkit-transform:rotate(360deg);}
}

.guiContanier{
  position: fixed;
  z-index: 1;
  background: gray;
  padding: 5px;
  border: 2px solid black;
  opacity: 0.6;  
  filter: alpha(opacity=60); /* For IE8 and earlier */
}

.guiContanier:hover{
  opacity: 1;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

#chat{
  width: 20vw;
  min-width: 257px;
  bottom: 20px;
  left: 20px;
}

#chatOutput{
  margin-bottom: 5px;
  overflow-x: hidden;
  overflow-y: scroll;
  word-break: break-all;
  height: 20vh;
}


.output{
  width: 100%;      
  font-family: "oswald";
  font-size: 14px;
}

#score{
  width: 15vw;
  min-width: 144px;
  top: 20px;
  right: 20px;
}
#scoreOutput{
  height: auto;
  white-space: pre;
}

@media (max-width: 1000px) {
  .guiContanier {
    zoom: 0.5;
  }

  #score{
    width: 50vw;
  }
}