html, body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom,
      #EF7F1A 0%,
      #E46C1D 25%,
      #C83C26 75%,
      #BE2A2A 100%);
}

#splash {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  animation: fadeIn 1.2s ease-in-out forwards;
}

#logo {
  width: 150px;
  height: 150px;
  animation: zoomIn 1.6s ease-out forwards, float 3s ease-in-out infinite;

}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes zoomIn {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  60% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    filter: blur(4px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}