.preloader{
  background-color: #0d0f27;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  z-index: 5;
  display: grid;
  justify-content: center;
  grid-template-rows: 50% 50%;
  font-family: 'Architects Daughter';
}
.ray-gun-img, .letter-animation-container{
  width: 320px;
  height: 200px;
}
.ray-gun-img{
  align-self: flex-end;
  animation: rayGun_Spinner 1.7s linear infinite;
}
.letter-animation-container{
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  font-weight: bolder;
}

@keyframes rayGun_Spinner {
  0%{ transform: rotate(0deg);}
  100% { transform: rotate(-360deg); }
}

.letter-animation-container > div {
  animation: letter_animation 2s ease-in-out infinite;
}
.letter-animation-container > div:nth-child(1){
  animation-delay: 1.2s;
}
.letter-animation-container > div:nth-child(2){
  animation-delay: 1.3s;
}
.letter-animation-container > div:nth-child(3){
  animation-delay: 1.4s;
}
.letter-animation-container > div:nth-child(4){
  animation-delay: 1.5s;
}
.letter-animation-container > div:nth-child(5){
  animation-delay: 1.6s;
}
.letter-animation-container > div:nth-child(6){
  animation-delay: 1.7s;
}
.letter-animation-container > div:nth-child(7){
  animation-delay: 1.8s;
}
.letter-animation-container > div:nth-child(8){
  animation-delay: 1.9s;
}
@keyframes letter_animation {
  0% { opacity: 0; color: rgb(212, 31, 31);}
  100% { opacity: 1; }
}

.removePrelaoder{
  transition: 500ms;
  height: 0;
}
.removePreloaderElements{
  transition: 400ms;
  opacity: 0;
}