.animation {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: -1;
}

.animation-content {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: hide-Container 1.2s ease-in-out 0.3s forwards;
}

.animation-content img {
  width: 65%;
  padding: 30px;
  animation: logo-Change 0.2s ease-in-out 0.3s forwards;
}

.animation-mobil {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: -1;
  background-color: var(--darkblue);
  animation: background-Change 1.2s ease-in-out 0.3s forwards;
}

.animation-content-mobil {
  display: flex;
  justify-content: center;
  align-items: center;
  animation: Container-mobil 1.2s ease-in-out 0.3s forwards;
}

.animation-content-mobil img {
  width: 40%;
  padding: 30px;
  animation: logo-Change-Mobil 0.2s ease-in-out 0.3s forwards;
}

.animation-stopped .animation-content {
  transform: translate(-42vw, -39vh);
  transition: none;
  animation-play-state: paused;
}

.animation-mobil-stopped .animation-content-mobil {
  transform: translate(-35vw, -42vh);
  transition: none;
  animation-play-state: paused;
}

.animation.stopped img {
  content: url('/assets/img/logo_blue.png');
}

@keyframes logo-Change {
  0% {
    content: url('/assets/img/logo_white.png');
  }

  100% {
    content: url('/assets/img/logo_blue.png');
  }
}

@keyframes hide-Container {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-42vw, -39vh);
  }
}

@keyframes background-Change {
  0% {
    background-color: var(--darkblue);
  }

  100% {
    background-color: transparent;
  }
}

@keyframes logo-Change-Mobil {
  0% {
    content: url('/assets/img/logo_white.png');
  }

  100% {
    content: url('/assets/img/logo_blue.png');
  }
}

@keyframes Container-mobil {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-35vw, -42vh);
  }
}