<@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
:root{
--hotpink: #ff33aa;
--fuchsia: #ff00cc;
--pale: #fff0f8;
}
/* page background & cursor */
html,body{height:100%;}
body {
font-family: "Comic Sans MS", "Comic Sans", "cursive", "Comic Neue", sans-serif;
background: linear-gradient(45deg, #ffccf9, #ffcccc, #ccffff, #f5ccff);
background-size: 400% 400%;
animation: bgmove 20s ease infinite;
color: #222;
margin: 0;
padding: 20px;
overflow-x: hidden;
cursor: url('https://cur.cursors-4u.net/cursors/cur-9/cur817.cur'), auto;
}
@keyframes bgmove { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
/* headings */
h1,h2,h3,h4 {
text-shadow: 2px 2px 6px rgba(255,0,170,0.25), 0 0 10px rgba(255,20,147,0.08);
color: var(--hotpink);
animation: wiggle 3s infinite ease-in-out;
margin: 0.35em 0;
}
@keyframes wiggle { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }
.title { font-size: 3em; text-align:center; }
.subtitle { text-align:center; font-style:italic; margin-bottom:10px; color:#5a2b4a; }
/* nav */
.nav { text-align:center; margin-bottom:20px; }
.nav a {
text-decoration:none; margin:0 8px; color:var(--hotpink);
background: #fff0f8; border: 2px dotted pink; padding:4px 8px; border-radius:10px;
transition: transform 0.2s, box-shadow 0.2s;
}
.nav a:hover { transform: scale(1.15) rotate(-6deg); box-shadow: 0 0 12px rgba(255,51,170,0.3); }
/* marquee */
marquee {
font-size:1.3em; background:#ffe6f9; padding:10px; border:3px dashed var(--hotpink);
border-radius:12px; margin-bottom:18px;
}
/* hero/profile */
.hero-row { display:flex; gap:30px; justify-content:center; flex-wrap:wrap; align-items:flex-start; }
.profile-card {
background:#fff0ff; border:3px groove pink; border-radius:20px; padding:18px; width:260px;
text-align:center; box-shadow:0 0 20px rgba(255,51,170,0.12); animation: floaty 4s infinite ease-in-out;
}
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.avatar { border-radius:50%; border:4px solid var(--hotpink); margin-bottom:10px; display:block; margin-left:auto; margin-right:auto; }
/* shrine */
.mini-shrine {
background:#fef6ff; border:2px dashed violet; padding:12px; width:190px; border-radius:15px;
box-shadow: 0 0 10px rgba(255,0,170,0.06);
}
/* moodboard */
.moodboard {
display:grid; grid-template-columns: repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-top:12px;
}
.moodboard .card {
background:#fff0f5; border:2px solid var(--hotpink); border-radius:12px; padding:10px; text-align:center;
animation: pulse 2s infinite; font-weight:700;
}
@keyframes pulse { 0%,100%{box-shadow:0 0 5px rgba(255,51,170,0.2)} 50%{box-shadow:0 0 20px rgba(255,0,204,0.18)} }
/* gallery */
.grid-gallery {
display:grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap:15px; margin-top:8px;
}
.grid-gallery img {
width:100%; border:3px solid var(--hotpink); border-radius:10px; box-shadow:0 0 12px rgba(128,0,128,0.12);
}
/* playlist & lists */
.playlist-list li { margin-bottom:6px; }
/* confessions */
.confession-feed { margin-top:18px; }
.confession {
background:#fff8fc; border:2px dotted pink; margin-bottom:10px; padding:10px; border-radius:10px;
animation: rainbow 5s linear infinite;
}
@keyframes rainbow {
0% {border-color: #ff4d4d;} 25% {border-color: #ff944d;} 50% {border-color: #a0ff4d;} 75% {border-color: #4da6ff;} 100% {border-color: #b84dff;}
}
/* webring */
.webring li { margin:6px 0; }
.webring a { color: violet; text-decoration: underline wavy pink; }
/* floating widgets */
.floating-widgets {
position: fixed; right: 12px; bottom: 12px; display:flex; flex-direction:column; gap:10px; z-index:1000;
}
.widget {
background:#ffe6ff; border:2px solid var(--hotpink); padding:6px 12px; border-radius:10px; font-size:0.85em;
box-shadow:0 0 10px rgba(255,51,170,0.12);
}
/* footer */
.footer { text-align:center; margin-top:40px; font-size:0.95em; background:#fff0f8; padding:12px; border:2px dashed var(--hotpink); border-radius:15px; }
/* decorative chaos pool (absolutely positioned drifting bits) */
#decorative-pool { position: absolute; left: 0; top: 0; width: 100%; height: 0; pointer-events: none; overflow: visible; }
#decorative-pool span, #decorative-pool div {
position: absolute; opacity: 0.9; font-size: 20px; animation: drift 12s linear infinite;
}
@keyframes drift { 0%{transform: translateY(0) rotate(0)} 100%{transform: translateY(-900px) rotate(360deg)} }
.d-heart { color: var(--hotpink); left: 10%; top: 60%; animation-duration:14s; font-size:22px; }
.d-star { color: gold; left: 35%; top: 75%; animation-duration:12s; font-size:18px; }
.d-sparkle { color: violet; left: 60%; top: 70%; animation-duration:10s; font-size:20px; }
/* tiny confetti animation used by JS */
.tiny-confetti { animation: fadeout 2.5s forwards; z-index:1200; pointer-events:none; }
@keyframes fadeout { 0%{opacity:1; transform: translateY(0) scale(1)} 100%{opacity:0; transform: translateY(-40px) scale(0.6)} }
/* buttons & form */
.heart-btn { border:none; background:none; font-size:1.9em; cursor:pointer; transition: transform 0.25s; }
.heart-btn:hover { transform: scale(1.4) rotate(8deg); }
.heart-btn.popped { color: red; text-shadow: 0 0 8px rgba(255,0,0,0.3); }
.submit-btn {
background: var(--hotpink); border:2px solid #ff1493; color:#fff; font-family:inherit; padding:7px 12px;
border-radius:10px; cursor:pointer; transition: transform 0.15s, box-shadow 0.15s;
}
.submit-btn:hover { transform: translateY(-2px); box-shadow:0 6px 18px rgba(255,20,147,0.12); }
/* small responsive tweaks */
@media (max-width:600px){
.hero-row { flex-direction:column; align-items:center; }
.profile-card, .mini-shrine { width: 92%; }
.title { font-size:2.2em; }
}
}