/* ==========================================================
   JYEKAESTNER.COM - MASTER STYLE SHEET
   Hand coded in Notepad. Do not steal my code!!
   Last updated: whenever
   ========================================================== */

body {
  margin: 0;
  padding: 0;
  background-color: #000033;
  background-image:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 70px, #fff, transparent),
    radial-gradient(2px 2px at 160px 20px, #ffff00, transparent),
    radial-gradient(1px 1px at 40px 130px, #fff, transparent),
    radial-gradient(1px 1px at 130px 160px, #00ffff, transparent),
    radial-gradient(1px 1px at 190px 110px, #fff, transparent);
  background-size: 200px 200px;
  color: #ffffff;
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  font-size: 16px;
  text-align: center;
}

/* ---------- MAIN TABLE LAYOUT (like the pros use) ---------- */
.page {
  width: 92%;
  max-width: 860px;
  margin: 12px auto 40px auto;
  border: 6px ridge #ff00ff;
  background: #000000;
  padding: 10px;
  box-sizing: border-box;
}

/* ---------- HEADINGS ---------- */
h1 {
  font-family: Impact, "Haettenschweiler", "Arial Black", sans-serif;
  font-size: 44px;
  line-height: 1.05;
  margin: 10px 0;
  letter-spacing: 2px;
  color: #ffff00;
  text-shadow:
     3px 3px 0 #ff0000,
     6px 6px 0 #ff00ff,
     9px 9px 0 #00ffff;
  animation: rainbow 3s linear infinite;
}

@keyframes rainbow {
  0%   { color: #ffff00; }
  25%  { color: #00ff00; }
  50%  { color: #00ffff; }
  75%  { color: #ff00ff; }
  100% { color: #ffff00; }
}

h2 {
  font-family: Impact, "Arial Black", sans-serif;
  color: #00ff00;
  font-size: 28px;
  letter-spacing: 1px;
  margin: 26px 0 8px 0;
  text-shadow: 2px 2px 0 #006600;
}

h3 {
  color: #ff9900;
  font-size: 20px;
  margin: 18px 0 6px 0;
}

p { line-height: 1.6; margin: 10px 0; }

a { color: #00ffff; font-weight: bold; }
a:visited { color: #ff99ff; }
a:hover { color: #ffff00; background: #ff00ff; }

/* ---------- NAVIGATION BAR ---------- */
.navbar {
  background: #000000;
  border-top: 3px outset #00ff00;
  border-bottom: 3px outset #00ff00;
  padding: 8px 4px;
  margin: 0 0 10px 0;
}

.navbar a {
  display: inline-block;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #ffff00;
  background: #660066;
  border: 3px outset #cc00cc;
  padding: 7px 12px;
  margin: 4px 3px;
  text-decoration: none;
  letter-spacing: 1px;
}

.navbar a:hover {
  background: #ff00ff;
  color: #ffffff;
  border-style: inset;
}

.navbar a.here {
  background: #009900;
  border-color: #00ff00;
  color: #ffffff;
}

/* ---------- BLINK (RIP the real tag) ---------- */
.blink { animation: blinker 1s steps(2, start) infinite; }
@keyframes blinker { to { visibility: hidden; } }

/* ---------- MARQUEE FALLBACK ---------- */
marquee { font-weight: bold; }

.marquee-bar {
  background: #000000;
  border: 2px inset #ffff00;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-weight: bold;
  padding: 6px 0;
  margin: 8px 0;
}

/* ---------- ANIMATED "GIFS" (pure CSS, no broken image icons) ---------- */
.construction {
  display: inline-block;
  font-family: Verdana, sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #000000;
  padding: 8px 14px;
  margin: 8px 4px;
  border: 3px outset #ffcc00;
  background: repeating-linear-gradient(
    45deg, #ffcc00 0 14px, #000000 14px 28px);
  background-size: 40px 40px;
  animation: crawl 0.8s linear infinite;
  text-shadow: 0 0 4px #ffcc00, 1px 1px 0 #ffcc00;
}
@keyframes crawl { to { background-position: 40px 0; } }

.newbadge {
  display: inline-block;
  font-family: Impact, sans-serif;
  font-size: 14px;
  color: #ffffff;
  background: #ff0000;
  border: 2px solid #ffff00;
  padding: 2px 7px;
  margin-left: 6px;
  border-radius: 3px;
  animation: pulse 0.6s ease-in-out infinite alternate;
}
@keyframes pulse { to { background: #ffff00; color: #ff0000; } }

.flamebar {
  height: 18px;
  margin: 18px 0;
  border-top: 1px solid #ff6600;
  border-bottom: 1px solid #ff6600;
  background: repeating-linear-gradient(
    90deg, #ff0000 0 10px, #ff6600 10px 20px,
    #ffcc00 20px 30px, #ff6600 30px 40px);
  background-size: 40px 100%;
  animation: crawl2 0.5s linear infinite;
}
@keyframes crawl2 { to { background-position: 40px 0; } }

.spinner {
  display: inline-block;
  font-size: 30px;
  animation: spin 2s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.bounce { display: inline-block; animation: bounce 0.7s ease-in-out infinite alternate; }
@keyframes bounce { to { transform: translateY(-12px); } }

/* ---------- HIT COUNTER ---------- */
.counter {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 6px;
  color: #00ff00;
  background: #000000;
  border: 4px inset #666666;
  padding: 5px 12px;
}

/* ---------- CONTENT BOXES ---------- */
.box {
  border: 4px double #00ffff;
  background: #110022;
  padding: 14px;
  margin: 16px 0;
  text-align: left;
}

.box p { text-align: left; }

/* ---------- TABLES ---------- */
table.data {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-family: Verdana, sans-serif;
  font-size: 13px;
  text-align: left;
}
table.data th {
  background: #ff00ff;
  color: #ffffff;
  border: 2px outset #ff66ff;
  padding: 7px;
}
table.data td {
  border: 2px inset #444488;
  padding: 7px;
  background: #000044;
}
table.data tr:hover td { background: #330055; }

/* ---------- PHOTO SLOTS ---------- */
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 14px 0;
}

.frame {
  border: 5px ridge #ffcc00;
  background: #000000;
  padding: 6px;
  width: 220px;
}

.frame img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #444;
}

.gallery .frame img { height: 240px; object-fit: cover; object-position: center 25%; }
.gallery .frame.nocrop img { object-fit: contain; background: #000000; }

.frame--big { width: 340px; margin: 0 auto; }
.frame--big img { height: auto; }

.frame--wide { width: 100%; max-width: 620px; margin: 0 auto; }
.frame--wide img { height: auto; }

.slot {
  width: 100%;
  height: 160px;
  border: 3px dashed #00ff00;
  background: #001100;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4px;
  box-sizing: border-box;
}

.caption {
  font-size: 12px;
  color: #ffff00;
  margin-top: 6px;
  font-family: Verdana, sans-serif;
}

/* ---------- BLOG ---------- */
.entry {
  border-left: 6px solid #ff00ff;
  background: #0a0020;
  padding: 10px 14px;
  margin: 18px 0;
  text-align: left;
}
.entry .date {
  font-family: "Courier New", monospace;
  color: #00ff00;
  font-size: 13px;
  font-weight: bold;
}

/* ---------- FOOTER ---------- */
.footer {
  border-top: 3px groove #666666;
  margin-top: 24px;
  padding-top: 12px;
  font-size: 12px;
  font-family: Verdana, sans-serif;
  color: #aaaaaa;
}
.footer a { color: #66ccff; }

.badge {
  display: inline-block;
  font-family: Verdana, sans-serif;
  font-size: 10px;
  font-weight: bold;
  padding: 4px 6px;
  margin: 4px 3px;
  border: 2px outset #888;
  background: #222244;
  color: #ffffff;
}

/* ---------- MIDI PLAYER ---------- */
.midi {
  display: inline-block;
  border: 3px outset #999999;
  background: #333344;
  padding: 8px 12px;
  margin: 10px 0;
  font-family: "Courier New", monospace;
  font-size: 13px;
  color: #00ff00;
  cursor: pointer;
  user-select: none;
}
.midi:active { border-style: inset; }

/* ---------- MOBILE (a concept from the future) ---------- */
@media (max-width: 600px) {
  h1 { font-size: 30px; text-shadow: 2px 2px 0 #ff0000, 4px 4px 0 #ff00ff; }
  h2 { font-size: 22px; }
  .navbar a { font-size: 11px; padding: 6px 8px; }
  .frame { width: 45%; }
  table.data { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}