/* ======================================================= */
/* 1. NEW DARK HOMEPAGE TERMINAL ARCHITECTURE              */
/* ======================================================= */

body {
  background-color: #0d0d0d !important; 
  background-image: linear-gradient(90deg, #151515 50%, #0d0d0d 50%) !important;
  background-size: 60px 100% !important;
  color: #b3b3b3 !important; 
  font-family: 'Courier New', Courier, monospace !important;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.terminal-screen {
  position: relative;
  max-width: 950px;
  height: 600px;
  margin: 40px auto;
  border: 3px double #ffffff; 
  background: rgba(10, 10, 10, 0.95);
  box-shadow: 10px 10px 0px #1a1a1a; 
  overflow: hidden;
}

.goth-node {
  position: absolute;
  background: #000000;
  border: 2px solid #333333;
  border-radius: 50px; 
  padding: 8px 22px;
  color: #ffffff !important;
  text-decoration: none !important;
  font-weight: bold;
  letter-spacing: 2px;
  font-size: 16px;
  box-shadow: 4px 4px 0px #ff0055; 
  transition: all 0.2s ease-in-out;
  z-index: 10;
}

.goth-node:hover {
  color: #00ffff !important; 
  border-color: #00ffff;
  box-shadow: -4px -4px 0px #ff0055; 
  text-decoration: line-through !important; 
  transform: scale(1.05);
}


/* ======================================================= */
/* 2. PROTECTED TRADITIONAL RED BLUE BLACK SPIDEY THEME     */
/* ======================================================= */

.spidey-body {
  background-color: #030712 !important; 
  background-image: linear-gradient(90deg, #09132e 50%, #030712 50%) !important; 
  background-size: 50px 100% !important;
  color: #e2e8f0 !important;
}

.spidey-container {
  background: rgba(0, 0, 0, 0.95) !important; 
  border: 4px solid #cc0000 !important; 
  box-shadow: 10px 10px 0px #0055ff !important; 
  max-width: 850px !important;
  margin: 40px auto;
  padding: 20px;
}

.spidey-h1 {
  color: #ffffff !important;
  font-family: 'Impact', sans-serif !important;
  text-shadow: 3px 3px 0px #cc0000, -2px -2px 0px #0055ff !important; 
  border-bottom: 2px dashed #cc0000 !important;
}

.spidey-link {
  color: #0088ff !important; 
  border-bottom: 2px solid #cc0000 !important; 
  text-decoration: none !important;
}

.spidey-link:hover {
  color: #ffffff !important;
  background-color: #cc0000 !important; 
}
/* --- EXTRA 2000s TECH INTERFACE UPGRADES --- */

/* Inserts a delicate cyber-grid layer over the background stripes */
.terminal-screen::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: 
    linear-gradient(rgba(255, 0, 85, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 1;
}

/* Curved structural background wave mimicking the layout in the image */
.tech-wave {
  position: absolute;
  top: -100px;
  left: -200px;
  width: 700px;
  height: 700px;
  border: 1px dashed rgba(0, 255, 255, 0.15);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}

/* Semi-transparent glassy capsules for stats/notes */
.glass-panel {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  box-shadow: inset 0 0 10px rgba(0, 255, 255, 0.05);
  backdrop-filter: blur(3px);
}