/* =======================================
   GLOBAL TERMINAL & PAGE STYLING
   ======================================= */
:root {
  --bg-color: #000;
  --text-color: #c0c0c0;
  --link-color: #fff;            /* all links white */
  --note-color: #aaa;
  --font-family: "Courier New", "Lucida Console", Monaco, monospace;
}

html, body {
  height: 100%;
  background: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

.term {
  padding: 0.5rem 16px 16px; /* top padding matches prompt spacing */
}

/* =======================================
   PROMPT STYLING (div or link)
   ======================================= */
.prompt {
  display: inline-block;       /* like a terminal line */
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: normal;
  color: var(--text-color);
  user-select: none;
  text-decoration: none;

  margin: 0.5rem 0;            /* vertical spacing above/below */
  padding: 0;

  vertical-align: middle;
}

a.prompt {
  cursor: default;             /* clickable prompt looks like terminal line */
  text-decoration: none !important; /* never underlined */
}

/* Extra spacing below prompt for page content */
.prompt + .content {
  margin-top: 0.5rem;
}

/* =======================================
   GLOBAL LINKS
   ======================================= */
a {
  text-decoration: none;        /* no underline by default */
  color: var(--link-color);     /* white */
  transition: text-decoration 0.2s;
}

a:not(.prompt):hover {
  text-decoration: underline;   /* underline appears on hover */
  color: var(--link-color);     /* stay white on hover */
}

/* =======================================
   PRE / CODE BLOCKS
   ======================================= */
pre {
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-color);
  white-space: pre;             /* preserve whitespace */
}

pre a {
  text-decoration: none;
  color: var(--link-color);
}

pre a:hover {
  text-decoration: underline;
  color: var(--link-color);
}

.code-style, pre {
  color: #ccc;        /* light gray text */
  background: #000;   /* black background */
  white-space: pre;   /* preserve spacing */
}

/* =======================================
   COPYRIGHT FIXED POSITION
   ======================================= */
#copyright {
  position: fixed;
  bottom: 8px;
  right: 16px;
  color: #666;
  font-size: 11px;
  user-select: none;
  pointer-events: none;
  /* Optional: give it a fixed height for spacing reference */
  height: 20px;
}

/* =======================================
   LAST TERM PADDING (prevent text overlap)
   ======================================= */
.term:last-of-type .content {
  padding-bottom: 32px; /* ensure text never scrolls under footer */
}

/* Nav bar */
.nav {
  display: inline-block;
  vertical-align: middle;
  margin-left: 1em; /* space between prompt and nav */ 
}

/* error */
.error {
  text-align: center; /* Centers content inside the div */
  margin-top: 50px;   /* Optional spacing from top */
}

.error img {
    width: 400px;   /* 50% of original image width */
    height: auto;   /* preserve aspect ratio */
    display: block; /* ensures the image is treated as a block, so <p> follows immediately */
    margin: 0 auto; /* centers block image horizontally */
}