/* Base site-wide styles: colors, typography, header, nav, footer */

:root {
  --brand-blue: #007bff;
  --bg: #121212;
  --text: #ddd;
  --surface: #1e1e1e;
}

html, body { height: 100%; }
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  color: var(--text);
}

/* Header */
header {
  background-color: var(--surface);
  color: #fff;
  padding: 20px 0;
  text-align: center;
  font-family: 'Fira Code', monospace;
  font-size: 2.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
header .cursor { color: var(--brand-blue); margin-left: 10px; animation: blink 1s infinite; }
header h1 { margin: 0; font-size: inherit; font-weight: normal; }

/* Navigation */
nav { background-color: var(--surface); padding: 10px 0; text-align: center; }
.nav-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.main-links, .extra-links { display: flex; justify-content: center; align-items: center; }
.extra-links { margin-top: 10px; }
nav a { font-family: 'Fira Code', monospace; color: #fff; text-decoration: none; margin: 0 15px; font-size: 1.5em; transition: color 0.3s; position: relative; }
nav a::before { content: "> "; color: var(--brand-blue); }
nav a:hover { color: var(--brand-blue); }

/* Layout */
.container { padding: 50px 20px; text-align: center; }

/* Footer */
footer { background-color: var(--surface); color: #fff; text-align: center; padding: 20px 0; position: relative; width: 100%; margin-top: 50px; font-family: 'Fira Code', monospace; }
footer p { margin: 0; font-size: 1.2em; }
footer .socials { margin-top: 10px; }
footer .socials a { color: var(--brand-blue); text-decoration: none; margin: 0 10px; font-size: 1.2em; }
footer .socials a:hover { color: var(--brand-blue); }

/* Normalize all footer links to brand color */
footer a,
footer a:visited,
footer a:hover,
footer a:active {
  color: var(--brand-blue) !important;
  fill: var(--brand-blue) !important; /* for SVG icons */
  text-decoration: none;
  transition: color .2s ease;
}

/* Utilities */
.electric-blue { color: var(--brand-blue) !important; font-weight: bold; }
.highlight { color: var(--brand-blue) !important; font-weight: bold; }

/* Shared animations */
@keyframes blink { 0%,50% { opacity: 1; } 50.1%,100% { opacity: 0; } }
@keyframes cursor-blink-anim { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
.cursor-blink { display: inline-block; margin-left: 2px; color: var(--brand-blue); animation: cursor-blink-anim 1s step-end infinite; }