* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      background: linear-gradient(#333, #111);
      display: flex;
      justify-content: center;
      align-items: flex-end;
      height: 100vh;
      overflow: hidden;
    }

    .paisagem {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    /* Elementos da paisagem mantendo proporções fixas */
    .predio {
      position: absolute;
      bottom: 0;
      background: #444;
      border: 2px solid #666;
    }

    .predio.um {
      left: 5%;
      width: 60px;
      height: 200px;
    }

    .predio.dois {
      left: 15%;
      width: 40px;
      height: 150px;
    }

    .predio.tres {
      left: 25%;
      width: 50px;
      height: 180px;
    }

    .predio.quatro {
      left: 35%;
      width: 70px;
      height: 220px;
    }

    .predio.cinco {
      left: 50%;
      width: 50px;
      height: 160px;
    }

    .predio.seis {
      left: 60%;
      width: 60px;
      height: 210px;
    }

    .predio.sete {
      left: 75%;
      width: 50px;
      height: 190px;
    }

    .poste {
      position: absolute;
      bottom: 0;
      width: 10px;
      height: 150px;
      background: #ccc;
      z-index: 0;
    }

    .poste::before {
      content: '';
      position: absolute;
      top: 0;
      left: -10px;
      width: 30px;
      height: 10px;
      background: #ff0;
      border-radius: 5px;
    }

    .poste.um {
      left: 10%;
    }

    .poste.dois {
      left: 40%;
    }

    .poste.tres {
      left: 70%;
    }

    .nuvem {
      position: absolute;
      background: #eee;
      border-radius: 50%;
      z-index: 0;
    }

    .nuvem1 {
      top: 50px;
      left: 20%;
      width: 60px;
      height: 60px;
    }

    .nuvem2 {
      top: 80px;
      left: 50%;
      width: 80px;
      height: 50px;
    }

    .nuvem3 {
      top: 40px;
      left: 75%;
      width: 70px;
      height: 60px;
    }

    .estrada {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100px;
      background: #222;
      border-top: 4px solid #555;
      z-index: 0;
    }

    .linha {
      position: absolute;
      bottom: 45px;
      width: 40px;
      height: 6px;
      background: #fff;
      z-index: 1;
    }

    .linha.um {
      left: 20%;
    }

    .linha.dois {
      left: 40%;
    }

    .linha.tres {
      left: 60%;
    }

    .linha.quatro {
      left: 80%;
    }

    /* Carro com tamanho fixo mas posicionamento responsivo */
    .carro {
      position: relative;
      width: 400px;
      height: 150px;
      background: #f00;
      border-radius: 20px 20px 10px 10px;
      z-index: 2;
      animation: moverCarro 8s linear infinite;
      transform: translateX(-500px);
    }

    @keyframes moverCarro {
      0% {
        transform: translateX(-500px);
      }
      100% {
        transform: translateX(100vw);
      }
    }

    .teto {
      position: absolute;
      top: -40px;
      left: 60px;
      width: 280px;
      height: 40px;
      background: #c00;
      clip-path: polygon(10% 100%, 30% 0%, 70% 0%, 90% 100%);
    }

    .roda {
      position: absolute;
      bottom: -30px;
      width: 60px;
      height: 60px;
      background: #333;
      border: 6px solid #999;
      border-radius: 50%;
      animation: girarRoda 1s linear infinite;
    }

    @keyframes girarRoda {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .roda.esquerda {
      left: 40px;
    }

    .roda.direita {
      right: 40px;
    }

    .farol {
      position: absolute;
      top: 30px;
      width: 20px;
      height: 10px;
      background: yellow;
      border-radius: 5px;
    }

    .farol.frente {
      right: -10px;
    }

    .para-choque {
      position: absolute;
      bottom: 0;
      height: 20px;
      background: #444;
    }

    .para-choque.frente {
      right: -20px;
      width: 20px;
      border-radius: 0 5px 5px 0;
    }

    .para-choque.tras {
      left: -20px;
      width: 20px;
      border-radius: 5px 0 0 5px;
    }

    .fumaça {
      position: absolute;
      bottom: 10px;
      left: -40px;
      width: 20px;
      height: 20px;
      background: rgba(200, 200, 200, 0.5);
      border-radius: 50%;
      animation: subirFumaca 2s infinite ease-in-out;
    }

    @keyframes subirFumaca {
      0% {
        transform: translateY(0) scale(1);
        opacity: 0.5;
      }
      100% {
        transform: translateY(-50px) scale(1.5);
        opacity: 0;
      }
    }

    .aerofolio {
      position: absolute;
      top: -10px;
      right: 20px;
      width: 60px;
      height: 10px;
      background: #111;
      border-radius: 5px;
    }

    /* Ajustes responsivos sem alterar o design */
    @media (max-width: 768px) {
      .carro {
        width: 300px;
        height: 112px;
        animation-duration: 6s;
      }
      
      .teto {
        width: 210px;
        height: 30px;
        top: -30px;
        left: 45px;
      }
      
      .roda {
        width: 45px;
        height: 45px;
        bottom: -22px;
      }
      
      .roda.esquerda {
        left: 30px;
      }
      
      .roda.direita {
        right: 30px;
      }
      
      .farol {
        top: 22px;
        width: 15px;
        height: 8px;
      }
      
      .para-choque {
        height: 15px;
      }
      
      .fumaça {
        width: 15px;
        height: 15px;
        left: -30px;
      }
    }

    @media (max-width: 480px) {
      .carro {
        width: 200px;
        height: 75px;
        animation-duration: 4s;
      }
      
      .teto {
        width: 140px;
        height: 20px;
        top: -20px;
        left: 30px;
      }
      
      .roda {
        width: 30px;
        height: 30px;
        bottom: -15px;
        border-width: 4px;
      }
      
      .roda.esquerda {
        left: 20px;
      }
      
      .roda.direita {
        right: 20px;
      }
      
      .farol {
        top: 15px;
        width: 10px;
        height: 5px;
      }
      
      .para-choque {
        height: 10px;
      }
      
      .fumaça {
        width: 10px;
        height: 10px;
        left: -20px;
      }
      
      .aerofolio {
        width: 40px;
        height: 7px;
      }
    }