/* ============================================================
   JESSICA'S HOMEPAGE — GEOCITIES CHAOS CSS
   ============================================================ */

@keyframes blink    { 0%,49%{visibility:visible}  50%,100%{visibility:hidden} }
@keyframes rainbow  { 0%{color:#ff0000}16%{color:#ff9900}33%{color:#ffff00}50%{color:#00ff00}66%{color:#0099ff}83%{color:#cc00ff}100%{color:#ff0000} }
@keyframes spin     { to{transform:rotate(360deg)} }
@keyframes bob      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes pulse    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
@keyframes scroll   { from{transform:translateX(110%)}  to{transform:translateX(-110%)} }
@keyframes scrollL  { from{transform:translateX(-110%)} to{transform:translateX(110%)} }
@keyframes flash    { 0%,100%{background:#ff0000} 50%{background:#ffff00} }
@keyframes orbit    { from{transform:rotate(0deg) translateX(20px) rotate(0deg)} to{transform:rotate(360deg) translateX(20px) rotate(-360deg)} }
@keyframes warp     { 0%,100%{letter-spacing:2px} 50%{letter-spacing:7px} }

.blink   { animation: blink 0.7s step-end infinite; }
.rainbow { animation: rainbow 1.5s linear infinite; display:inline; }
.spin    { display:inline-block; animation: spin 2s linear infinite; }
.bob     { display:inline-block; animation: bob 1s ease-in-out infinite; }
.pulse   { display:inline-block; animation: pulse 0.9s ease-in-out infinite; }
.flash   { animation: flash 0.5s step-end infinite; }

body {
  background-image: url('https://file.garden/ZWlUCY4S7Xz2vypS/archived%20backgrounds/colours/blue/bgblueflare2.gif');
  background-repeat: repeat;
  background-attachment: fixed;
  background-color: #000080;
  margin: 0; padding: 4px;
  font-family: "Comic Sans MS", "Trebuchet MS", cursive;
  color: #ffffff;
  overflow-x: hidden;
}

a { color: #00ffff; }
a:hover { color: #ffff00; }
a:visited { color: #ff99ff; }

.marq {
  background: rgba(0,0,0,0.85);
  border-top: 2px solid #ff00ff;
  border-bottom: 2px solid #ff00ff;
  overflow: hidden; white-space: nowrap; padding: 3px 0;
}
.marq-inner  { display:inline-block; animation: scroll  14s linear infinite; color:#00ff00; font-size:12px; font-weight:bold; }
.marq-inner2 { display:inline-block; animation: scrollL 18s linear infinite; color:#ff99ff; font-size:11px; font-weight:bold; }

.outer { width: 790px; margin: 0 auto; }

.hdr-cell {
  background: rgba(0,0,50,0.88);
  border: 5px ridge #ff00ff;
  text-align: center; padding: 10px;
}

.site-title {
  font-size: 36px; font-weight: bold;
  font-family: Impact, "Arial Black", sans-serif;
  animation: rainbow 1.2s linear infinite;
  display: block; text-shadow: 3px 3px #000; letter-spacing: 3px;
}

.nav-table { width:100%; background:#000000cc; border-top:2px solid #ff00ff; border-bottom:2px solid #ff00ff; }
.nav-table td { background:#000066; border:1px outset #9999ff; padding:3px 6px; text-align:center; }
.nav-table td a { color:#ffff00; text-decoration:none; font-size:11px; font-weight:bold; white-space:nowrap; }
.nav-table td:hover { background:#ff00ff; }
.nav-table td:hover a { color:#000; }

.sidebar {
  background: rgba(0,0,40,0.85);
  border: 3px ridge #00ffff;
  padding: 6px; width: 160px; vertical-align: top;
}

.content {
  background: rgba(0,0,30,0.85);
  border: 3px ridge #ff00ff;
  padding: 8px; vertical-align: top;
}

.box-hdr {
  background: repeating-linear-gradient(90deg, #550000 0px, #880000 4px, #550000 8px);
  color: #ffff00; font-size: 12px; font-weight: bold; text-align: center;
  padding: 3px; margin: 6px 0 3px; border: 2px solid #ff4444;
  letter-spacing: 2px; text-transform: uppercase;
}

.counter {
  background: #000; border: 2px inset #00ff00; font-family: monospace;
  color: #00ff00; font-size: 22px; font-weight: bold; text-align: center;
  padding: 4px; letter-spacing: 6px; text-shadow: 0 0 8px #00ff00;
}

.badges { display:flex; flex-wrap:wrap; gap:2px; margin-top:4px; }
.badge  { width:88px; height:31px; display:block; border:1px solid rgba(255,255,255,0.2); }

.blog-post {
  background: rgba(0,0,20,0.8);
  border-left: 4px solid #ff00ff;
  padding: 6px; margin: 5px 0;
}
.blog-post.category-hardware { border-color: #00ffff; }
.blog-post.category-patents  { border-color: #ffff00; }
.blog-post.category-open-source { border-color: #00ff00; }

.post-date    { color: #ffff00; font-size: 10px; font-weight: bold; }
.post-title   { color: #ff99ff; font-size: 13px; font-weight: bold; margin: 2px 0; }
.post-title a { color: #ff99ff; text-decoration: none; }
.post-title a:hover { color: #ffffff; text-decoration: underline; }
.post-body    { color: #ccccff; font-size: 11px; line-height: 1.6; }
.post-meta    { font-size: 9px; color: #888; margin-top: 4px; }
.post-meta a  { color: #00ffff; }
.post-category-tag {
  display: inline-block;
  background: rgba(255,0,255,0.2);
  border: 1px solid #ff00ff;
  color: #ff99ff;
  font-size: 9px; padding: 1px 5px; margin-right: 3px;
}

.post-full-body { color: #ccccff; font-size: 12px; line-height: 1.8; }
.post-full-body h2 { color: #ff99ff; border-bottom: 1px solid #ff00ff; padding-bottom: 3px; }
.post-full-body h3 { color: #ffff00; }
.post-full-body code { background: #000033; color: #00ff00; font-size: 11px; padding: 1px 4px; border: 1px solid #334; }
.post-full-body pre  { background: #000033; border: 1px solid #334; padding: 8px; overflow-x: auto; }
.post-full-body pre code { background: transparent; border: none; padding: 0; }
.post-full-body blockquote { border-left: 3px solid #ff00ff; padding-left: 8px; color: #aaaacc; font-style: italic; margin: 8px 0; }
.post-full-body img { max-width: 100%; border: 2px ridge #ff00ff; margin: 4px 0; display: block; }
.post-full-body a { color: #00ffff; }

.photo-grid { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.photo-grid img { width:180px; height:135px; object-fit:cover; border:2px ridge #00ffff; cursor:pointer; }
.photo-grid img:hover { border-color:#ff00ff; }

.proj-grid { display:flex; flex-wrap:wrap; gap:6px; }
.proj-card {
  background: rgba(0,0,50,0.7);
  border: 2px ridge #ff00ff;
  padding: 8px; width: 220px; flex-shrink: 0;
}
.proj-card:hover { border-color: #00ffff; }
.proj-name { color: #ffff00; font-size: 12px; font-weight: bold; margin-bottom: 4px; }
.proj-name a { color: #ffff00; text-decoration: none; }
.proj-name a:hover { text-decoration: underline; }
.proj-desc { color: #aaaacc; font-size: 10px; line-height: 1.5; }
.proj-meta { font-size: 9px; color: #666; margin-top: 4px; }
.tech-tag {
  display: inline-block;
  background: rgba(0,255,0,0.1);
  border: 1px solid #00aa00;
  color: #00ff00;
  font-size: 8px; padding: 1px 4px; margin: 1px;
  font-family: monospace;
}

hr.fancy {
  border: none; height: 4px;
  background: linear-gradient(to right, transparent, #ff00ff, #00ffff, #ffff00, #ff00ff, transparent);
  margin: 6px 0;
}
hr.thin {
  border: none; height: 1px;
  background: linear-gradient(to right, transparent, #334, transparent);
  margin: 4px 0;
}

.useless-btn {
  background: linear-gradient(to bottom, #aaaaaa, #555555);
  border: 3px outset #cccccc;
  color: #000; font-family: "Comic Sans MS", cursive;
  font-size: 10px; cursor: pointer; padding: 2px 8px; margin: 1px;
}
.useless-btn:active { border-style: inset; }

.music-box {
  background: #000; border: 1px solid #006600;
  font-size: 9px; padding: 4px;
  color: #00ff00; font-family: monospace; text-align: center;
}

.webring-box {
  background: #000; border: 2px dashed #00ffff;
  padding: 5px; font-size: 9px; text-align: center; color: #aaaaaa;
}
.webring-box a { color: #ffff00; }

.orbit-container { position:relative; width:64px; height:64px; display:inline-flex; align-items:center; justify-content:center; }
.orbiter { position:absolute; font-size:12px; animation:orbit 2s linear infinite; transform-origin:50% 50%; }

.footer-strip {
  background: rgba(0,0,0,0.85);
  border: 2px solid #ff00ff;
  text-align: center; padding: 4px;
  font-size: 8px; color: #888; margin-top: 4px;
}

.pagination { text-align:center; margin:8px 0; }
.pagination a {
  display: inline-block; background: #000066;
  border: 1px outset #9999ff; color: #ffff00;
  font-size: 11px; padding: 3px 10px; margin: 2px; text-decoration: none;
}
.pagination a:hover { background: #ff00ff; color: #000; }
.pagination .current {
  display: inline-block; background: #ff00ff;
  border: 1px inset #ff88ff; color: #000;
  font-size: 11px; padding: 3px 10px; margin: 2px; font-weight: bold;
}

.gbook-entry { font-size:10px; color:#ccccff; line-height:1.8; }
.gbook-name  { color:#ffff00; font-weight:bold; }

.award-badge {
  border-radius: 50%; border: 3px ridge #fff;
  font-size: 9px; font-weight: bold;
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; line-height: 1.1; cursor: default;
}