@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook&display=swap');

/* Font classes */
.main-font {
  font-family: 'Share Tech Mono', monospace;
}

.header-font {
  font-family: 'Silkscreen', sans-serif;
}

.accent-font {
  font-family: 'UnifrakturCook', cursive;
}

body {
  background: #000 url('/images/background.gif') repeat;
  color: #aaffcc;
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  padding: 0 20px;
  text-shadow: 0 0 4px #000, 0 0 2px #00ffcc;
  position: relative;
  overflow: hidden;
  overflow-y: scroll;
}

header img {
  width: 100%;
  max-width: 800px;
  border: 2px solid #39ff14;
  margin: 20px auto;
  display: block;
}

a {
  color: #39ff14;
  text-decoration: none;
}
a:hover {
  color: #fff;
  text-shadow: 0 0 6px #39ff14;
}

.scanlines {
  pointer-events: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.02),
    rgba(255, 255, 255, 0.02) 1px,
    transparent 2px
  );
  z-index: 999;
}

footer {
  border-top: 1px solid #39ff14;
  margin-top: 40px;
  text-align: center;
  padding: 10px;
}

.falling-gif {
  position: fixed;
  width: 30px;
  animation: fall linear infinite;
  z-index: 10;
}

.gir-border {
  padding: 20px;
  position: relative;
  border: 12px solid transparent;
  background-color: rgba(0, 0, 0, 0.75); /* semi-transparent black */
  background-image:
    url('/images/pixel-gir.gif'),
    url('/images/pixel-gir.gif'),
    url('/images/pixel-gir.gif'),
    url('/images/pixel-gir.gif');
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position:
    top center,
    bottom center,
    center left,
    center right;
  background-size:
    auto 12px,
    auto 12px,
    12px auto,
    12px auto;
  margin: 20px auto;
  color: #ccffe0;
  text-shadow: 0 0 6px #000;
}

/* Ghostlined chat container layout */
.chat-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* Chat box styling (flex child) */
.chat-box {
  flex: 1 1 500px;
  min-width: 300px;
  max-width: 700px;
  height: 80vh;
}

/* Ghost stickers flanking the chat */
.chat-ghost {
  width: 80px;
  height: auto;
}

/* Blog section */
.blog-summary:hover {
  color: #39ff14;
  text-shadow: 0 0 5px #39ff14;
  cursor: pointer;
}

.pixel-pen {
  width: 20px;
  height: auto;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.comment-box {
  margin-top: 20px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid #39ff14;
  color: #aaffcc;
  max-width: 600px;
}

.comment-box input,
.comment-box textarea {
  width: 100%;
  background: #111;
  color: #aaffcc;
  border: 1px solid #39ff14;
  margin-top: 5px;
  margin-bottom: 10px;
  padding: 5px;
  font-family: 'Share Tech Mono', monospace;
}

.comment-box button {
  background: #000;
  color: #39ff14;
  border: 1px solid #39ff14;
  padding: 6px 12px;
  cursor: pointer;
}

/* NEW BADGE FOR POSTS */
.new-badge {
  background: #39ff14;
  color: black;
  font-size: 0.75rem;
  padding: 2px 6px;
  margin-left: 10px;
  border-radius: 4px;
  font-family: 'Silkscreen', sans-serif;
  text-transform: uppercase;
  box-shadow: 0 0 6px #39ff14;
}

/* RELICS */
.relic-list {
  list-style-image: url('/images/pixel-heart-bullet.gif'); /* swap with your emo bullet of choice */
  padding-left: 1.5em;
}

.floating-blinkie {
  position: fixed;
  width: 100px;
  height: auto;
  z-index: 50;
  pointer-events: none;
  animation: floatAcross linear infinite;
}

@keyframes floatAcross {
  0% {
    transform: translateX(-200px) translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(120vw) translateY(-50px);
    opacity: 0;
  }
}

.sparkle {
  position: absolute;
  width: 16px;
  height: 16px;
  background: url('/images/sparkle.gif') no-repeat center center / cover;
  pointer-events: none;
  animation: sparkleFade 1s linear forwards;
}

@keyframes sparkleFade {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

@keyframes floaty {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}



@keyframes fall {
  0% { top: -50px; }
  100% { top: 100%; }
}

iframe.cursed {
  width: 300px;
  height: 150px;
  border: 2px dashed #ff00ff;
  background: black;
  margin: 20px 0;
}