/* Body styling with tiled background 
body {
  background: #000000 url('https://www.transparenttextures.com/patterns/asfalt-dark.png');
  color: #FFFFFF; /* white default text like BBS 
  font-family: "Verdana", sans-serif;
  font-size: 14px;
  margin: 0;
  padding: 0;
}


/* Global font change to match BBS style */
 body {
  background-color: #000000;
  color: #FFFFFF;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}

/* BBS style headings (simulate THE CAVE BBS title) */
h2 {
  font-family: 'Press Start 2P', 'Courier New', monospace;
  color: #00CCCC; /* cyan text */
  text-transform: uppercase;
  font-size: 18px;
  text-align: center;
  letter-spacing: 2px;
  margin: 10px 0;
  text-shadow: 2px 2px #000000; /* chunky shadow */
  border-bottom: 1px solid #00AAAA; /* teal divider like screenshot */
  padding-bottom: 4px;
}
p {
color: #FFF; /* bright yellow like menu items */	
	
}
/* Retro flashy link effect */
.browser-content a {
  color: #FFFF55; /* bright yellow like the 90s */
  font-weight: bold;
  text-decoration: none; /* remove underline */
  animation: neonPulse 1.5s infinite alternate;
}

/* Flashy neon effect */
@keyframes neonPulse {
  0% {
    text-shadow: 0 0 5px #FFFF55, 0 0 10px #FFFF55, 0 0 15px #FFFF55, 0 0 20px #FF00FF, 0 0 30px #FF00FF, 0 0 40px #FF00FF, 0 0 50px #FF00FF;
    color: #FFFF55;
  }
  50% {
    text-shadow: 0 0 10px #FFFF55, 0 0 20px #FFFF55, 0 0 30px #FFFF55, 0 0 40px #FF00FF, 0 0 50px #FF00FF, 0 0 60px #FF00FF, 0 0 70px #FF00FF;
    color: #FFFF55;
  }
  100% {
    text-shadow: 0 0 5px #FFFF55, 0 0 10px #FFFF55, 0 0 15px #FFFF55, 0 0 20px #FF00FF, 0 0 30px #FF00FF, 0 0 40px #FF00FF, 0 0 50px #FF00FF;
    color: #FFFF55;
  }
}

/* Optional: hover effect for a more intense flash */
.browser-content a:hover {
  text-shadow: 0 0 10px #FFFF55, 0 0 20px #FFFF55, 0 0 30px #FFFF55, 0 0 40px #FF00FF, 0 0 50px #FF00FF, 0 0 60px #FF00FF, 0 0 70px #FF00FF;
  color: #FFFF00;
}

/* Optional: Make headings inside browser-content stand out even more */
.browser-content h2 {
  color: #FFFF55; /* bright yellow like menu items */
  text-shadow: 2px 2px #000000;
  border-bottom: 1px solid #AAAA00;
}


/* Header */
.header {
  background-color: #000000; /* pure black bar */
  color: #00CCCC; /* cyan title text */
  padding: 5px;
  text-align: center;
  border-bottom: 3px double #00AAAA; /* teal divider */
}

/* Blink effect */
.blink {
  animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to { visibility: hidden; }
}

/* Navigation */
.navbar {
  background-color: #000000; /* matches BBS black background */
  padding: 5px;
  text-align: center;
  border-bottom: 3px ridge #00FF00; /* bright green divider */
}
.navbar a {
  color: #FFFF55; /* bright yellow text */
  font-weight: bold;
  margin: 0 10px;
  text-decoration: none;
}
.navbar a:hover {
  background: #FFFF55; /* bright yellow hover */
  color: #000000; /* black hover text */
}

#glow {
        color: #FFFF55; /* bright yellow text */
        font-weight: bold;
        text-decoration: none;
        animation: clunkyPulse 1.2s infinite alternate;
      }

      @keyframes clunkyPulse {
        0% {
          text-shadow:
            1px 1px 0px #00FFFF,
            2px 2px 0px #005577;
        }
        50% {
          text-shadow:
            1px 1px 0px #005577,
            2px 2px 0px #00FFFF;
        }
        100% {
          text-shadow:
            1px 1px 0px #00FFFF,
            2px 2px 0px #005577;
        }
      }

      #glow:hover {
        text-shadow:
          1px 1px 0px #FFFFFF,
          2px 2px 0px #00FFFF,
          3px 3px 0px #000000;
        color: #00FFFF;
      }

#glow2 {
        color: #FFFF55; /* bright yellow text */
        font-weight: bold;
        text-decoration: none;
        animation: clunkyPulse 1.2s infinite alternate;
      }

      @keyframes clunkyPulse {
        0% {
          text-shadow:
            1px 1px 0px #005577,
            2px 2px 0px #00FFFF;
        }
        50% {
          text-shadow:
            1px 1px 0px #00FFFF,
            2px 2px 0px #005577;
        }
        100% {
          text-shadow:
            1px 1px 0px #005577,
            2px 2px 0px #00FFFF;
        }
      }

      #glow2:hover {
        text-shadow:
          1px 1px 0px #000000,
          2px 2px 0px #00FFFF,
          3px 3px 0px #FFFFFF;
        color: #00FFFF;
      }


