* {
    padding: 0;
    margin: 0;
  }
canvas {
	touch-action: none;
	user-select: none;
}

body {
	background-color: #000000;
}

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
	/* Non-prefixed version, currently supported by Chrome and Opera */
	touch-action: none; /* test */
}

#thegame {
	width: 100%;
	height: 100%;
}

#loader-page {
   /* background-color: #333;*/
    z-index: 9999;
    transition: all .5s ease-out;
    position: fixed;
    width: 100%;
    height: 100vh;
    background-size: cover;
    /*background-position: center;*/
    background-position-x: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .prbg {
    background-color: #000;
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
  }
  

  @keyframes pulsing-fade {
    0% {
      opacity: 0.2;
    }

    50% {
      opacity: 1.0;
    }

    100% {
      opacity: 0.2;
    }
  }

  .loader-container {
    width: 400px;
    height: auto;
    position: absolute;
    top: 95%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid rgb(255, 204, 0);
  }

  #name-img {
    max-width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 82%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  #img1{
    max-width: 73%;
  }
  #img2{
    max-width: 75%;
  }

  #load-img {
    max-width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    
  }

  .loader {
    border: 3px solid black;
    width: 400px;
    height: 30px;
    background-color: rgba(0,0,0,0.3);
    position: relative;
  }
  
  .loader-fill {
    background-color: rgb(255, 204, 0);
    animation: pulsing-fade 2000ms ease infinite;
    width: 0px;
    height: 100%;
    position: absolute;
  }
 
  @media (max-width: 400px) {

    .loader-container {
      width: 90%;
      height: auto;
    }

    #name-img {
      top: 77%;
    }


    #load-img {
      
      top: 83%;
           
    }

    .loader-container {
      top: 89%;
    }
    
  }