/* ============================================================
   PIPPA'S BIEBER SHRINE ✦ stylesheet ✦ est. 2010
   coded by me (pippa) using notepad and lots of LOVE!!
   PLEEZ do not steal my codes ily!!1!
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Lobster&family=Pacifico&family=Press+Start+2P&display=swap');

/* tiled bg + base ----------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  background-color: #2a0a3d;
  background-image:
    radial-gradient(circle at 10px 10px, #ff7be8 1px, transparent 2px),
    radial-gradient(circle at 30px 40px, #fff7a3 1px, transparent 2px),
    radial-gradient(circle at 50px 20px, #b7faff 1px, transparent 2px),
    radial-gradient(circle at 70px 60px, #ffffff 1px, transparent 2px),
    repeating-linear-gradient(45deg, #2a0a3d 0 12px, #3a124e 12px 24px);
  background-size: 80px 80px, 80px 80px, 80px 80px, 80px 80px, auto;
  font-family: 'Comic Neue','Comic Sans MS', cursive;
  color: #fff;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><text y='22' font-size='22'>%E2%99%A5</text></svg>") 4 4, auto;
}

/* the 800px centered "page" -------------------------------- */
.page {
  width: 860px;
  margin: 18px auto;
  background: rgba(255,255,255,0.05);
  border: 4px ridge #ff5fcd;
  box-shadow: 0 0 0 2px #6a0fa8, 0 0 24px #ff5fcd inset, 0 0 36px #ff5fcd;
  padding: 0;
}

