/* RNDM • kawaii + MySpace center (pure CSS, Neocities-friendly) */
@import url("https://fonts.googleapis.com/css2?family=Cute+Font&family=Nunito:wght@400;700;900&display=swap");

/* ===== THEME ===== */
:root{
  --bg:#fff7fb; --bg-2:#fffaff;
  --ink:#574c6a; --ink-2:#8a7aa3;
  --accent:#ff8ec8; --accent-2:#ffd3e8;
  --mint:#b9f5e2; --sky:#cfe7ff;
  --ring:#ffd8ef; --card:#ffffffee;
  --shadow:0 10px 30px rgba(255,142,200,.22);
  --radius:18px;
}

/* ===== BASE ===== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; color:var(--ink);
  font-family:"Nunito", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height:1.65;
  background:
    radial-gradient(60vmax 60vmax at 10% -10%, var(--accent-2) 0%, transparent 60%),
    radial-gradient(50vmax 50vmax at 110% 0%, var(--sky) 0%, transparent 60%),
    radial-gradient(40vmax 40vmax at -10% 110%, var(--mint) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* selection + (optional) scrollbar flair */
::selection{ background:var(--accent-2); color:var(--ink); }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--accent), var(--mint));
  border-radius:999px; border:2px solid var(--bg);
}

/* ===== LAYOUT WRAPPER ===== */
.wrap{ max-width:1000px; margin:0 auto; padding:20px; }

