:root {
  --logosize: 4
}

/*#wait0{
  background: url("../imgs/Loading.gif");
  display: block;
  margin: auto;
  text-align: center;
 width: 32px;
 height: 32px;

 position:absolute;
 opacity:1;
 z-index:12800;
 transform:scale(2) ;

 }*/

#banne0{
    background: url("../imgs/logo/Nic8RoxLogo.png");
    display: block;
    margin: auto;
    right:64px;
    bottom:128px;
   width: 64px;
   height: 32px;
  content:attr(alt);
   position:absolute;
   opacity:0;
   z-index:0;
   transform:scale(var(--logosize)) ;
   filter:hue-rotate(270deg)brightness(0%);
   animation-play-state: paused;
   pointer-events: none;
   }

   #banneE{
    background: url("../imgs/logo/Nic8RoxLogo.png");
    display: none;
    margin: auto;
    text-align: center;
   width: 64px;
   height: 32px;
   right:64px;
   bottom:128px;

   position:absolute;
   opacity:1;
   z-index:1;
   transform:scale(var(--logosize)) ;
   filter:hue-rotate(0deg);
   pointer-events: all;
   }

#banne{
    background: url("../imgs/logo/Nic8RoxLogo.png");
    display: block;
    margin: auto;
    text-align: center;
   width: 64px;
   height: 32px;
   right:64px;
   bottom:128px;
  
   position:absolute;
   z-index:2;
   opacity:0;
   transform:scale(var(--logosize)) ;
   animation-play-state: paused;
   pointer-events: none;
   }

   #hiddenbio{
    font-family: 'Orgex Font Beta1';
    font-size: 8px;
    display: none;
    margin: auto;
    text-align: center;
   width: 64px;
   height: 32px;
   left:512px;
   top:288px;
   position:absolute;
   z-index:0;
   opacity:0;
   transform:scale(2);
   animation-play-state: paused;
   -webkit-user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -ms-user-select: none;
   user-select: none;
   }


   #hiddenbio2{
    font-family: 'Orgex Font Beta1';
    font-size: 16px;
    color: #ffffda;
    display: none;
    margin: auto;
    text-align: center;
   width: 100%;
   top:24px;
   height: 4px;
   justify-content: center;
   position:absolute;
   z-index:0;
   -webkit-user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -ms-user-select: none;
   user-select: none;
   }

   /*-----------------------------For Mobile------------------------*/
   @media (max-width: 1919px) {
    #hiddenbio2{font-size: 32px;top:48px;}
    #banne0,#banneE,#banne{   
      right:192px;
      bottom:256px;}
    :root {
      --logosize: 8
    }
  }

   @media (max-width: 1279px) {
    #hiddenbio2{font-size: 16px;top:24px;}
    #banne0,#banneE,#banne{   
      right:64px;
      bottom:128px;}
    :root {
      --logosize: 4
    }
  }

  @media (max-width: 767px) {
  #hiddenbio2{font-size: 12px;top:24px;}
  #banne0,#banneE,#banne{   
    right:48px;
    bottom:96px;}
  :root {
    --logosize: 3
  }
}

@media (max-width: 359px) {
  #hiddenbio2{font-size: 8px;top:16px;}
  :root {
    --logosize: 2
  }
  #banne0,#banneE,#banne{   
    right:32px;
    bottom:64px;}
}


/*@media (max-width: 3px) {
  #hiddenbio2{font-size: 4px;top:8px;}
  :root {
    --logosize: 0
  }
  #banne0,#banneE,#banne{   
    right:16px;
    bottom:32px;}
}*/


   @keyframes glitch3 {
    0% {
      filter:hue-rotate(270deg)brightness(0%)saturate(400%);
      color:#000000;
    }
    4% {
      filter:hue-rotate(0turn)brightness(100%)saturate(50%);
      color:#ffffda;
    }
    21% {
      filter:hue-rotate(0turn)brightness(100%)saturate(50%);
      color:#ffffda;
    }
    25% {
      filter:hue-rotate(270deg)brightness(0%)saturate(400%);
      color:#000000;
    }
    26%,100% {
      filter:hue-rotate(270deg)brightness(0%)saturate(400%);
      color:#000000;

   }
  }
   @keyframes glitch1 {
    0% {
      filter:hue-rotate(270deg)brightness(0%)saturate(400%);
    }
    4% {
      filter:hue-rotate(0turn)brightness(100%)saturate(50%);
    }
    21% {
      filter:hue-rotate(0turn)brightness(100%)saturate(50%);
    }
    25% {
      filter:hue-rotate(0deg)brightness(100%)saturate(50%);
    }
    26%,100% {
      filter:hue-rotate(0deg)brightness(100%)saturate(50%);
    }

   }

   @keyframes glitch2 {
    0% {
      transform: translate(-12px) scale(var(--logosize)) ;
      clip-path: polygon(0 98%, 100% 98%, 100% 100%, 0 100%);
      filter:hue-rotate(90deg);
    }
    1% {
      transform: translate(12px) scale(var(--logosize)) ;
      clip-path: polygon(0 50%, 100% 50%, 100% 75%, 0 75%);
      filter:hue-rotate(10deg);
    }
    2% {
      transform: translate3d(0,4px,0) scale(var(--logosize)) ;
      clip-path: polygon(0 12%, 100% 12%, 100% 37%, 0 37%);
      filter:hue-rotate(50deg);
    }
    3% {
      transform: translate3d(0,-8px,0) scale(var(--logosize));
      clip-path: polygon(0 80%, 100% 12%, 100% 37%, 0 37%);
      filter:hue-rotate(40deg);
    }
    4% {
      transform: translate3d(20px,0,0) scale(var(--logosize));
      clip-path: polygon(0 75%, 100% 80%, 100% 100%, 0 100%);
      filter:hue-rotate(80deg);
    }
    5% {
      transform: translate(0) scale(var(--logosize));
      clip-path: polygon(0 0%, 0% 0%, 0% 0%, 0 0%);
      filter:hue-rotate(5deg);
    }
    6%,24% {
      transform: translate(0) scale(var(--logosize));
      clip-path: polygon(0 0%, 0% 0%, 0% 0%, 0 0%);
      filter:hue-rotate(0deg);
    }
    25% {
      transform: translate(-8px) scale(var(--logosize));
      clip-path: polygon(0 40%, 1000% 40%, 1000% 56%, 0 56%);
      filter:hue-rotate(90deg);
    }
    26%,49% {
      transform: translate(0) scale(var(--logosize));
      clip-path: polygon(0 0%, 0% 0%, 0% 0%, 0 0%);
      filter:hue-rotate(0deg);
    }

    50% {
      transform: translate(8px) scale(var(--logosize));
      clip-path: polygon(0 40%, 1000% 40%, 1000% 56%, 0 56%);
      filter:hue-rotate(10deg);
    }
    51%,100% {
      transform: translate(0) scale(var(--logosize));
      clip-path: polygon(0 0%, 0% 0%, 0% 0%, 0 0%);
      filter:hue-rotate(0deg);
    }
  

}


/*
   #hiddenbio2{
    font-family: 'Orgex Font Beta1';
    font-size: 16px;
    color: #ffffda;
    display: none;
    margin: auto;
    text-align: center;
   width: 100%;
   top:24px;
   height: 4px;
   justify-content: center;
   position:absolute;
   z-index:0;
   -webkit-user-select: none;
   -moz-user-select: none;
   -khtml-user-select: none;
   -ms-user-select: none;
   user-select: none;
   }
*/