.loading-container {
   text-align: center;
   color: #333;
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: 999;
   background-color: var(--color-background);
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.loading-container .logo .dots {
   display: inline-flex;
   position: relative;
   bottom: -16px;
   left: -36px;
}

.loading-container .loading-dot {
   background-color: var(--color-secondary);
   height: 12px;
   margin-left: 4px;
   width: 12px;
   animation-name: loading_dot;
   animation-duration: 0.9s;
   animation-iteration-count: infinite;
   animation-direction: normal;
   border-radius: 50%;
}

.ldot_1 {
   animation-delay: 0.3s;
}

.ldot_2 {
   animation-delay: 0.6s;
}

.tagline span{
   font-size: 1.2rem;
   font-weight: 300;
   opacity: 0;
   animation-name: pulse;
   animation-duration: .5s;
   animation-iteration-count: unset;
}

.word_1 {
  animation-delay: 0.5s;
}
.word_2 {
  animation-delay: 1s;
}

@keyframes loading_dot {
   50% {
      background-color: var(--color-background);
   }
}

@keyframes pulse {
   0%{
    opacity: 0;
   }
   50% {
      opacity: 1;
   }
   100% {
      opacity: 0;
   }
}

@keyframes float {
   0%,
   100% {
      transform: translateY(0px);
      opacity: 0.6;
   }
   50% {
      transform: translateY(-20px);
      opacity: 1;
   }
}

@keyframes fadeOut {
   0% {
      opacity: 1;
   }
   100% {
      opacity: 0;
   }
}

.fade-out {
   animation: fadeOut 0.3s ease-out forwards;
}