/* mode4.css */

#mode4 {
    background: linear-gradient(to bottom, #78c6e7, #5b9fd4);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }
  
  /* Varias mariposas/aves insectos */
  .creature {
    position: absolute;
    font-size: 2rem;
    animation: fly 6s infinite ease-in-out;
  }
  
  @keyframes fly {
    0%   { transform: translate(0, 0)   rotate(0); }
    25%  { transform: translate(200px, -100px) rotate(20deg); }
    50%  { transform: translate(400px, 20px)   rotate(-20deg); }
    75%  { transform: translate(200px, 50px)   rotate(10deg); }
    100% { transform: translate(0, 0)   rotate(0); }
  }
  
  .tree {
    position: absolute;
    bottom: 0;
    width: 100px;
    font-size: 5rem;
    left: 50%;
    transform: translateX(-50%);
  }