/* TOP BANNER ---------------------------------------------- */
.top-banner {
  background:
    linear-gradient(90deg,#ff1493,#9d00ff,#ff1493);
  padding: 6px 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #fff200;
  text-shadow: 1px 1px 0 #000;
  text-align: center;
  border-bottom: 2px dashed #fff200;
}

/* HEADER WORDART ------------------------------------------ */
.wordart {
  text-align: center;
  padding: 14px 8px 6px;
  background:
    radial-gradient(ellipse at center, rgba(255,200,255,0.3), transparent 70%),
    repeating-linear-gradient(135deg,#5d0e8a 0 14px,#3a0a55 14px 28px);
  border-bottom: 4px double #ffec3d;
}
.wordart h1 {
  margin: 0;
  font-family: 'Lobster', cursive;
  font-size: 64px;
  letter-spacing: 2px;
  background: linear-gradient(180deg,#ffffff 0%,#ff7be8 35%,#9b22ff 70%,#350066 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    2px 2px 0 #000,
    4px 4px 0 #ffec3d,
    6px 6px 8px rgba(0,0,0,0.6);
  transform: skewX(-6deg);
}
.wordart .sub {
  font-family: 'Pacifico', cursive;
  color: #fff;
  font-size: 18px;
  text-shadow: 1px 1px 0 #ff1493, 2px 2px 0 #000;
  margin-top: -6px;
}
.wordart .glitter-row {
  margin-top: 4px;
  font-size: 22px;
  letter-spacing: 4px;
  animation: hue 4s linear infinite;
}
@keyframes hue { from{filter:hue-rotate(0deg)} to{filter:hue-rotate(360deg)} }

/* TOP NAV ------------------------------------------------- */
nav.bbnav {
  background: linear-gradient(180deg,#ff79e0,#a015e0);
  padding: 8px 6px;
  text-align: center;
  border-bottom: 3px ridge #ffd700;
}
nav.bbnav a {
  display: inline-block;
  padding: 4px 10px;
  margin: 2px;
  background: linear-gradient(180deg,#fff,#ffc1f0);
  color: #6a0fa8;
  font-weight: 700;
  font-family: 'Comic Neue','Comic Sans MS', cursive;
  text-decoration: none;
  border: 2px outset #fff;
  border-radius: 6px;
  box-shadow: 1px 1px 0 #000;
  text-transform: uppercase;
  font-size: 12px;
}
nav.bbnav a:hover {
  background: linear-gradient(180deg,#fff200,#ff7be8);
  border-style: inset;
  color: #000;
}
nav.bbnav a.current {
  background: linear-gradient(180deg,#fff200,#ff8c00);
  color: #000;
}

/* MAIN LAYOUT (table-style) ------------------------------- */
.layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  gap: 8px;
  padding: 10px;
}
@media (max-width: 880px) { .layout { grid-template-columns: 1fr; } }

aside.box, .panel {
  background: rgba(255,255,255,0.92);
  color: #2a0a3d;
  border: 3px ridge #ff1493;
  box-shadow: 2px 2px 0 #000;
  padding: 8px 10px;
  margin-bottom: 10px;
  font-size: 13px;
  border-radius: 6px;
}
.panel h2, aside.box h3 {
  margin: -8px -10px 8px -10px;
  padding: 6px 10px;
  background: linear-gradient(90deg,#ff1493,#9d00ff);
  color: #fff;
  font-family: 'Lobster', cursive;
  letter-spacing: 1px;
  border-bottom: 2px dashed #fff200;
  text-shadow: 1px 1px 0 #000;
  border-radius: 6px 6px 0 0;
}
aside.box h3 { font-size: 16px; }
.panel h2 { font-size: 24px; }

.panel p, aside.box p, .panel li, aside.box li { line-height: 1.45; }

/* dividers ------------------------------------------------- */
hr.glitter {
  border: 0;
  height: 10px;
  background:
    repeating-linear-gradient(90deg,#ff1493 0 8px,#fff200 8px 16px,#9d00ff 16px 24px,#00ffea 24px 32px);
  margin: 10px 0;
  box-shadow: 0 0 6px #fff;
}
hr.hearts {
  border: 0;
  height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><text y='18' font-size='18'>%E2%99%A5</text></svg>");
  background-repeat: repeat-x;
  filter: drop-shadow(1px 1px 0 #000);
}

/* MARQUEE styling ----------------------------------------- */
marquee {
  background: linear-gradient(90deg,#000,#3a0a55,#000);
  color: #fff200;
  padding: 6px;
  border: 2px ridge #ff1493;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  text-shadow: 0 0 6px #ff1493;
}

/* sparkle text -------------------------------------------- */
.sparkle, .rainbow {
  background: linear-gradient(90deg,#ff1493,#ff8c00,#fff200,#00ff88,#00bfff,#9d00ff,#ff1493);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: slide 3s linear infinite;
  font-weight: 700;
}
@keyframes slide { from{background-position:0 0} to{background-position:200% 0} }

.blink { animation: blink 1s steps(2,start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* lists --------------------------------------------------- */
.panel ul.starlist, aside.box ul.starlist {
  list-style: none;
  padding-left: 0;
}
.panel ul.starlist li, aside.box ul.starlist li {
  padding-left: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><text y='14' font-size='14'>%E2%9C%A7</text></svg>");
  background-repeat: no-repeat;
  background-position: 0 2px;
  margin-bottom: 4px;
}

/* album / photo cards ------------------------------------- */
.album-grid, .photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px,1fr));
  gap: 12px;
}
.album, .photo {
  background: linear-gradient(180deg,#fff,#ffd6f5);
  color: #2a0a3d;
  padding: 8px;
  border: 3px ridge #ff1493;
  box-shadow: 2px 2px 0 #000, 0 0 12px #ff79e0;
  text-align: center;
  border-radius: 6px;
  position: relative;
}
.album img, .photo img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid #6a0fa8;
  margin-bottom: 6px;
  image-rendering: -webkit-optimize-contrast;
}
.album .title { font-family:'Lobster',cursive; font-size: 18px; color:#9d00ff; }
.album .year { font-size: 11px; color: #6a0fa8; }
.album .rating { color: #ff1493; letter-spacing: 1px; }
.photo .cap { font-size: 11px; color:#6a0fa8; padding-top: 2px; }

.album .tracks {
  text-align: left;
  font-size: 10px;
  margin-top: 4px;
  max-height: 110px;
  overflow: auto;
  background: #fff7fb;
  padding: 4px 6px;
  border: 1px dashed #ff79e0;
  border-radius: 4px;
}
.album .tracks ol { margin: 0; padding-left: 18px; }
.album .fave {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 6px;
  background: #fff200;
  color: #000;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid #000;
  border-radius: 8px;
  transform: rotate(-3deg);
}

/* fake mp3 player ----------------------------------------- */
.mp3 {
  background: linear-gradient(180deg,#222,#000);
  color: #00ff88;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 8px;
  border: 3px ridge #888;
  border-radius: 8px;
  text-align: center;
}
.mp3 .now { color: #fff200; }
.mp3 .bar {
  margin: 6px 0;
  height: 8px;
  background: #111;
  border: 1px solid #444;
  position: relative;
  overflow: hidden;
}
.mp3 .bar::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg,#ff1493,#fff200);
  animation: progress 18s linear infinite;
}
@keyframes progress { from{width:0%} to{width:100%} }
.mp3 .ctrl { letter-spacing: 4px; }

/* visitor counter ----------------------------------------- */
.counter {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: #00ff88;
  background: #000;
  padding: 4px 8px;
  border: 2px inset #888;
  letter-spacing: 4px;
}

/* poll ---------------------------------------------------- */
.poll .opt { margin: 4px 0; }
.poll .barwrap {
  background: #fff;
  border: 1px solid #6a0fa8;
  height: 12px;
  position: relative;
  overflow: hidden;
}
.poll .fill {
  height: 100%;
  background: linear-gradient(90deg,#ff1493,#fff200);
}
.poll .pct { font-size: 11px; color: #6a0fa8; }

/* footer -------------------------------------------------- */
footer {
  background: linear-gradient(180deg,#3a0a55,#000);
  color: #ff79e0;
  text-align: center;
  padding: 12px;
  border-top: 3px ridge #ff1493;
  font-size: 12px;
}
footer .ring {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 8px 0;
}
footer .ring a {
  background: linear-gradient(180deg,#fff,#ffd6f5);
  color: #6a0fa8;
  border: 1px solid #000;
  padding: 2px 8px;
  font-size: 11px;
  text-decoration: none;
  font-weight: 700;
}
footer .buttons {
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
footer .buttons .btn88 {
  width: 88px; height: 31px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  text-align: center;
  border: 1px solid #000;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  letter-spacing: 0.5px;
}

/* general links ------------------------------------------- */
a { color: #ff1493; }
a:visited { color: #9d00ff; }
.panel a, aside.box a { color: #9d00ff; font-weight: 700; }

/* fan-girl asides ----------------------------------------- */
.fanquote {
  font-family: 'Pacifico', cursive;
  color: #ff1493;
  font-size: 18px;
  text-shadow: 1px 1px 0 #fff;
  text-align: center;
  margin: 8px 0;
}

/* under construction badge -------------------------------- */
.uc {
  display: inline-block;
  background: repeating-linear-gradient(45deg,#fff200 0 12px,#000 12px 24px);
  color: #000;
  padding: 4px 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  border: 2px ridge #000;
  margin: 6px 2px;
}

/* heart fall (added by JS) -------------------------------- */
.fallheart {
  position: fixed;
  top: -20px;
  font-size: 18px;
  pointer-events: none;
  user-select: none;
  z-index: 9999;
  filter: drop-shadow(0 0 4px #ff1493);
}

/* sparkle trail (added by JS) ----------------------------- */
.spark {
  position: fixed;
  pointer-events: none;
  font-size: 14px;
  z-index: 9999;
  user-select: none;
  animation: sparkfade 0.8s linear forwards;
}
@keyframes sparkfade {
  from { opacity: 1; transform: translate(0,0) scale(1); }
  to   { opacity: 0; transform: translate(0,16px) scale(0.4); }
}

/* quiz / guestbook forms ---------------------------------- */
.qbox {
  background: #fff7fb;
  color: #2a0a3d;
  border: 2px dashed #ff1493;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}
.qbox .q {
  font-weight: 700;
  color: #6a0fa8;
  margin-bottom: 4px;
}
.qbox label { display: block; padding: 2px 0; cursor: pointer; }
button.bb {
  background: linear-gradient(180deg,#fff200,#ff8c00);
  color: #000;
  border: 2px outset #fff;
  padding: 6px 14px;
  font-family: 'Comic Neue','Comic Sans MS', cursive;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
  text-shadow: 1px 1px 0 #fff;
}
button.bb:hover { background: linear-gradient(180deg,#ff8c00,#ff1493); color: #fff; border-style: inset; }
input[type=text], textarea {
  width: 100%;
  padding: 6px;
  border: 2px inset #ff1493;
  background: #fff;
  color: #2a0a3d;
  font-family: 'Comic Neue','Comic Sans MS', cursive;
  font-size: 13px;
  box-sizing: border-box;
  border-radius: 4px;
}

.gb-entry {
  background: linear-gradient(180deg,#fff,#ffe8f7);
  border: 2px ridge #ff1493;
  padding: 8px;
  border-radius: 6px;
  margin: 6px 0;
  font-size: 13px;
  color: #2a0a3d;
}
.gb-entry .who {
  font-family: 'Lobster', cursive;
  color: #9d00ff;
  font-size: 16px;
}
.gb-entry .when { font-size: 10px; color: #6a0fa8; float: right; }

/* big heart gallery overlay ------------------------------- */
.photo .heart-overlay {
  position: absolute;
  top: 6px; right: 6px;
  font-size: 22px;
  filter: drop-shadow(0 0 4px #fff);
  animation: beat 1s ease-in-out infinite;
}
@keyframes beat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }

/* timeline ------------------------------------------------ */
.timeline { border-left: 4px dashed #ff1493; padding-left: 14px; margin: 10px 0; }
.timeline .ev { margin-bottom: 10px; }
.timeline .yr {
  display: inline-block;
  background: #fff200;
  color: #000;
  font-weight: 700;
  padding: 2px 6px;
  border: 1px solid #000;
  border-radius: 8px;
  font-size: 12px;
  transform: rotate(-2deg);
}

/* scroll fix on small screens ----------------------------- */
* { box-sizing: border-box; }
img { max-width: 100%; }

/* "best viewed in" box ------------------------------------ */
.bvi {
  background: #000;
  color: #fff;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  padding: 6px;
  text-align: center;
  letter-spacing: 1px;
  border: 1px solid #ff1493;
  margin: 6px 0;
}

/* pixel-art adopt-me box ---------------------------------- */
.adopt {
  background: #fff7fb;
  color: #2a0a3d;
  text-align: center;
  border: 2px dashed #9d00ff;
  padding: 6px;
  border-radius: 6px;
  margin-top: 8px;
}
.adopt .pet { font-size: 36px; line-height: 1; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* tag-cloud / mood ---------------------------------------- */
.cloud span {
  display: inline-block;
  margin: 2px;
  padding: 1px 6px;
  background: linear-gradient(180deg,#fff,#ffd6f5);
  border: 1px solid #ff1493;
  border-radius: 8px;
  font-size: 11px;
  color: #6a0fa8;
}

/* quiz result --------------------------------------------- */
#quiz-result {
  display: none;
  background: linear-gradient(180deg,#fff200,#ff8c00);
  color: #000;
  padding: 10px;
  border: 3px ridge #000;
  border-radius: 6px;
  margin-top: 10px;
  font-weight: 700;
  font-family: 'Lobster', cursive;
  font-size: 22px;
  text-align: center;
}

/* featured pic of the week — animated frame around real photo */
.featured-frame {
  position: relative;
  display: inline-block;
  padding: 22px;
  margin: 6px auto;
}
.featured-frame::before,
.featured-frame::after {
  content: "";
  position: absolute;
  border-radius: 4px;
  pointer-events: none;
}
.featured-frame::before {
  inset: 8px;
  border: 2px dashed #fff200;
  animation: framespin 28s linear infinite, hue 5s linear infinite;
}
.featured-frame::after {
  inset: 0;
  border: 3px ridge #ff1493;
  box-shadow: 0 0 22px #ff1493, 0 0 40px #9d00ff;
  animation: hue 5s linear infinite;
}
@keyframes framespin { from {transform: rotate(0deg)} to {transform: rotate(360deg)} }

.featured-photo-wrap {
  position: relative;
  width: 360px;
  overflow: hidden;
  border: 6px ridge #ffec3d;
  box-shadow: 0 0 0 2px #6a0fa8 inset;
  background: #2a0a3d;
  line-height: 0;
}
.featured-photo-wrap img {
  display: block;
  width: 100%;
  height: auto;
  animation: breathe 6s ease-in-out infinite;
  transform-origin: center 38%;
}
@keyframes breathe {
  0%, 100% { transform: scale(1.00); filter: saturate(1.05) brightness(1) contrast(1.02); }
  50%      { transform: scale(1.04); filter: saturate(1.18) brightness(1.06) contrast(1.05); }
}
.featured-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 35%, transparent 50%, rgba(42,10,61,0.55) 100%),
    linear-gradient(180deg, rgba(255,123,232,0.05), transparent 30%, transparent 70%, rgba(157,0,255,0.15));
  pointer-events: none;
}
.featured-shine {
  position: absolute; top: 0; left: -60%;
  width: 50%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
  animation: sweep 5.5s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes sweep {
  0%, 70%, 100% { transform: translateX(0); opacity: 0; }
  30%           { opacity: 0.9; }
  55%           { transform: translateX(380%); opacity: 0; }
}

.float-heart {
  position: absolute;
  font-size: 24px;
  filter: drop-shadow(0 0 5px currentColor);
  pointer-events: none;
  animation: pop 3.2s ease-in-out infinite;
  user-select: none;
  z-index: 3;
}
@keyframes pop {
  0%, 100% { transform: translateY(0)   scale(0.85) rotate(-8deg); opacity: 0.85; }
  50%      { transform: translateY(-14px) scale(1.18) rotate(8deg); opacity: 1; }
}
.fh-1 { top: 6px;     left: 4px;    color: #ff1493; }
.fh-2 { top: 18px;    right: 6px;   color: #fff200; font-size: 22px; animation-delay: -0.7s; }
.fh-3 { bottom: 16px; left: 8px;    color: #ffffff; font-size: 20px; animation-delay: -1.4s; }
.fh-4 { bottom: 4px;  right: 4px;   color: #ff79e0; font-size: 28px; animation-delay: -2.1s; }
.fh-5 { top: 50%;     left: -2px;   color: #fff200; font-size: 18px; animation-delay: -2.8s; }
.fh-6 { top: 50%;     right: -2px;  color: #ffffff; font-size: 18px; animation-delay: -1.0s; }
.fh-7 { top: -2px;    left: 50%;    color: #ff1493; font-size: 22px; animation-delay: -1.7s; transform: translateX(-50%); }

.featured-credit {
  font-size: 10px;
  color: #6a0fa8;
  background: #fff7fb;
  border: 1px dashed #ff79e0;
  padding: 4px 8px;
  border-radius: 6px;
  display: inline-block;
  margin-top: 6px;
  letter-spacing: 0.3px;
}

/* ribbons ------------------------------------------------- */
.ribbon {
  background: linear-gradient(90deg,#ff1493,#9d00ff);
  color: #fff;
  display: inline-block;
  padding: 2px 10px;
  font-weight: 700;
  text-shadow: 1px 1px 0 #000;
  margin: 2px 0;
  border-radius: 0 8px 0 8px;
  font-size: 12px;
}