/* ===== HEADER ===== */
.site-header{
  margin:26px auto 10px;
  background:var(--card);
  border:2px solid var(--ring);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(6px);
}
.site-header .wrap{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.logo{
  margin:0;
  font-family:"Cute Font", cursive;
  font-size:clamp(36px,6vw,60px);
  line-height:1;
  color:var(--accent);
  text-shadow:0 2px 0 #fff, 0 10px 30px rgba(255,140,200,.35);
}

/* NAV */
.nav{ display:flex; gap:10px; flex-wrap:wrap; margin-left:auto; }
.nav a{
  text-decoration:none; font-weight:900;
  padding:8px 14px; border-radius:999px;
  border:2px solid var(--ring); background:#fff; color:var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.nav a:hover{ transform:translateY(-2px); box-shadow:var(--shadow); background:var(--accent-2); }

/* ===== TWO-COLUMN ===== */
.layout{
  display:grid; grid-template-columns:300px 1fr; gap:18px;
}
.right{ display:flex; flex-direction:column; gap:18px; }

/* ===== PANELS ===== */
.panel{
  background:#fff;
  border:2px solid var(--ring);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.panel h3{ margin:0 0 8px; font-weight:900; color:var(--ink); }
.panel p{ margin:0; color:var(--ink-2); }

/* intro blurb */
.panel.intro{
  border-left:6px solid var(--accent);
  padding:20px 22px;
}

/* ===== PROFILE ===== */
.pfp{
  width:100%; max-width:220px; aspect-ratio:1/1; object-fit:cover;
  display:block; margin:0 auto 12px;
  border-radius:22px; border:3px solid #fff;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.name{
  margin:0; text-align:center;
  font-family:"Cute Font", cursive;
  font-size:clamp(28px,4.5vw,44px);
  color:var(--accent);
}
.status{
  text-align:center; margin:6px 0 12px; color:var(--ink-2);
  font-size:.98rem;
}

/* profile blocks */
.block{ margin-top:14px; }
.block h3{ font-size:1.05rem; letter-spacing:.2px; margin:0 0 6px; }

/* clean bullets (no mojibake) */
.block ul{ list-style:none; padding-left:0; margin:0; color:var(--ink-2); }
.block li{ margin:6px 0; position:relative; padding-left:1.2em; }
.block li::before{
  content:"✦"; position:absolute; left:0; top:0; line-height:1; color:var(--accent);
}

/* links list */
.links{ list-style:none; padding:0; margin:0; }
.links li{ margin:6px 0; }
.links a{ color:var(--accent); text-decoration:none; font-weight:800; }
.links a:hover{ text-decoration:underline wavy var(--accent); }

/* footer */
.site-footer{
  text-align:center; color:var(--ink-2); font-size:.95rem;
  padding:18px 0 40px;
}

/* ===== KAWAII HEADER HELPER ===== */
.kawaii-title{ font-family:"Cute Font", cursive; color:var(--accent); }

/* ===== OPTIONAL: FALLING HEARTS =====
Add this HTML inside <body> to enable:
<div class="falling-hearts" aria-hidden="true">
  <span></span><span></span><span></span><span></span><span></span>
  <span></span><span></span><span></span><span></span><span></span>
</div>
*/
.falling-hearts{
  position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0;
}
.falling-hearts span{
  position:absolute; top:-10vh; font-size:clamp(14px, 2.2vw, 22px);
  animation: drop calc(7s + (var(--i,0) * .35s)) linear infinite;
  opacity:.9; filter: drop-shadow(0 4px 6px rgba(255,142,200,.25));
  width:1em; height:1em; transform: rotate(45deg);
  background: var(--c); border-radius: .2em .2em .3em .3em;
}
.falling-hearts span::before,
.falling-hearts span::after{
  content:""; position:absolute; width:1em; height:1em; background: var(--c);
  border-radius:50%; transform: translate(-50%,-50%);
}
.falling-hearts span::before{ left:-.35em; top:0; }
.falling-hearts span::after{  left:.35em;  top:0; }
.falling-hearts span:nth-child(1){ left:5%;  --i:1;  --c:#ff8ec8; }
.falling-hearts span:nth-child(2){ left:15%; --i:6;  --c:#ffd3e8; }
.falling-hearts span:nth-child(3){ left:25%; --i:3;  --c:#b9f5e2; }
.falling-hearts span:nth-child(4){ left:35%; --i:8;  --c:#cfe7ff; }
.falling-hearts span:nth-child(5){ left:45%; --i:2;  --c:#fff5b8; }
.falling-hearts span:nth-child(6){ left:55%; --i:7;  --c:#ff8ec8; }
.falling-hearts span:nth-child(7){ left:65%; --i:4;  --c:#ffd3e8; }
.falling-hearts span:nth-child(8){ left:75%; --i:9;  --c:#b9f5e2; }
.falling-hearts span:nth-child(9){ left:85%; --i:5;  --c:#cfe7ff; }
.falling-hearts span:nth-child(10){left:95%; --i:10; --c:#fff5b8; }
@keyframes drop{
  0%   { transform: translateY(-12vh) rotate(45deg); }
  50%  { transform: translateY(50vh) translateX(6px) rotate(65deg); }
  100% { transform: translateY(110vh) translateX(-6px) rotate(90deg); }
}

/* ===== RESPONSIVE ===== */
@media (max-width:800px){
  .layout{ grid-template-columns:1fr; }
}

/* =========================================================
   ===== CENTERED + MYSPACE VIBE OVERRIDES (AT BOTTOM) =====
   Keeps original kawaii look, just changes layout/centering.
   ========================================================= */
body { text-align:center; }
.wrap { max-width:860px; margin:0 auto; }

/* header centered stack */
.site-header .wrap { justify-content:center; flex-direction:column; gap:10px; }
.logo { text-align:center; }
.nav { margin-left:0; justify-content:center; }

/* MySpace-ish columns (centered) */
.layout {
  grid-template-columns: 280px 540px;
  justify-content: center;
  align-items: start;
}

/* panels: dotted nostalgia */
.panel { border-radius:14px; border:2px dotted var(--ring); }

/* readable main column width */
.right { display:grid; gap:18px; }
.right .panel { max-width:540px; justify-self:center; }

/* center text, but keep lists readable */
.left, .right, .panel, .block, .links { text-align:center; }
.pfp { margin-left:auto; margin-right:auto; }
.name, .status, .panel h3 { text-align:center; }
.block ul { display:inline-block; text-align:left; margin-top:6px; }
.links { display:inline-block; text-align:left; }
.links li { margin:6px 10px; }

/* hearts behind content so clicks work */
.falling-hearts { z-index:0; }
.site-header, .layout, .site-footer { position:relative; z-index:2; }

/* mobile */
@media (max-width:800px){
  .layout { grid-template-columns:1fr; }
  .right .panel { max-width:100%; }
}