/* ======== classic-ish geocities vibe ======== */
:root{
  --bg: #000;
  --fg: #d8d8d8;
  --hot: #00ff66;
  --hot2: #ff33ff;
  --panel: #070707;
  --border: #2a2a2a;
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Verdana", "Tahoma", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

/* faint starry noise using CSS only */
body:before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  background-image:
    radial-gradient(#ffffff 0.7px, transparent 0.7px),
    radial-gradient(#ffffff 0.6px, transparent 0.6px);
  background-size: 120px 120px, 180px 180px;
  background-position: 0 0, 30px 60px;
}

.page{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 14px 40px;
}

.header{
  text-align: center;
  margin-bottom: 18px;
}

.logo{
  display: inline-block;
  max-width: min(520px, 92vw);
  height: auto;
  image-rendering: pixelated; /* helps if logo is low-res */
  filter: drop-shadow(0 0 10px rgba(0,255,102,0.2));
}

.tagline{
  margin-top: 10px;
  border: 1px dashed var(--border);
  background: rgba(7,7,7,0.7);
  padding: 6px 10px;
  color: var(--hot);
  text-shadow: 0 0 8px rgba(0,255,102,0.25);
}

.content{
  display: grid;
  gap: 14px;
}

.panel{
  border: 2px solid var(--border);
  background: rgba(7,7,7,0.85);
  padding: 12px 14px;
  box-shadow: 0 0 0 2px #000 inset;
}

.panel h1{
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--hot2);
  text-shadow: 0 0 10px rgba(255,51,255,0.25);
}

.sub{
  margin: 0;
  color: #bdbdbd;
}

.video-card{
  border: 2px solid var(--border);
  background: rgba(7,7,7,0.85);
  padding: 12px 14px;
}

.desc{
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px dotted var(--border);
  background: rgba(0,0,0,0.35);
}

.bullet{
  color: var(--hot);
  margin-right: 8px;
}

.video-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 2px solid #101010;
  box-shadow: 0 0 0 2px #000 inset;
  overflow: hidden;
}

.video-frame iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.meta{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

a{
  color: var(--hot);
  text-decoration: underline;
}

a:hover{
  color: #ffffff;
  text-shadow: 0 0 10px rgba(0,255,102,0.35);
}

.footer{
  margin-top: 4px;
}

.panel.tiny{
  text-align: center;
  font-size: 12px;
  color: #a8a8a8;
}

.tiny-note{
  opacity: 0.9;
}

/* blink like 1999 (modern browsers may ignore animation if reduced motion is on) */
.blink{
  animation: blink 1s step-end infinite;
  color: var(--hot2);
}

@keyframes blink{
  50%{ opacity: 0; }
}

/* small screens: keep it comfy */
@media (max-width: 520px){
  .page{ padding: 14px 10px 34px; }
  .panel h1{ font-size: 16px; }
}

/* Footer tweaks */

.copyright{
  color: var(--hot2); /* magenta */
}

.site-link{
  display: inline;
  margin: 0;
  padding: 0;
  font: inherit;            /* use same font settings as parent */
  color: var(--hot);
  text-decoration: none;
  letter-spacing: 0;
  line-height: 1.4;         /* match surrounding text */
}

.site-link:hover{
  color: #ffffff;
  text-shadow: 0 0 8px rgba(0,255,102,0.5);
}