/* FRUITCODE Pastel Theme — v1.0 */
:root{
  --bg-1:#FFF9FF; --bg-2:#F5EFFF; --bg-3:#F2FBFF;
  --ink:#2E224E; --muted:#5f5780;
  --pink:#FF7DA7; --yellow:#F9F871; --purple:#C8A2FF; --blue:#9FD8FF; --green:#8EF0C1;
  --card:#FFFFFF; --shadow: 0 10px 30px rgba(200,162,255,.25);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family: Nunito,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--ink);
background: linear-gradient(180deg,var(--bg-1),var(--bg-2) 50%,var(--bg-3) 100%); line-height:1.6;}
.container{max-width:1200px;margin:0 auto;padding: clamp(16px, 3vw, 32px);} .grid{display:grid;gap:clamp(16px,2vw,24px);}
.grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}}
.header{position:sticky; top:0; z-index:50; background: rgba(255,255,255,.75); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(200,162,255,.4);}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-family: Poppins, system-ui, sans-serif; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink);}
.nav a{color:var(--ink); text-decoration:none; font-weight:700; font-family:Poppins,system-ui,sans-serif; padding:10px 12px; border-radius:12px;}
.nav a.active, .nav a:hover{ background: linear-gradient(90deg,var(--pink),var(--purple)); color:#fff; box-shadow: 0 6px 18px rgba(255,125,167,.35);}
.menu-toggle{display:none;background:none;border:2px solid var(--purple);padding:8px 12px;border-radius:10px}
@media(max-width:840px){.menu-toggle{display:block} .links{display:none;flex-direction:column;align-items:flex-start;background:rgba(255,255,255,.95);padding:12px;border-radius:14px;box-shadow:var(--shadow);} .links.show{display:flex}}
.hero{padding: clamp(48px, 8vw, 96px) 0; text-align:center;
background: radial-gradient(60% 60% at 50% 20%, rgba(255,125,167,.25), transparent 60%), radial-gradient(60% 60% at 20% 80%, rgba(201,162,255,.25), transparent 60%), radial-gradient(60% 60% at 80% 80%, rgba(159,216,255,.25), transparent 60%);}
h1,h2,h3{font-family:Poppins,system-ui,sans-serif;margin:0 0 .4em} h1{font-size: clamp(36px, 6vw, 64px);} h2{font-size: clamp(26px, 4vw, 40px);} .lead{font-size: clamp(16px, 2.2vw, 20px); color: var(--muted)}
.btn{display:inline-block; padding:12px 18px; border-radius:16px; background: linear-gradient(90deg,var(--pink),var(--purple)); color:#fff; text-decoration:none; font-weight:800; letter-spacing:.02em; box-shadow: var(--shadow);} .btn:hover{filter:brightness(1.05)}
.btn-outline{background:#fff; color:var(--ink); border:2px solid var(--pink);} .btn-outline:hover{background:linear-gradient(90deg,var(--yellow),#fff);}
.card{background:var(--card); border-radius:20px; box-shadow: var(--shadow); overflow:hidden; border:1px solid rgba(200,162,255,.35);} .card img{width:100%; display:block; aspect-ratio:1/1; object-fit:cover} .card .pad{padding:16px}
.section{padding: clamp(32px, 6vw, 72px) 0;} .section .header-line{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:clamp(16px,3vw,24px);}
.badge{display:inline-block; padding:6px 10px; border-radius:999px; font-weight:800; font-size:.85rem; background:linear-gradient(90deg,var(--yellow),var(--green)); color:#233;}
.footer{background: var(--bg-2); border-top:1px solid rgba(200,162,255,.4); padding:32px 0; color:#3a2d60;} .footer a{color:inherit;text-decoration:none} .footer .socials a{margin-right:10px}
.center{text-align:center} .stack{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center} .kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; background:#fff;border:1px solid #ddd;border-bottom-width:2px;padding:2px 6px;border-radius:6px}
.table{width:100%;border-collapse:collapse;font-size:15px} .table tr{border-bottom:1px solid rgba(200,162,255,.35)} .table th,.table td{text-align:left;padding:10px 6px}

.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(16px, 2vw, 24px);
  justify-content: center; /* NEW: centers the grid */
}

@media (max-width: 960px) {
  .grid-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .grid-5 {
    grid-template-columns: 1fr;
  }
}
  
  /* Generic layout fixes */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.section {
  padding: 60px 0;
}

.center {
  text-align: center;
}

.pad {
  padding: 16px;
}

.album-cover {
  width: 90%;
  max-width: 260px;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
  box-shadow: 0 6px 20px rgba(255,180,255,.25);
  transition: transform .35s ease, box-shadow .35s ease;
}

.cover-wrap:hover .album-cover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(255,200,255,.6),
              0 0 40px rgba(255,160,240,.4);
}

.cover-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/images/sparkle.gif") center/cover no-repeat;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  mix-blend-mode: screen;
}

.cover-wrap:hover::after { opacity: 1; }

@media (max-width: 800px) {
  #code-love-zip .album-grid {
    grid-template-columns: 1fr;
  }
  #code-love-zip iframe {
    height: 300px;
  }
  .album-cover {
    max-width: 200px;
  }
}

}