/* ================================================ */
/* style.css                                        */
/* ================================================ */

/* reset box-sizing for predictable layouts */
* {
  box-sizing: border-box;
}

/* Tile-pattern background (90s theme) */
body {
  margin: 0;
  background: #fffbe8; /* light cream */
  font-family: "Courier New", Courier, monospace;
  color: #000;
  padding-bottom: 40vh; /* Add space for terminal overlay */
}

/* Darken the page when lava lamp is on so the glow reads */
body.lava-on {
  background: radial-gradient(circle at 50% 40%, #171324 0%, #08070f 55%, #040308 100%);
}

/* Header banner—yellow on navy with a chunky double border */
header {
  background: #000080;
  color: #FFFF00;
  border-bottom: 4px double #FF0000;
  text-align: center;
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header h1 {
  margin: 0;
  font-size: 2.5rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 2px 2px #FF0000;
}

/* CSS marquee (replaces deprecated <marquee> tag) */
.marquee-wrap {
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
}

.marquee-track {
  display: inline-block;
  white-space: nowrap;
  animation: marquee-scroll 28s linear infinite;
}

.marquee-track span {
  display: inline-block;
}

@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Navigation links: wrap on small screens */
nav {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  overflow-x: auto;
}

nav a {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  background: #C0C0C0;
  border: 2px outset #FFFFFF;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1rem;
}

/* Style toggle button in retro mode */
#style-toggle-btn {
  flex: 0 0 auto;
  padding: 0.5rem 1rem;
  background: #C0C0C0;
  border: 2px outset #FFFFFF;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  color: #000;
}

#style-toggle-btn:active {
  border-style: inset;
}

/* Responsive tweaks */
@media (max-width: 480px) {
  header h1 {
    font-size: 1.5rem;
  }
  nav a {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
  }
  #style-toggle-btn {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
  }
}

/* Centered content box with a ridged border */
main {
  width: 95%;
  max-width: 760px;
  margin: 1.5rem auto;
  padding: 1rem;
  background: #FFFFFF;
  border: 6px ridge #C0C0C0;
}

article h2 { margin-top: 1.5rem; }

article img { max-width: 100%; height: auto; display: block; margin: 1em auto; }

/* Side-by-side on desktop: equal height, auto width */
.screenshot-row {
  display: flex;
  gap: 8px;
  align-items: stretch;     /* make children the same height */
}

.screenshot-row img {
  height: 300px;            /* lock both to 300px tall */
  width: auto;              /* preserve aspect ratio */
  object-fit: contain;      /* ensure no cropping */
  display: block;
}

/* Stack and reset sizing on narrow screens */
@media (max-width: 600px) {
  .screenshot-row {
    flex-direction: column;
  }
  .screenshot-row img {
    height: auto;           /* natural height again */
    max-width: 100%;        /* fit container */
  }
}

/* 90s-style link colors */
a          { color: #0000EE; }

/* ────────────────────────────────────────────────── */
/* layout for reading list + blog posts side-by-side */
/* ────────────────────────────────────────────────── */
.content-wrapper {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  padding: 0 16px;
}

/* main column (projects) */
.main-column {
  flex: 1 1 850px;
  max-width: 100%;
  min-width: 0;
  margin-top: 16px;
}

/* project sections */
.project-section {
  margin-bottom: 24px;
}

.project-section h2 {
  margin-top: 0;
}

.project-summary {
  margin: 4px 0 8px 20px;
  font-size: 0.9em;
  color: #333;
  line-height: 1.4;
}

/* reading list box */
.reading-sidebar {
  flex: 1 1 400px;
  min-width: 280px;
  max-width: 100%;
  padding: 8px;
  margin-top: 16px;
  background: #000080;
  color: #FFFF00;
  border: 4px ridge #C0C0C0;
  font-family: "Courier New", monospace;
}

/* blog sidebar box */
.blog-sidebar {
  flex: 1 1 400px;
  min-width: 280px;
  max-width: 100%;
  padding: 8px;
  margin-top: 16px;
  background: #000080;
  color: #FFFF00;
  border: 4px ridge #C0C0C0;
  font-family: "Courier New", monospace;
}

@media (max-width: 1600px) {
  /* shrink columns so layout fits on mid-size screens */
  .main-column       { flex-basis: 600px; }
  .reading-sidebar,
  .blog-sidebar  { flex-basis: 350px; }
}

@media (max-width: 1400px) {
  /* further shrink for smaller screens */
  .main-column       { flex-basis: 540px; }
  .reading-sidebar,
  .blog-sidebar  { flex-basis: 280px; }
}

@media (max-width: 968px) {
  .content-wrapper {
    flex-direction: column;
    align-items: stretch;
    padding: 0 12px;
  }

  .main-column {
    order: 1;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }

  .blog-sidebar {
    order: 2;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }

  .reading-sidebar {
    order: 3;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }
}

/* ────────────────────────────────────────────────── */
/* lava‐lamp container—lift it above the page bg      */
/* ────────────────────────────────────────────────── */
#lava-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;            /* was -1, now 0 so it’s above the bg */
}


#lava-container canvas {
  display: block;
}

