html, body {
    height: 100%;
    margin: 0px;
    /* overflow: hidden; */
    font-family: 'Arial', cursive;
    color:rgb(3, 182, 3);
    background-color:black;
  }



#webGl {
  position:absolute;
  /* margin-top:8%; */
  height:88%;
  width:100%;

}


  canvas {
    width: 100%;
    height: 100%;
    display: inline;
    position: absolute;
    z-index:1;
    cursor:url('./assets/targetCursorRed.png'),auto;
  }


#stars {
    display: inline;
    position: absolute;
    z-index:0;
}

  /* .pew-pew {
    position: sticky;
    top: 10px;
    text-align: center;
    z-index: 100;
    display:inline;
    color:white;

  } */

  #buttonHolder {
    text-align:center;
    position:relative;
    padding-top: 5px;
    padding-bottom:5px;
  }

  h2 {
    margin:3px;
  }

  h5 {
    margin:3px;
    padding:3px;
    color:white;
  }

  /* __________Slider CSS __________*/
.level-value {
  border-bottom: 4px dashed #bdc3c7;
  text-align: center;
  font-weight: bold;
  font-size: 1.2em;
  width: 300px; 
  height: 40;
  margin: 8px auto;
  letter-spacing: -.07em;
 
}
input[type="range"] {
  display: block;
  -webkit-appearance: none;
  background-color: #bdc3c7;
  width: 300px;
  height: 5px;
  border-radius: 5px;
  margin: 0 auto;
  outline: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: red;
  width: 6px;
  height: 18px;
  /* border-radius: 50%; */
  /* border: 2px solid white; */
  cursor: grab;
  transition: .3s ease-in-out;
}​
  input[type="range"]::-webkit-slider-thumb:hover {
    background-color: white;
    border: 2px solid #e74c3c;
  }
  input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.6);
  }
  /* __________End Slider CSS__________ */


  .game-started {
    color:rgb(3, 182, 3);;
    font-size:2.4em;
    font-weight:bold;
  }

  .hidden {
    display:none;
  }

  #nextExp {
    color:yellow;
    font-size:1.5em;
    border:none;
    padding-bottom:2px;
  }

  .title-game-started {
    font-size:1.2em;
    color:white;
  }
  
  .col {
    border-right-style:dotted;
    border-left-style:dotted;
    border-color:rgb(3, 182, 3);
  }

  #points-div {
   border:none;
    
  }

  .row {
    border-style:dotted;
    border-color:rgb(3, 182, 3);
  }

  button {
    background: black;
    color:yellow;
    border-style:solid;
    border-color:yellow;
    font-size: 1em;
  }

  button:hover {
    color:rgb(3, 182, 3);
    border-color:rgb(3, 182, 3);
  }

  #buttons {
    border:none;
  }

 .blinking {
  animation:blinkingText 1.5s infinite;
  font-size:1.1em;
 }

 @keyframes blinkingText{
  0%{     color:white;  }
  50%{     color:white;  }
  51%{color:transparent; }
  100%{   color:transparent;   }
}

.logout-login {
  background: black;
  color:yellow;
  border-style:solid;
  border-color:yellow;
  font-size: 0.5em;
}


.logout-login:hover {
  color:rgb(3, 182, 3);
  border-color:rgb(3, 182, 3);
}

#user-name-input {
  font-size:0.4em;
  width:250px;
}

#points-container {
  border-right:none;
  border-left:none;
  font-size: 1em;
}

#pointsCounter {
  font-size: 1em;
}

p {
  margin-top: 2px;
  margin-bottom: 2px;
}

#stats {
  font-size:0.5em;
}