/*I am defining varibbles */
:root {
  /* Green Color Scheme */
  --terminal-bg: #0d1117;
  --terminal-primary: #00ff41;
  --terminal-secondary: #008f11;
  --terminal-accent: #39ff14;
  --terminal-dim: #004d0d;
  --terminal-frame: #1a1a1a;
  --terminal-text: #00cc33;

  /* typography stuff */
  --font-mono: "Monaco", "Courier New", monospace;
  --font-size-base: 14px;
  --font-size-large: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;

  /* spacing Variables */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* Layout Variables */
  --border-radius: 4px;
  --border-width: 1px;
  --container-max-width: 1200px;

  /* Glow Effects */
  --glow-primary:
    0 0 5px var(--terminal-primary), 0 0 10px var(--terminal-primary),
    0 0 15px var(--terminal-primary);
  --glow-accent: 0 0 3px var(--terminal-accent), 0 0 6px var(--terminal-accent);
  --glow-secondary:
    0 0 2px var(--terminal-secondary), 0 0 4px var(--terminal-secondary);
}

/* reset everything */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
}

body {
  font-family: var(--font-mono);
  background-color: var(--terminal-bg);
  color: var(--terminal-text);
  line-height: 1.6;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* scanlines effect */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 50%, rgba(0, 255, 65, 0.03) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 1000;
  animation: scanlines 0.1s linear infinite;
}

@keyframes scanlines {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(4px);
  }
}

/* generalizing styles */

/* Terminal Command Headers (h2, h3) */
h2,
h3 {
  color: var(--terminal-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: var(--glow-primary);
  position: relative;
  font-size: var(--font-size-large);
  font-weight: normal;
  margin-bottom: var(--spacing-lg);
  margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
}

h2::before,
h3::before {
  content: "$ ";
  color: var(--terminal-accent);
  font-weight: bold;
}

/* defining the layout */

.page-wrapper {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-md);
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "intro sidebar"
    "main sidebar"
    "footer footer";
  gap: var(--spacing-lg);
  min-height: 100vh;
}

/* intro section */

.intro {
  grid-area: intro;
  background-color: var(--terminal-frame);
  border: var(--border-width) solid var(--terminal-secondary);
  border-radius: var(--border-radius);
  box-shadow: var(--glow-secondary);
  position: relative;
  padding: var(--spacing-lg);
}

.intro::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(
    45deg,
    var(--terminal-secondary),
    var(--terminal-primary),
    var(--terminal-secondary)
  );
  border-radius: var(--border-radius);
  z-index: -1;
  opacity: 0.2;
}

.intro header h1 {
  font-size: var(--font-size-xxl);
  font-weight: bold;
  margin-bottom: var(--spacing-xs);
  letter-spacing: 2px;
  animation: textGlow 2s ease-in-out infinite alternate;
}

.intro header h1::after {
  content: "_";
  color: var(--terminal-accent);
  animation: blink 1s infinite;
  margin-left: 5px;
}

/* stop cursor blinking when hovering over links */
body:has(a:hover) .intro header h1::after {
  animation-play-state: paused;
}

@keyframes textGlow {
  0% {
    text-shadow: var(--glow-primary);
  }
  100% {
    text-shadow:
      var(--glow-primary),
      0 0 20px var(--terminal-primary);
  }
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  51%,
  100% {
    opacity: 0;
  }
}


.intro p {
  margin-bottom: var(--spacing-sm);
  color: var(--terminal-text);
}

/* main */

.main.supporting {
  grid-area: main;
  background-color: var(--terminal-frame);
  border: var(--border-width) solid var(--terminal-secondary);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: var(--glow-secondary);
  position: relative;
}

.main.supporting::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(
    90deg,
    var(--terminal-secondary),
    var(--terminal-primary),
    var(--terminal-secondary)
  );
  border-radius: var(--border-radius);
  z-index: -1;
  opacity: 0.2;
}

.main p {
  margin-bottom: var(--spacing-sm);
  color: var(--terminal-text);
}

.main div{
  margin-bottom: var(--spacing-xl);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--terminal-dim);
}


/* sidebar */

.sidebar {
  grid-area: sidebar;
  background-color: var(--terminal-frame);
  border: var(--border-width) solid var(--terminal-secondary);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  box-shadow: var(--glow-secondary);
  position: relative;
}

.sidebar::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(
    180deg,
    var(--terminal-secondary),
    var(--terminal-primary),
    var(--terminal-secondary)
  );
  border-radius: var(--border-radius);
  z-index: -1;
  opacity: 0.2;
}

.sidebar .wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.sidebar h3 {
  font-size: var(--font-size-base);
  color: var(--terminal-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--spacing-sm);
  position: relative;
  text-shadow: var(--glow-primary);
}

.sidebar h3::before {
  content: "> ";
}

.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar li {
  margin-bottom: var(--spacing-xs);
  padding-left: var(--spacing-md);
  position: relative;
}

.sidebar li::before {
  content: "├─ ";
  position: absolute;
  left: 0;
  color: var(--terminal-dim);
  transition: color 0.3s ease;
}

.sidebar li:hover::before {
  color: var(--terminal-accent);
  text-shadow: var(--glow-accent);
}

/* specify it to use the L bar instead of t, that is how lists are displayed in terminal*/
.sidebar li:last-child::before {
  content: "└─ ";
}

/* typography */

a {
  color: var(--terminal-accent);
  text-decoration: underline;
  text-decoration-color: var(--terminal-dim);
  transition: all 0.3s ease;
  position: relative;
}

a:hover {
  color: var(--terminal-primary);
  text-shadow: var(--glow-primary);
  text-decoration-color: var(--terminal-accent);
}

a:hover::before {
  content: "┃"; /*I like the fatter vertical bar*/
  position: absolute;
  left: -4.5px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--terminal-accent);
  text-shadow: var(--glow-accent);
  animation: blink 1s infinite;
}

a:visited {
  color: var(--terminal-secondary);
}

a:visited:hover {
  color: var(--terminal-primary);
  text-shadow: var(--glow-primary);
}

abbr {
  color: var(--terminal-accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--terminal-dim);
}

/* footer */

footer {
  grid-area: footer;
  background-color: var(--terminal-frame);
  border: var(--border-width) solid var(--terminal-secondary);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
  box-shadow: var(--glow-secondary);
  position: relative;
}

footer::before {
  border-radius: var(--border-radius);
  z-index: -1;
  opacity: 0.15;
}

footer a {
  padding: var(--spacing-xs) var(--spacing-sm);
  background-color: var(--terminal-bg);
  border: 1px solid var(--terminal-dim);
  border-radius: var(--border-radius);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  position: relative;
}

footer a:hover {
  background-color: var(--terminal-dim);
  border-color: var(--terminal-secondary);
  text-decoration: none;
  box-shadow: var(--glow-accent);
  transform: translateY(-1px);
}

footer a:hover::before {
  display: none;
}

/* make sure it works on mobile */

@media (max-width: 768px) {
  .page-wrapper {
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "main"
      "sidebar"
      "footer";
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
  }

  .intro header h1 {
    font-size: var(--font-size-xl);
  }

  .intro header h2 {
    font-size: var(--font-size-base);
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-base: 12px;
    --spacing-sm: 0.75rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
  }

  .intro header h1 {
    font-size: var(--font-size-large);
    letter-spacing: 1px;
  }
}

/* hide extra */

.extra1,
.extra2,
.extra3,
.extra4,
.extra5,
.extra6 {
  display: none;
}