/* Font will be preloaded in HTML head for better performance */

body {
  font-family: 'Fira Code', monospace;
  background-color: #101216;
  color: #00ff88;
  padding: 2rem;
  display: flex;
  justify-content: center;
  line-height: 1.4;
}

.container {
  width: 100%;
  max-width: 700px;
  margin-top: 4rem;
}

.prompt { color: #00ccff; }
.command { color: #f1c40f; }

.cursor {
  color: #efefef;
  animation: blink 1s step-start infinite;
}

.output-text {
  color: #efefef;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  padding-left: 0;
}

a {
  color: #cccccc;
  text-decoration: none;
}

a:hover { color: #f1c40f; }

@keyframes blink { 50% { opacity: 0; } }

.menu {
  font-family: inherit;
}

.menu .prompt, .menu .command {
  display: inline;
}

.menu .output-text {
  display: block;
  color: #ff5577;
  margin-top: 0.25rem;
}

.bash-line {
  display: flex;
  align-items: flex-start;
  font-family: inherit;
  margin-bottom: 0.25rem;
}

.bash-block {
  margin-bottom: 1rem;
}

.section-header {
  color: #efefef;
}

.status-current {
  color: #00ff88c8;
  font-weight: normal;
}

.status-past {
  color: #989898;
  font-weight: normal;
}

/* Responsive adjustments for mobile screens */
@media (max-width: 600px) {
    body {
      padding: 1rem;
      font-size: 0.85rem;
    }
  
    .container {
      margin-top: 1.5rem;
      width: 100%;
    }
  
    .bash-line {
      flex-wrap: nowrap;
      overflow-x: auto;
      white-space: nowrap;
      font-size: 0.75rem;
      margin-bottom: 0.5rem;
    }
  
    .bash-output, .output-text {
      font-size: 0.75rem;
      white-space: normal;
      margin-bottom: 1rem;
    }
  
    .menu .bash-line, .menu .output-text {
      font-size: 0.75rem;
    }
  }