body {
  margin: 0;
  /* Changed from 'Courier New' to 'monospace' to fix the "dim" look */
  font-family: monospace; 
  background-color: #0d0d0d;
  /* Changed from #99ccff to #ffffff for much brighter, sharper text */
  color: #99ccff; 
  padding: 20px;
  font-size: 16px;
  line-height: 1.5;
  max-width: 800px;
  margin: auto;
  overflow-y: auto;
  scrollbar-color: #00ff00 #0d0d0d;
  scrollbar-width: thin;
}

/* Enforce darker blue for all bold text */
strong, b {
  color: #3399ff; /* Darker blue */
}

.output {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Base prompt styling */
.prompt {
  font-weight: bold;
}

/* Individual prompt color components */
.prompt-user {
  color: #00ff00; /* Green user@host */
}

.prompt-colon {
  color: #ffffff; /* White colon */
}

.prompt-tilde {
  color: #3399ff; /* Darker Blue tilde (since it's bold) */
}

.prompt-dollar {
  color: #ffffff; /* White dollar sign */
}

.input-line {
  display: flex;
  align-items: center;
  margin-top: 10px;
  word-break: break-word;
}

input {
  background: transparent;
  border: none;
  color: #ffffff; /* User typed command is white */
  font: inherit;
  outline: none;
  flex: 1;
  padding: 5px;
  font-size: 18px;
  width: 100%;
}

.cmd-echo {
  color: #ffffff; /* Command history string is white */
}

a {
  color: #99ccff; /* Lighter blue for standard unbolded links */
  text-decoration: none;
}

/* Added underline to all links to indicate they are clickable */
.project-link, .contact-link, .source-link {
  color: #3399ff; /* Darker blue */
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 6px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Remove underline on hover, as the background highlight is the main indicator */
.project-link:hover, .contact-link:hover, .source-link:hover {
  background-color: #3399ff; /* Darker blue highlight */
  color: #0d0d0d;
  text-decoration: none; 
}

/* Fix to ensure bolded text inside links turns dark on hover */
.project-link:hover strong, .contact-link:hover strong, .source-link:hover strong {
  color: #0d0d0d;
}

/* Scrollbar Styling for WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #0d0d0d; /* Dark track */
}

::-webkit-scrollbar-thumb {
  background-color: #00ff00; /* Green thumb */
  border-radius: 10px;
  border: 2px solid #0d0d0d; /* Matches background */
}

.clickable {
  cursor: pointer;
  padding: 2px 6px;
  user-select: none;
  transition: background-color 0.2s ease, color 0.2s ease;
  color: #3399ff; /* Darker blue text because it's bold */
  font-weight: bold; 
  border-radius: 2px;
}

/* Hover style for standard commands (Darker Blue Highlight) */
.clickable:hover {
  background-color: #3399ff; 
  color: #0d0d0d; /* Text matches background color */
  text-decoration: none;
}

.clickable:active {
  background-color: #0077cc; /* Even darker blue for active click */
  color: #ffffff;
}

/* Specific styling exclusively for the 'help' command */
.clickable[data-cmd="help"] {
  color: #00ff00; /* Keep help green initially */
}

.clickable[data-cmd="help"]:hover {
  background-color: #00ff00; /* Green highlight only for help */
  color: #0d0d0d; /* Text matches background color */
}

.clickable[data-cmd="help"]:active {
  background-color: #00cc00;
  color: #ffffff;
}

::selection {
  background: #555; /* Darker Blue background */
  color: #eee;      /* Terminal background color as font color */
}

/* ASCII Art Banner */
.ascii-art {
  font-family: monospace;
  white-space: pre;
  line-height: 1.2;
  color: #00ff00;
  margin: 0;
}

/* Color styles */
.info-text {
  color: #3399ff; /* Darker blue info */
  font-weight: bold;
}

.error-text {
  color: #ff4b4b;
  font-weight: bold;
}

.welcome-text {
  color: #ffa500;
  font-weight: bold;
}

.command-text {
  color: #3399ff; /* Darker blue */
  font-weight: bold;
}

.question-text {
  color: #bdbdfc;
  font-weight: bold;
}

.warning-text {
  color: #ffff66;
  font-weight: bold;
}

.section-header {
  font-weight: bold;
  font-family: 'Courier New', monospace;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  display: block;
  color: #3399ff; /* This is your Bold Blue */
  font-size: 1.1em; /* Makes the title slightly larger than the text */
}

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 2px #00ff00,
      0 0 5px #00cc00,
      0 0 10px #009900;
  }
  20%, 24%, 55% {
    text-shadow:
      0 0 1px #007700,
      0 0 2px #004400;
  }
}

.permanent-flicker {
  font-family: monospace;
  white-space: pre;
  color: #00ff00;
  animation: flicker 3s linear infinite;
  opacity: 1;
}

.boot-line {
  white-space: pre; /* preserve spaces */
  color: #00ff00; /* Restored original green color just for boot sequence */
}
.prefix {
  color: #66d9ef; /* cyan for prefix */
  font-weight: bold;
}
.status {
  color: #a6e22e; /* green for status */
  font-weight: bold;
  margin-left: 5px;
}

* {
  box-sizing: border-box;
}

.section-title {
  font-weight: bold;
  color: #3399ff; /* Your Bold Blue */
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  display: block;
  font-size: 1.1em;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
  body {
    font-size: 14px;
    padding: 10px;
  }

  /* Makes the skills table stack vertically */
  .skills-table thead {
    display: none; /* Hide the original table header */
  }

  .skills-table, 
  .skills-table tbody, 
  .skills-table tr, 
  .skills-table td {
    display: block;
    width: 100%;
  }

  .skills-table tr {
    margin-bottom: 20px; /* Space between groups of skills */
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
  }

  .skills-table td {
    text-align: left;
    padding: 5px 0;
    border: none !important; /* Remove cell borders for clean stacking */
  }

  /* Use the data-label to show the header text on mobile */
  .skills-table td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: bold;
    display: inline-block;
    width: 100px; /* Fixed width for labels so content aligns */
    color: #00ff00; /* Using your terminal green */
  }
}