html,body{
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* background-color: #eee; */
  position: relative;
  /* cursor: grab; */
}

body, body *{
  user-select: none;
}
.end canvas{
  /* filter: blur(10px);
  -webkit-filter: blur(10px); */
  animation: blur 1s linear 1 forwards;
}

@keyframes blur{
  0%{
    filter: blur(0px);
  -webkit-filter: blur(0px);
  }
  100%{
    filter: blur(100px);
  -webkit-filter: blur(100px);
  }
}

.curtain{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: #eee;
  background-color: rgba(31, 13, 44, 1); */
  background-color: #8e0000;
  z-index: 5000;
  opacity: 1;
  visibility: visible;
  transition: visibility 0s linear 0s, opacity 1500ms;
}
.start .curtain{
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s linear 3000ms, opacity 1500ms;
}


.loader-pos{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.loader-rotate{
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border: 5px solid transparent;
  /* border-top-color: #013c76; */
  border-top-color: #ffffff;
  /* border-bottom-color: #013c76; */
  border-bottom-color: #ffffff;
  border-radius: 50%;
  animation: loaderx 1s infinite ease-in-out;
}
@keyframes loaderx{
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(360deg);
  }
}