html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
}

#splash-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  background-color: white;
  background-size: 100% 100%;
}

.splash-loop {
  animation: pulse 1s ease-in-out infinite;
}

#splash-container img{
  filter: none;
}

.fade-out {
  animation: fade-out 1s ease-in-out forwards;
}

/* Define the animation keyframes */
@keyframes pulse {
  0% {
    opacity: 0.5;

    -moz-transform: scale(1); /* Firefox */
    -ms-transform: scale(1); /* IE */
    -o-transform: scale(1); /* Opera */
    -webkit-transform: scale(1); /* Safari and Chrome */
    transform: scale(1); /* Standard syntax */
  }
  50% {
    opacity: 1;

    -moz-transform: scale(1.05); /* Firefox */
    -ms-transform: scale(1.05); /* IE */
    -o-transform: scale(1.05); /* Opera */
    -webkit-transform: scale(1.05); /* Safari and Chrome */
    transform: scale(1.05); /* Standard syntax */
  }
  100% {
    opacity: 0.5;

    -moz-transform: scale(1); /* Firefox */
    -ms-transform: scale(1); /* IE */
    -o-transform: scale(1); /* Opera */
    -webkit-transform: scale(1); /* Safari and Chrome */
    transform: scale(1); /* Standard syntax */
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}