body {
  perspective: 1000px;
}

.penguin {
  opacity: 1;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.penguin:hover {
  opacity: 0.9;
  transform: scale(1.03);
}

#platform {
  width: min(200px, 40vw);
  aspect-ratio: 4 / 7;
  background-color: brown;

  transform: translateX(100px) rotateX(67deg) rotateZ(45deg);
  transform-style: preserve-3d;

  border-radius: 16px;

  box-shadow:
    1px 2px 10px rgba(204,204,204,0.95),
    44px 44px 24px rgba(204,204,204,0.15);

  transition: 
    transform 0.5s ease-in-out,
    box-shadow 0.5s ease-in-out;
}

#platform:hover {
  transform: 
    translateX(100px)
    translateY(-24px)
    rotateX(60deg)
    rotateZ(45deg);

  box-shadow:
    1px 2px 10px rgba(204,204,204,0.95),
    70px 70px 24px rgba(204,204,204,0.15);
}


#platform p {
  transform-style: preserve-3d;
  transform:
    translateY(120px)
    translateZ(40px)
    rotateX(-90deg)
    rotateY(92deg);

  opacity: 0;

  transition: 
    opacity 0.35s ease,
    transform 0.35s ease;
}

#platform:hover p {
  opacity: 1;
  text-shadow: 2px 5px 6px rgba(204,204,204,0.5);
}

.svg img {
  animation: carmove 10s infinite linear;
}

@keyframes carmove {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(300px); }
  100% { transform: translateX(0); }
}

footer {
    width: 100vw;
    background-color: #000000;
    color: rgb(240 240 240 / 1);
    text-align: center;
}