/* -------------------- Body Styles -------------------- */
body {
  background-color: #000; /* Black background */
  color: #00FF00; /* Default text color: neon green */
  font-family: "Courier New", Courier, monospace; /* Console-style font */
  text-align: center; /* Center text by default */
  margin: 0; /* Remove default margin around page */
  padding: 0; /* Remove default padding */
}

/* -------------------- Header & Navigation -------------------- */
header {
  padding: 10px;
  border-bottom: 1px solid #00FF00; /* Single line under header */
}

nav {
  padding: 5px;
  border-bottom: none; /* Remove nav’s border */
}

/* -------------------- Headings -------------------- */
h1, h2 {
  font-family: "Courier New", Courier, monospace; /* Keep console font for headings */
}

/* -------------------- h2 (Page Title) -------------------- */
h2 {
  margin-top: 40px; /* Giving Page title some breathing room */
}

/* -------------------- h1 -------------------- */
h1 {
  color: #00FF00; /* Neon green text */
  text-align: center; /* Center the heading */
  text-shadow: none; /* No glow or shadow */
  animation: none; /* Remove any animations */
  padding: 20px;
  margin-bottom: 5px;
  font-size: 3em; /* bigger title everywhere */
}

/* -------------------- Main Title Flicker -------------------- */
h1 {
  color: #00FF00;
  text-align: center;
  text-shadow: none;
  padding: 20px;
  margin-bottom: 5px;
  animation: titleFlicker 4s infinite; 
}

@keyframes titleFlicker {
  0%, 75%, 100% {
    opacity: 1;
    text-shadow: 0 0 #00FF00;
    transform: none;
  }
  76% {
    opacity: 0.8;
    text-shadow: 3px 0 #00FF00, -3px 0 #00FF00;
    transform: translateX(3px) translateY(-2px);
  }
  78% {
    opacity: 0.6;
    text-shadow: 2px 1px #00FF00, -2px -1px #00FF00;
    transform: translateX(-3px) translateY(2px);
  }
  80% {
    opacity: 0.9;
    text-shadow: 1px 0 #00FF00, -1px 0 #00FF00;
    transform: translateX(1px) translateY(0);
  }
  82% {
    opacity: 0.7;
    text-shadow: 2px 2px #00FF00, -2px -2px #00FF00;
    transform: translateX(-2px) translateY(1px);
  }
}

/* ---------------- Subtitle under the main title ----------------- */
.subtitle {
  font-size: 0.9em;          /* Smaller than h1 */
  color: #00FF00;            /* green */
  margin-top: -5px;          /* Pull it closer to h1 */
  margin-bottom: 15px;       /* Space before nav/buttons */
}

/* -------------------- Ensure all buttons use the same font -------------------- */
button, input[type="button"], input[type="submit"], input[type="reset"] {
  font-family: "Courier New", Courier, monospace;
  color: #00FF00;
  background: none;
  border: 1px solid #00FF00;
  padding: 5px 10px;
  margin: 10px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

/* -------------------- Button base style ------------------ */
a, button {
  color: #00FF00;
  background: none;
  border: 1px solid #00FF00;
  padding: 5px 10px;
  margin: 10px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  position: relative;
  overflow: hidden;

}

/* ---------------- Hover effect (exclude gallery & lightbox links) ---------------- */
a:hover:not(.lightbox-link):not(.lightbox),
button:hover {
  animation: flicker 1s infinite;
}

/* ---------------- Flicker/glitch keyframes (hover) ---------------- */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
    text-shadow: 0 0 #00FF00;
    transform: none;
  }
  20%, 24%, 55% {
    opacity: 0.8;
    text-shadow: 2px 0 #00FF00, -2px 0 #00FF00;
    transform: translateX(1px);
  }
  22%, 26%, 57% {
    opacity: 0.6;
    text-shadow: 1px 0 #00FF00, -1px 0 #00FF00;
    transform: translateX(-1px);
  }
}

/* -------------------- Occasional glitch effect ------------------ */
.occasional-glitch {
  animation: flicker 1s infinite;
}

/* ------------ Click / active effect ------------ */
a:active, button:active {
  color: #000 !important;         /* Text turns black while pressed */
  background-color: #00FF00;      /* Green background */
  transform: scale(0.95);         /* Slight shrink to simulate press */
  border-color: #00FF00;          /* Keep border consistent */
}

/* -------------------- Comic Image -------------------- */
img.comic-page {
  max-width: 90%; /* Make image fit nicely in page */
  height: auto; /* Keep aspect ratio */
  margin: 20px 0; /* Vertical spacing above/below image */
  border: 2px solid #00FF00; /* Green border around comic page */
}