/* grain overlay when the lava lamp is active */
body.lava-on #lava-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.25;
  mix-blend-mode: multiply;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAQCAYAAABVv0W1AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAIaSURBVGhD7ZbBcoMwEEXXQUOSAgPdJFkHf0CuDACuQCcQTvwIS8AHZlA9wAEfIFcIecAP4Ao0laA0lcRwSxo2CjCy+L4/s//gIjtiGQxM88ZkK7k34UaA+lADqA1UXPTNeBAuAQoF4haE4T0IWgSdj2k5kAWgQ+G4iXgBziHAGolgi+oyk0XKpKX4zq9fmbU0x6BztPfDhKDgTHPMvZ3Wtdh0ghmoqtcP8jqonSj253b7FfRkkF8FgWkzgfz5+ANRJA5CVuq7qvt70zO3Epfp4Kbq+0H6tBKwHWqQl8c9vXVa1pCCltEQ1AitDi+gsmQUkk0w+XtJr/AOU+AQon2vtB0+mgYcMBU9NU8qvfdQAd0u9QzTXRhfYzKnjouEY0EqqWD+gV0taZciHEjB2kawLr7iHF9k/KG9+KocYWJDhKoVOG9CN+sX1IoxT8x6ZASDTQP1Hsb/pUg5sDMPGgclxZIb+wwcwMJEiLf7n6TYEyJZcavQTqSxD2l2ggvIGouYTmQfaNZwYVykhMn3wSxmPGnnAsvU6IBlZB9uiSsh3SSMUNdvNwr+SEQtw12wUZqMyZHWrI1YFZT4bKJLvaYcKOe3LZcmy9GRaWMi+r2yP8ALq1l7jDy9yQAAAABJRU5ErkJggg==");
  animation: filmGrain 1s steps(6) infinite;
}

@keyframes filmGrain {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -5%); }
  20% { transform: translate(5%, -5%); }
  30% { transform: translate(-5%, 5%); }
  40% { transform: translate(5%, 5%); }
  50% { transform: translate(-5%, 0); }
  60% { transform: translate(5%, 0); }
  70% { transform: translate(0, -5%); }
  80% { transform: translate(0, 5%); }
  90% { transform: translate(0, -2%); }
  100% { transform: translate(0, 0); }
}

/* stack all your visible content above the orb */
header,
.content-wrapper {
  position: relative;
  z-index: 1;
}

a:visited  { color: #551A8B; }
a:hover    { color: #FF0000; text-decoration: underline; }

.reading-sidebar a {
  color: #FFFF00; /* bright yellow */
  text-decoration: none;
}

.reading-sidebar a:hover {
  color: #FFCC00;
  text-decoration: underline;
}

.reading-sidebar ul,
.blog-sidebar ul {
  list-style-position: outside;
  padding-left: 20px;
  margin: 0;
}

/* match blog links to reading list style */
.blog-sidebar a {
  color: #FFFF00; /* bright yellow */
  text-decoration: none;
}

.blog-sidebar a:hover {
  color: #FFCC00;
  text-decoration: underline;
}

/* keypad styles for the secret archive */
#keypad {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

#keypad button {
  width: 32px;
  height: 32px;
  padding: 0;
  font-family: "Courier New", monospace;
  font-size: 1rem;
  background: #C0C0C0;
  border: 2px outset #FFFFFF;
  cursor: pointer;
}

.lava-button {
  width: 88px;
  height: 31px;
  padding: 0;
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  background: #C0C0C0;
  border: 2px outset #FFFFFF;
  cursor: pointer;
  vertical-align: middle;
}

.buttons88x31 img {
  vertical-align: middle;
}

.lava-button:active {
  border-style: inset;
}

#keypad button:active {
  border-style: inset;
}

#codeDisplay {
  margin-top: 4px;
  padding: 4px;
  min-height: 24px;
  background: #000;
  color: #00FF00;
  border: 2px inset #FFFFFF;
  font-family: "Courier New", monospace;
  font-size: 1rem;
}


/* ────────────────────────────────────────── */
/* terminal overlay                          */
/* ────────────────────────────────────────── */
#terminal-overlay {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: rgba(0,0,0,0.9);
  color: #00FF00;
  font-family: "Courier New", Courier, monospace;
  padding: 8px;
  overflow-y: auto;
  z-index: 9999;
}

#terminal-current {
  display: flex;
}

#terminal-current input {
  flex: 1;
  background: transparent;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
}

#terminal-prompt {
  margin-right: 4px;
  white-space: pre;
}

#terminalLink {
  position: fixed;
  bottom: 4px;
  right: 8px;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.8rem;
  z-index: 10000;
  pointer-events: auto;
}

/* semi-transparent boxes when lava lamp is on */
body.lava-on header,
body.lava-on .main-column,
body.lava-on .reading-sidebar,
body.lava-on .blog-sidebar {
  opacity: 0.8;
}

body.lava-on #terminal-overlay {
  border-top: 4px solid #FF0000;
}

/* Hide terminal overlay and link on small screens */
@media (max-width: 600px) {
  #terminal-overlay,
  #terminalLink {
    display: none !important;
  }
  .buttons88x31 .lava-button {
    display: none;
  }
}

/* Guestbook comment box styling */
#giscus {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0.5rem;
  background: #FFFFFF;
  border: 6px ridge #C0C0C0;
}