@font-face {
  font-family: OpenSans;
  src: url(fonts/OpenSans-Regular.ttf);
}

body {
  background: #333333;
}

div {
  background: #333333;
}

body, html, div
{
    margin: 0px;
    padding: 0px;
    color: white;
    font-family: OpenSans;
}
body,html
{
    width:100%;
}

body.error{
  background: maroon !important;
}

body.running
{
  overflow: hidden;
}

#setup
{
  user-select: none;
    margin: 0px;
    text-align: center;
}

.warning
{
  
}

#launcherLogo
{
  position: absolute;
}

/*******************
* Webgl loader bar *
*******************/

#launcherBar
{
  width: 800px;
  height: 30px;
  margin-left: -400px;
  top:50%;
  left: 50%;
  position: absolute;
  /** This needs to be calculated by demo resolution? */
  margin-top: 250px;
  
  background: white;
  border-radius: 0px;
}

#launcherBarText
{
  text-align: center;
  width: 800px;
  height: 30px;
  margin-left: -400px;
  top:50%;
  left: 50%;
  position: absolute;
  /** This needs to be calculated by demo resolution? */
  margin-top: 250px;
  
  background-color: black;
  color: white;
  border-radius: 0px;
}

#launcherBarFill
{
  transition: width 0.2s linear;
  display: inline-block;
  height: 100%;
  width: 0px;
  background-color: green;
  border-radius: 0px;
  border-right: 2px solid black;
  
  background: repeating-linear-gradient(to right, rgba(0, 255, 42, 1) 0%, rgb(0, 217, 255) 50%, rgba(0,255,42,1) 100%);
  background-size: 200% auto;
  background-position: 0 100%;
  animation: gradient 1s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes gradient { 
  0%   { background-position: 0 0; }
  100% { background-position: -200% 0; }
}

/** Radio buttons **/
.radiobuttons label
{
    display: inline-block;
    width: 150px;
    line-height: 50px;
    background: #e0e0e0;
    border-radius: 10px;
    margin: 10px;
    color: #333333;
    font-size: 1.4em;
    border: 4px solid #e0e0e0;
    cursor: pointer;
}

.radiobuttons input:checked +label
{
    background: #ffffff;
    border: 4px solid orangered;
}

.radiobuttons input
{
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.radiobuttons label:hover
{
    border: 4px solid orangered;
}


/** Checkboxes **/
.checkbox label
{
    display: inline-block;
    width: 400px;
    line-height: 50px;
    background: #e0e0e0;
    border-radius: 6px;
    margin: 4px;
    color: #333333;
    font-size: 1.25em;
    border: 4px solid #e0e0e0;
    cursor: pointer;
}

.checkbox input:checked +label
{
    background: #ffffff;
    border: 4px solid orangered;
}

.checkbox input
{
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
.checkbox label:hover
{
    border: 4px solid orangered;
}
}
/** Buttons **/
button
{
    display: inline-block;
    width: 191px;
    line-height: 50px;
    background: white;
    border-radius: 10px;
    margin: 10px;
    color: #333333;
    font-size: 1.4em;
    border: 4px solid white;
    cursor: pointer;
}

button:hover
{
    border: 4px solid orangered;
}

#dpr label
{
    width: 104px;
}

@media screen and (max-width:768px), screen and (max-height:500px){
    button{
      width: 120px;
      line-height: 30px;
      font-size: 1em;
    }
    .checkbox
    {
      width: auto;
      display: inline-block;
    }
  .radiobuttons  label, #dpr label, .checkbox label
  {
      width: 70px;
      line-height: 30px;
      font-size: 1.0em;
  }
  h1{
    font-size: 1em;
    display: none;
  }
  h3{
    font-size: 0.75em;
    display: none;
  }
}

#setup p
{
    font-size: 1.4em;
    margin: 0px;
    margin-top: 10px;
}

.debug{
  display:flex;
  position: absolute;
  right:0px;
  top:0px;
  flex-direction: column;
  background: none;
}

.debug > div
{
    color:white;
    background:none;
    text-align: right;
}

#demo
{
    cursor: none;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
#demo.enable-cursor
{
  cursor: default;
}

#demo #democanvas
{
  
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

canvas {
  background: black;
}

/* loader */
#loader{
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.lds-ellipsis {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
  }
  .lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
  }
  .lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
  }
  @keyframes lds-ellipsis1 {
    0% {
      transform: scale(0);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes lds-ellipsis3 {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(0);
    }
  }
  @keyframes lds-ellipsis2 {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(24px, 0);
    }
  }
  
  
  /** Overlay **/
  
img
{
  pointer-events: none;
}

img.hide
{
  opacity: 0;
}

img.show
{
  opacity: 1;
}


/*****************
* Debug elements *
*****************/
#debug-speed-control > input
{
  display: none;
}
#debug-speed-control > label
{
  display: inline-block;
  width: 20px;
  text-align: center;
}

#debug-speed-control > input:checked, #debug-speed-control > input:checked + label
{
  background: #eeeeee;
  color: black;
  
}