body {
  background: #e2b29f;
  font-size: 120%;
}

.rabbit {
  width: 5em;
  height: 3em;
  background: #ffffff;
  border-radius: 70% 90% 60% 50%;
  position: relative;
  box-shadow: -0.2em 1em 0 -0.75em #b78e81;
  transform: rotate(0deg) translate(-2em, 0);
  animation: hop 1s infinite linear;
  z-index: 1;
}

.rabbit:before {
  content: "";
  position: absolute;
  width: 1em;
  height: 1em;
  background: white;
  border-radius: 100%;
  top: 0.5em;
  left: -0.3em;
  box-shadow:
    4em 0.4em 0 -0.35em #3f3334,
    0.5em 1em 0 white,
    4em 1em 0 -0.3em white,
    4em 1em 0 -0.3em white,
    4em 1em 0 -0.4em white;
  animation: kick 1s infinite linear;
}

.rabbit:after {
  content: "";
  position: absolute;
  width: 0.75em;
  height: 2em;
  background: white;
  border-radius: 50% 100% 0 0;
  transform: rotate(-30deg);
  right: 1em;
  top: -1em;
  border-top: 1px solid #f7f5f4;
  border-left: 1px solid #f7f5f4;
  box-shadow: -0.5em 0em 0 -0.1em white;
}

.clouds {
  background: white;
  width: 2em;
  height: 2em;
  border-radius: 100% 100% 0 0;
  position: relative;
  top: -5em;
  opacity: 0;
  transform: translate(0, 0);
  animation: cloudy 1s infinite linear forwards;
  box-shadow: 5em 2em 0 -0.3em white, -2em 2em 0 0 white;
}

.clouds:before,
.clouds:after {
  content: '';
  position: absolute;
  box-shadow: 5em 2em 0 -0.3em white, -2em 2em 0 white;
}

.clouds:before {
  width: 1.25em;
  height: 1.25em;
  border-radius: 100% 100% 0 100%;
  background: white;
  left: -30%;
  bottom: 0;
}

.clouds:after {
  width: 1.5em;
  height: 1.5em;
  border-radius: 100% 100% 100% 0;
  background: white;
  right: -30%;
  bottom: 0;
}

@keyframes hop {
  20% {
    transform: rotate(-10deg) translate(1em, -2em);
    box-shadow: -0.2em 3em 0 -1em #b78e81;
  }
  40% {
    transform: rotate(10deg) translate(3em, -4em);
    box-shadow: -0.2em 3.25em 0 -1.1em #b78e81;
  }
  60%, 75% {
    transform: rotate(0) translate(4em, 0);
    box-shadow: -0.2em 1em 0 -0.75em #b78e81;
  }
}

@keyframes kick {
  20%, 50% {
    box-shadow:
      4em 0.4em 0 -0.35em #3f3334,
      0.5em 1.5em 0 white,
      4em 1.75em 0 -0.3em white,
      4em 1.75em 0 -0.3em white,
      4em 1.9em 0 -0.4em white;
  }
  40% {
    box-shadow:
      4em 0.4em 0 -0.35em #3f3334,
      0.5em 2em 0 white,
      4em 1.75em 0 -0.3em white,
      4.2em 1.75em 0 -0.2em white,
      4.4em 1.9em 0 -0.2em white;
  }
}

@keyframes cloudy {
  40% {
    opacity: 0.75;
    transform: translate(-3em, 0);
  }
  55% {
    opacity: 0;
    transform: translate(-4em, 0);
  }
  90% {
    transform: translate(0, 0);
  }
}

.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #e2b29f 0%, #b78e81 50%, #e2b29f 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loading-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
}

#loading-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-width: 800px;
  max-height: 600px;
  border-radius: 20px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
}

@media (max-width: 768px) {
  #loading-video {
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}