:root{
  --content-max: 90ch;
  --bg: #0d1117; --bg-2:#161b22; --accent:#6ca6cd; --text:#c9d1d9; --muted:#5c6370;
  --size-0: clamp(14px, 1.6vw, 16px);
  --size-2: clamp(24px, 4vw, 40px);
  --radius: 10px;
}

.container{
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: clamp(12px, 3vw, 24px);
}

header{
  background-color: var(--bg-2);
  border-bottom: 2px solid var(--accent);
  text-align: center;
  padding-block: clamp(12px, 3vw, 24px);
}

header h1{
  margin: 0 0 4px 0;
  color: var(--accent);
  font-size: var(--size-2);
}
header p{ margin:0; font-size: var(--size-0); }

.terminal{
  background-color: var(--bg);
  padding: clamp(16px, 4vw, 40px);
  border-radius: var(--radius);
  overflow-x: auto;
  scrollbar-width: thin;
}

.footer{
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  padding-block: 20px;
}

body{ background:#0d1117; color:#c9d1d9; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; margin:0; line-height:1.6; -webkit-text-size-adjust:100%; }
.prompt{ color:#98c379; }
.command{ color:#61afef; }
.output{ color:#abb2bf; white-space:pre-wrap; word-wrap:break-word; }
.footer a{ color:inherit; text-decoration:none; }
.footer a:visited{ color:inherit; }
.footer a:hover{ color:inherit; text-decoration:none; }
.footer a:focus-visible{ outline:2px dashed var(--accent); outline-offset:4px; border-radius:4px; }

@media (max-width: 600px){
  .terminal{ padding:16px; }
  .footer{ padding-block:16px; }
}
@media (max-width: 360px){
  header h1{ font-size: clamp(20px, 8vw, 28px); }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* Style links in terminal output like folders */
:root { --dir: #61afef; } /* typical bright blue for directories */

/* Default terminal link styling for project/folder links */
.terminal .output a {
  color: var(--dir);
  font-weight: 600;
  text-decoration: none;
}

.terminal .output a:focus-visible{
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* User link (e.g., 'pappy' in whoami output) — inherits normal text color */
.terminal .output a.user-link {
  color: inherit;
  font-weight: normal;
  text-decoration: none;
}
.terminal .output a.user-link:hover {
  text-decoration: none;
}