body {
  margin: 0;
  font-family: 'Lato', sans-serif;
  overflow: hidden;
  background: gray;
}
canvas {
    background: #444;
    image-rendering: optimizeSpeed;             /* Older versions of FF          */
    image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
    image-rendering: -webkit-optimize-contrast; /* Safari                        */
    image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
    image-rendering: pixelated;                 /* Awesome future-browsers       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE                            */
    display: block;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#warning-container {
  background: white;
}
#canvas-overlay {
	position: absolute;
	height: 100%;
	width: 100%;
	/* text-align: center; */
	z-index: 100;
	display:block;
  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
  touch-action: none;
}
#fps-display {
  color: red;
  /* left: 0px; */
  /* position: absolute; */
}
.ui-label {
  color: white;
}
#start-menu{
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Lato', sans-serif;
  color: white;

}
.fade-in {
  animation-name: fadeIn;
  animation-duration: 4s;
}
#start-button:hover {
  animation-name: enlarge;
  animation-duration: 1s;
  transform: scale(1.2);
}
.fade-out {
  visibility: hidden;
  display: none;
  animation-name: fadeOut;
  animation-duration: 1s;
}
@keyframes fadeOut {
  from {
    color: white;
    display: block;
    visibility: visible;
  }
  to {
    visibility: hidden;
    color: #00000000;
  }
}
@keyframes fadeIn {
  from {
    transform: translate(-50%,-100%);
    color: #00000000;
  }
  to {
    color: #ffffffff;
    transform: translate(-50%,-50%);
  }
}
@keyframes enlarge {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}
#text-log {
  background: #00000033;

  position: absolute;
  text-align: left;
  left: 0%;
  bottom: 2%;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  color: white;
  /* background: #44444444;   */
  width: 300px;
  max-height: 100px;
  margin-bottom: 0;
  /* display: flex; */
  /* flex-direction: column-reverse; */
  overflow-y: scroll;
  padding-right: 0px; /* Increase/decrease this value for cross-browser compatibility */
  box-sizing: content-box; /* So the width will be 100% + 17px */
}
#text-log::-webkit-scrollbar {
  width: 0px;
}
#gc {
  display: block;
  margin: 0;
  position: absolute;
  z-index: 1000;
  /* top: 50%; */
  /* left: 50%; */
  /* transform: translate(-50%, -50%); */
 
}