/* ===== Andre Digitaldesign – 90s Neocities Theme ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: #0f0f0f;
  color: #e7ffe7;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  image-rendering: pixelated;
  overflow-x: hidden;
}

/* Page frame */
.wrapper {
  /* allow inner glow/text */
   /* contain */
  max-width: 820px;
  width: min(820px, 100%);
  margin: 16px auto;
  border: 3px ridge #47ff47;
  background: #000814;
  box-shadow: 0 0 20px #00ff66 inset, 0 0 30px #003300;
  

  overflow: hidden;
  padding-right: 6px;
}

/* Header */
.header { border-bottom: 3px groove #47ff47; background: linear-gradient(90deg, #001a00, #003300, #001a00); }
.titlebar { padding: 8px 12px; display: flex; align-items: center; gap: 10px; }
.logo-emoji { font-size: 28px; filter: drop-shadow(0 0 4px #00ff88); }
.h1 { font-size: 26px; font-weight: 700; color: #aaffaa; text-shadow: 0 0 5px #00ff99, 0 0 9px #00aa44; letter-spacing: .5px; }

/* Marquee banner */
.banner {
   /* contain marquee only */
   /* prevent marquee bleed */ border-top: 3px groove #47ff47; border-bottom: 3px groove #47ff47; background: #001a00; padding: 4px; font-weight: bold; color: #c8ffc8; text-shadow: 0 0 6px #00ff88; 
  overflow: hidden;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 1.25;
}

/* 90s nav */
.navbar { display:flex; gap:8px; padding:8px; border-bottom:3px groove #47ff47; background:#001400; flex-wrap:wrap; }
.navbar a { display:inline-block; padding:6px 10px; border:3px outset #22ff88; background:linear-gradient(#003300,#001a00); color:#e6ffe6; text-decoration:none; text-transform:uppercase; font-weight:bold; box-shadow:0 0 6px #00ff88; }
.navbar a:hover{ border-style: inset; transform: translateY(1px); }

/* Main two-column layout */
.content {
   /* grid items can glow */
   display:grid; grid-template-columns:220px 1fr; gap:12px; padding:12px; 
  overflow: visible;}
.sidebar { border:3px ridge #47ff47; padding:10px; background:#001400; }
.sidebar h3 { margin:0 0 8px 0; font-size:16px; color:#aaffaa; text-shadow:0 0 5px #00ff88; }
.badge { display:block; margin:8px 0; padding:6px 8px; border:3px ridge #22ff88; background:#000; font-size:12px; text-align:center; box-shadow:0 0 10px #00ff66 inset; }

.blink { animation: blink 1s steps(2, jump-none) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.startext { background: linear-gradient(90deg, #fff, #aaffaa, #fff); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 6px #00ff88; }

.main {
   border:3px ridge #47ff47; padding:12px; background:#001000; 
  overflow: visible;
  padding-right: 18px;
  overflow-wrap: anywhere;
  word-break: normal;
}
.main h2 { margin:6px 0 10px 0; color:#caffc9; text-shadow:0 0 6px #00ff66, 0 0 10px #008844; }
.hr-glow { border:0; height:3px; margin:8px 0 12px 0; background: radial-gradient(#00ff88, rgba(0,0,0,0)); box-shadow:0 0 12px #00ff88; }

.table-neo { width:100%; border-collapse:collapse; border:3px ridge #22ff88; }
.table-neo th,.table-neo td{ border:2px groove #22ff88; padding:6px; background:#000a00; }

.coffee-hero { display:grid; grid-template-columns:240px 1fr; gap:12px; align-items:center; }
.coffee-svg { width:100%; height:auto; filter: drop-shadow(0 0 8px #00ff88); }

.footer { padding:8px 12px; border-top:3px groove #47ff47; background:#001400; font-size:12px; display:flex; justify-content:space-between; align-items:center; color:#c8ffc8; }
.button-row { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.button { width:88px; height:31px; border:2px ridge #22ff88; display:inline-flex; align-items:center; justify-content:center; font-size:10px; text-transform:uppercase; background:linear-gradient(#003300,#001a00); box-shadow:0 0 6px #00ff88 inset; }
.counter { font-family:"Courier New", monospace; background:#000; border:3px inset #22ff88; padding:4px 8px; letter-spacing:2px; color:#aaffaa; }
.uc { width:100%; height:16px; background-image:repeating-linear-gradient(45deg,#00ff66 0 12px,#002200 12px 24px); border:3px ridge #22ff88; box-shadow:0 0 8px #00ff88 inset; margin:8px 0; }
marquee{ font-weight:bold; width:100%; display:block; box-sizing:border-box; line-height:1.25; width:100%; display:block; box-sizing:border-box; width:100%; display:block; box-sizing:border-box; }
a { color:#9affff; } a:visited{ color:#ff9aff; }

/* Gallery + Lightbox */
.gallery-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:10px; }
.card { border:3px ridge #22ff88; background:#000a00; padding:6px; display:flex; flex-direction:column; gap:6px; }
.card img.thumb{ width:100%; height:160px; object-fit:cover; border:2px groove #22ff88; display:block; cursor:zoom-in; }
.card .caption{ font-size:12px; color:#c8ffc8; }
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; padding:20px; z-index:9999; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:95vw; max-height:90vh; border:4px ridge #22ff88; background:#000; box-shadow:0 0 20px #00ff88; }
.lightbox .close{ position:absolute; top:14px; right:16px; font-size:28px; color:#aaffaa; cursor:pointer; text-shadow:0 0 10px #00ff88; }

img, svg { max-width:100%; height:auto; }

@media (max-width: 860px) {
  .wrapper {
  /* allow inner glow/text */
   /* contain */ width: calc(100% - 16px);
  

  overflow: hidden;
  padding-right: 6px;
}
  .content {
   /* grid items can glow */
   grid-template-columns:1fr; 
  overflow: visible;}
  .coffee-hero { grid-template-columns:1fr; }
  .gallery-grid { grid-template-columns:1fr; }
}

.main table{ max-width:100%; }