/* Main Layout */
.main-container {
  display: flex;
  padding: 10px;
}

/* Left Column */
.left-column {
  flex: 2;
  margin-right: 10px;
}
.browser-frame {
  position: relative;
  width: 632px;   /* Match your PNG's real width */
  height: 480px;  /* Match your PNG's real height */
  background: url('https://github.com/ucho-thedestroyer/Io/raw/Backup/docs/pi/browser.png') no-repeat center center;
  background-size: contain;
  margin: 20px auto;
}

/* Content area inside PNG */
.browser-content {
  position: absolute;
  top: 132px; 
  left: 5px;
  width: 584px;
  height: 288px;
  overflow-y: auto;
  padding: 10px;
  background: rgba(0,0,0,0.85); /* dark background to match terminal feel */
  font-family: "Verdana", sans-serif;
  color: #FFFFFF; /* white text */
  border: none;
}
.browser-content img {
  max-width: 100%;
  border: 2px solid #00AAAA; /* teal border like section dividers */
}

/* Win95 taskbar at the bottom */
.win95-taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22px;
  background: url('https://github.com/ucho-thedestroyer/Io/raw/Backup/docs/pi/win95.jpg') no-repeat center bottom;
  background-size: cover;
  z-index: 1000;
}

/* Add padding so browser doesn't overlap taskbar */
.browser-frame {
  margin-bottom: 60px;
}

/* Right Column */
.right-column {
  flex: 1;
  border-left: 3px dotted #00FFFF; /* cyan dotted border */
  padding-left: 10px;
  background-color: #000000; /* black */
  color: #FFFF55; /* yellow text inside right column */
  overflow-x: hidden; /* Prevent horizontal scrolling */
  box-sizing: border-box; /* Ensure padding doesn't affect width */
}

/* Footer */
.footer {
  background-color: #000000;
  text-align: center;
  padding: 5px;
  border-top: 3px double #00AAAA; /* teal divider */
  font-size: 12px;
  color: #00CCCC; /* cyan footer text */
}
/* DOOM popup overlay — no dim, click-through except window */
#doom-popup {
  position: fixed;
  inset: 0;
  background: transparent;       /* <-- no more dark overlay */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;           /* don't block the page */
  transition: opacity 0.12s linear;
}

#doom-popup.show {
  opacity: 1;
  /* still pointer-events: none so page feels like a real desktop */
}

/* Win95-style window */
.doom-window {
  position: relative;
  width: 337px;
  height: 250px;
  background: #c0c0c0;
  border: 2px solid #000;              /* outer black edge */
  box-shadow: 1px 1px 0 #000;          /* chunky retro drop shadow */
  /*---- padding-top: 22px;                   /* room for title bar */
  /*--- transform: scale(0.86) translateY(8px); */
  opacity: 0;
  pointer-events: auto;                /* allow interaction if needed */

  margin-top: 12vh;    /* push down from top */
  margin-left: 22vw;   /* push right from left */

}

/* Pop-in animation (feels like a window opening) */
#doom-popup.show .doom-window {
  animation: pop95 180ms cubic-bezier(.2, .9, .2, 1) forwards;
}
@keyframes pop95 {
  to { transform: scale(1) translateY(0); opacity: 1; }
}

/* Title bar (Win95 vibe) using a pseudo element so no HTML changes needed) 
.doom-window::before {
  content: "DOOM.EXE";
  position: absolute;
  top: 0; left: 0; right: 0; height: 22px;
  background: linear-gradient(180deg, #000080, #1084d0);
  color: #fff;
  font-family: 'Press Start 2P', 'Courier New', monospace;
  font-size: 10px;
  line-height: 22px;
  padding-left: 8px;
  letter-spacing: 1px;
  text-shadow: 1px 1px #000;
  border-bottom: 1px solid #000;
} ----*/

/* Content */
.doom-window img {
  display: block;
  width: 100%;
  height: calc(100% - 0px); /* full client area below title bar */
}

.news-row {
  display: flex;
  align-items: center; /* vertically center text and image */
  gap: 1rem; /* space between image and text */
}

.news-row .flying {
  flex-shrink: 0; /* prevents the image from shrinking */
}

.news-row .pipipic {
  max-width: 100%;
  height: auto;
  display: block;
}

.news-row .tidbit {
  flex: 1; /* text expands to fill remaining space */
  font-size: 1rem;
  line-height: 1.4;
	
	background-color:rgb(243, 241, 133, 0.5);
	color: azure;
	border-radius: 5px;
	padding: 10px;
	font-family: "Verdana", sans-serif;
}
  .pipipic {
    width: 136px;
    height: 107px;


  }