/* -------------------- Archive List -------------------- */
.archive-list {
  list-style: none; /* Remove default bullets */
  padding: 0; /* Remove default padding */
  margin: 20px auto;   /* center the block */
  display: inline-block;
  text-align: center;  /* keep contents centered */
}

.archive-list li {
  margin: 5px 0;       /* space between each button */
}

.archive-list a {
  display: inline-block;    /* make links behave like buttons */
  width: 325px;             /* set consistent width */
  text-align: left;       /* left-align text inside */
}

/* -------------------- Horizontal Rule -------------------- */
hr {
  border: 1px solid #00FF00; /* Green line */
  margin: 30px 0; /* More space above and below the line */
}

/* -------------------- Footer -------------------- */
footer {
  border-top: 1px solid #00FF00; /* green line above footer */
  padding: 15px;
  margin-top: 40px; /* space above footer */
  font-size: 0.9em; /* slightly smaller text */
  color: #00FF00;
}

footer a {
  color: #00FF00; /* green links */
  text-decoration: none;
  font-weight: bold;
}

footer a:hover {
  color: #fff; /* white on hover */
  text-decoration: underline;
}

/* -------------- Make sure spans behave nicely ------------------- */
#title span {
  display: inline-block;   /* So each letter can move independently */
  transition: transform 0.2s ease; /* Smooth return when cursor moves away */
}

/* -------------------- Custom Cursors -------------------- */

/* Default arrow cursor */
body {
  cursor: url('images/cursor-arrow.png'), auto; /* Custom arrow */
}

/* Pointer hand when hovering buttons or links */
a, button {
  cursor: url('images/cursor-hand.png'), pointer; /* Custom hand */
}

/* Text cursor for input fields or text areas */
p, span, input, textarea {
  cursor: url('images/cursor-text.png'), text; /* Custom text cursor */
}

/* -------------------- About Boxes -------------------- */
.about-box {
  display: flex;
  align-items: center;
  max-width: 800px;
  margin: 40px auto;
  gap: 50px; /* space between image and text */
}

.about-box + .about-box {
  margin-top: 80px; /* space only between boxes */
}

.about-box .about-img {
  width: 200px;   /* adjust as needed */
  height: auto;
  flex-shrink: 0; /* don’t let the image shrink */
  border: 1px solid #00FF00;
}

.about-box .about-text {
  flex: 1;        /* text takes the remaining space */
  text-align: left;
  line-height: 1.5;
}

/* Highlighted text */
::selection {
  background-color: #00FF00; /* neon green background */
  color: #000000;           /* black text */
}

/* -------------------- Gallery -------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* responsive columns */
  gap: 20px;
  max-width: 1000px;
  margin: 40px auto;
  padding: 0 20px;
}

.gallery-item {
  border: none;
  padding: 5px;
  background: #000;
  display: flex;                /* enable flexbox */
  align-items: center;          /* vertical center */
  justify-content: center;      /* horizontal center */
  transition: transform 0.2s ease;
}

.gallery-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;          /* keep aspect ratio */
}

/* hover effect simplified (no glow) */
.gallery-item:hover {
  transform: scale(1.05);
}

/* -------------------- Gallery Lightbox Links -------------------- */
.lightbox-link {
  display: block;        /* behave like a block, not a button */
  border: none;          /* no extra border (gallery item already has border) */
  padding: 0;            /* remove padding */
  margin: 0;             /* no extra spacing */
  background: none;      /* no background */
  cursor: zoom-in;       /* cursor indicates clickable image */
  text-decoration: none; /* no underline */
}

.lightbox-link img {
  display: block;
  width: 100%;
  height: auto;
  cursor: url('images/cursor.png'), auto; /* path to your custom cursor */
}

/* -------------------- Lightbox Overlay -------------------- */
#lightbox-overlay {
  display: none; /* hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
  flex-direction: column;
}

#lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

#lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #00ff00;
  font-size: 2rem;
  cursor: url('images/cursor-hand.png'), auto; /* path to your custom cursor */
}

/* ---------------- Smaller screens adjustments ---------------------- */
@media (max-width: 600px) {
  body {
    font-size: 14px; /* slightly smaller base font */
  }

  a, button {
    padding: 3px 5px;  /* less padding on mobile buttons */
    font-size: 0.9em;
  }

  .archive-list a {
    width: 100%; /* full-width archive buttons on small screens */
    text-align: left;
  }

  h1 {
    font-size: 2em; /* shrink big headings */
  }
}



/* --------- Mobile optimization for About page --------- */
@media (max-width: 768px) {
  .about-box {
    flex-direction: column;   /* stack image above text */
    text-align: center;       /* center everything for better look */
    gap: 20px;                /* smaller gap on mobile */
  }

  .about-box .about-text {
    text-align: center;       /* center text below image */
  }

  .about-box .about-img {
    width: 150px;             /* slightly smaller image on mobile */
  }
}