/* CSS Custom Properties */
:root {
  /* Terminal Colors */
  --terminal-bg: #1e1e1e;
  --terminal-border: #30363d;
  --terminal-header-bg: #21262d;
  --terminal-text: #c9d1d9;
  --terminal-title: #ffa657;

  /* Terminal UI Elements */
  --terminal-radius: 8px;
  --terminal-font:
    "Courier New", "Courier", "Lucida Console", "Liberation Mono",
    "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Monaco", monospace;

  /* Traffic Light Colors */
  --terminal-red: #ff5f56;
  --terminal-yellow: #ffbd2e;
  --terminal-green: #27ca3f;

  /* Theme Colors */
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --text-primary: #e6edf3;
  --text-secondary: #c9d1d9;
  --text-muted: #8b949e;
  --accent-blue: #58a6ff;
  --accent-blue-light: #79c0ff;
  --accent-blue-lighter: #a5d6ff;
  --accent-orange: #ffa657;
  --accent-red: #ff7b72;
  --accent-purple: #a5a2ff;
  --border-default: #30363d;
}

/* CSS Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-family:
    "Roboto Mono", "Consolas", "Liberation Mono", "Courier New", monospace;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  max-width: 1028px;
  margin: 0 auto;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select, pre {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  font-weight: normal;
}

/* Global anchor styling */
a {
  color: var(--accent-blue-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent-blue-lighter);
  text-decoration: none;
}

/* Terminal Comment Styling */
.comment {
  color: var(--text-muted);
  font-family: var(--terminal-font);
}