cat.css

      html {
        background: #0c0207;

      }
      #marco {
        width: 100%;
        height: auto;
        position: relative;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 16px;
        margin-top:  8em;
      }

      #cielo {
        border-radius: 16px;
        width: auto;
        height: auto;
        background: linear-gradient(to bottom,  #0B4C5F 0%,#04B4AE 52%,#0c0207 100%);
        position: absolute;
        z-index: -30;
        top: 0;
        margin-top: 2em;
      }

      #edificios {
        background: url('https://res.cloudinary.com/pastelitos/image/upload/v1610526533/eva/edificiosOne_fsg7nx.svg');
        height: 1000px;
        width: 480px;
        z-index: -10;
        top: -2.5em;
        background-position: 0px 0px;
        background-repeat: repeat-x;
        animation: animar_edificios 120s linear infinite;
        -webkit-animation: animar_edificios 120s linear infinite;
        -ms-animation: animar_edificios 120s linear infinite;
        -moz-animation: animar_edificios 120s linear infinite;
        position: absolute;
      }

      /* Animacion edificios */
      @keyframes animar_edificios {
        from { background-position: 0 0; }
        to { background-position: 100% 0; }
      }

      @-webkit-keyframes animar_edificios {
        from { background-position: 0 0; }
        to { background-position: 100% 0; }
      }

      @-ms-keyframes animar_edificios {
        from { background-position: 0 0; }
        to { background-position: 100% 0; }
      }

      @-moz-keyframes animar_edificios {
        from { background-position: 0 0; }
        to { background-position: 100% 0; }
      }

      #luna {
        width: 6em;
        height: 6em;
        border-radius: 50%;
        box-shadow: 30px 10px 0 #F7F8E0;
        margin-top: 1em;
        margin-left: 50%;
        position: absolute;
        z-index: -19;
      }

      #muro {
        height: 15em;
        width: auto;
        background: linear-gradient(to bottom,  #416663 0%,#0c0207 19%);
        bottom: 0px;
      }

      #gato {
        background: url('./gatito_pushui_scaled.svg');
        top: 1.5em;
        margin-top: 6.6em;
        height: 160px; /* Half the original height */
        width: 260px;  /* Half the original width */
        z-index: 5;
        animation: sprite-animation 1.2s steps(16, end) infinite;
      }

      @-webkit-keyframes sprite-animation {
        from { background-position: 0 0; }
        to { background-position: -8120px 0; }
      }

      @-ms-keyframes sprite-animation {
        from { background-position: 0 0; }
        to { background-position: -8120px 0; }
      }

      @-moz-keyframes sprite-animation {
        from { background-position: 0 0; }
        to { background-position: -8120px 0; }
      }

      @keyframes sprite-animation {
        from { background-position: 0 0; }
        to { background-position: -8120px 0; }
      }