.window {
  border-radius: 3px;
  background: #222;
  color: #fff;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  width: 90%;
  max-width: 800px;
}
.window:before {
  content: " ";
  display: block;
  height: 48px;
  background: #C6C6C6;
}
.window:after {
  content: ". . .";
  position: absolute;
  left: 12px;
  right: 0;
  top: -3px;
  font-family: "Times New Roman", Times, serif;
  font-size: 96px;
  color: #fff;
  line-height: 0;
  letter-spacing: -12px;
}

.terminal {
  margin: 20px;
  font-family: monospace;
  font-size: 16px;
  color: #22da26;
  overflow-x: auto;
  word-wrap: break-word;
}
.terminal .command {
  width: 0%;
  white-space: nowrap;
  overflow: hidden;
  animation: write-command 5s both;
}
.terminal .command:before {
  content: "$ ";
  color: #22da26;
}
.terminal .log {
    white-space: nowrap;
    overflow: hidden;
    animation: write-log 5s both;
  }


  .terminal .info {
    white-space: nowrap;
    overflow: hidden;
    animation: write-log 1s both;
  }

.terminal p:nth-child(2) {
  animation-delay: 2s;
}
.terminal p:nth-child(3) {
    animation-delay: 8s;
  }

  .terminal p:nth-child(4) {
    animation-delay: 10s;
  }



@keyframes write-command {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@keyframes write-log {
  0% {
    height: 0;
  }
  16% {
    height: 0;
  }
  17% {
    height: 18px;
  }
  33% {
    height: 18px;
  }
  34% {
    height: 37px;
  }
  51% {
    height: 37px;
  }
  52% {
    height: 55px;
  }
  69% {
    height: 55px;
  }
  70% {
    height: 74px;
  }
  87% {
    height: 74px;
  }
  88% {
    height: 92px;
  }
  88% {
    height: 92px;
  }
  99% {
    height: 92px;
  }
  100% {
    height: 110px;
  }
}

/* Media queries para dispositivos móviles */
@media screen and (max-width: 768px) {
  .window {
    width: 95%;
    margin: 10px auto;
  }

  .window:before {
    height: 40px;
  }

  .window:after {
    font-size: 60px;
    top: -5px;
    left: 8px;
  }

  .terminal {
    margin: 15px 10px;
    font-size: 14px;
  }

  @keyframes write-log {
    0% {
      height: 0;
    }
    16% {
      height: 0;
    }
    17% {
      height: 16px;
    }
    33% {
      height: 16px;
    }
    34% {
      height: 32px;
    }
    51% {
      height: 32px;
    }
    52% {
      height: 48px;
    }
    69% {
      height: 48px;
    }
    70% {
      height: 64px;
    }
    87% {
      height: 64px;
    }
    88% {
      height: 80px;
    }
    99% {
      height: 80px;
    }
    100% {
      height: 120px;
    }
  }
}

@media screen and (max-width: 480px) {
  .window {
    width: 98%;
    margin: 5px auto;
  }

  .window:before {
    height: 35px;
  }

  .window:after {
    font-size: 48px;
    top: -8px;
    left: 6px;
  }

  .terminal {
    margin: 10px 8px;
    font-size: 12px;
  }

  .terminal .log span,
  .terminal .info span {
    word-break: break-word;
    white-space: pre-wrap;
  }

  @keyframes write-log {
    0% {
      height: 0;
    }
    16% {
      height: 0;
    }
    17% {
      height: 12px;
    }
    33% {
      height: 12px;
    }
    34% {
      height: 24px;
    }
    51% {
      height: 24px;
    }
    52% {
      height: 36px;
    }
    69% {
      height: 36px;
    }
    70% {
      height: 48px;
    }
    87% {
      height: 48px;
    }
    88% {
      height: 60px;
    }
    99% {
      height: 60px;
    }
    100% {
      height: 100px;
    }
  }
}