:root{
    --bgColor: #111;
    --scannerColor: #3fefef;
    --imageColor: 130deg;
    --glitch-width: 100vw;
    --glitch-height: 50vh;
    --gap-horizontal: 10px;
    --gap-vertical: 5px;
    --color-title: #fff;
    --time-anim: 3s;
    --delay-anim: 1s;
    --blend-mode-1: none;
    --blend-mode-2: none;
    --blend-mode-3: none;
    --blend-mode-4: overlay;
    --blend-mode-5: overlay;
    --blend-color-1: transparent;
    --blend-color-2: transparent;
    --blend-color-3: transparent;
    --blend-color-4: transparent;
    --blend-color-5: #3f51b5;
}
  #preloader {
    position:absolute;
    z-index: 999;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #060c22;
  }

.screen {
    position:fixed;
    display:flex;
    flex-direction:column;
    align-items:center;
    left: 0;
    right: 0;
    top: calc(100vh - 80vh);
    bottom: auto;
    align-items: center;
    align-self: center;
    justify-content: center;
    justify-items: center;
    justify-self: center;
}

.splash_image {
  position: relative;
  top:0;
  left:0;
  z-index: 4;
  width:300px;
  height:300px;
  background:"none";
  background-size:100%;
  z-index: 999;
}

.splash_image::before {
  content: '';
  position:absolute;
  animation:animate 3s ease-in-out infinite; 
  width:300px;
  height:300px;
  background:url("../img/LOGO.png");
  background-size:100%;
  z-index: 999;

}

@keyframes animate {
  0%, 100% {
      height:0%;
  }
  
  50% {
      height:100%;
  }
}

.splash_image::after {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:8px;
  background: var(--scannerColor);
  border-radius:8px;
  animation: moveLine 3s ease-in-out infinite;
}

@keyframes moveLine {
  0%, 100% {
      top:0%;
  }
  
  50% {
      top:100%;
  }
}

.splash_text {
  text-transform:uppercase;
  font-size:2em;
  letter-spacing:2px;
  margin-top:20px;
  color: var(--scannerColor);   
  filter:drop-shadow(0 0 20px var(--scannerColor)) drop-shadow(0 0 60px var(--scannerColor));
  animation:animate_text 1s steps(1) infinite;
}

@keyframes animate_text {
  0%, 100% {
      opacity:0;
  }
  
  50% {
      opacity:1;
  }
}

