:root {
    --green:#2ecc71; --blue:#3498db; --bg:#0a0a2e; --bg-card:#1a1a4e;
    --text:#e8e8f0; --text-muted:#9999bb;
    --font-display:'Fredoka One',cursive; --font-body:'Nunito',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
    font-family:var(--font-body); background:var(--bg); color:var(--text);
    line-height:1.5; overflow-x:hidden; min-height:100vh;
}
.stars{
    position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0;
    background:
        radial-gradient(1px 1px at 10%20%,rgba(255,255,255,0.8),transparent),
        radial-gradient(1.5px 1.5px at 30%10%,rgba(255,255,255,0.9),transparent),
        radial-gradient(1px 1px at 50%60%,rgba(255,255,255,0.7),transparent),
        radial-gradient(1px 1px at 70%30%,rgba(255,255,255,0.8),transparent),
        radial-gradient(1px 1px at 90%80%,rgba(255,255,255,0.6),transparent),
        radial-gradient(1px 1px at 45%45%,rgba(255,255,255,0.9),transparent);
    background-size:200px 200px; animation:twinkle 4s infinite alternate;
}
@keyframes twinkle{0%{opacity:0.5}100%{opacity:1}}

header{
    position:fixed; width:100%; z-index:100;
    background:rgba(10,10,46,0.9); backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,0.05);
}
nav{max-width:900px;margin:0 auto;padding:0.8rem 1.5rem}
.logo{
    font-family:var(--font-display);font-size:1.3rem;
    background:linear-gradient(135deg,var(--green),var(--blue));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

.hero{
    min-height:100vh; display:flex; align-items:center; justify-content:center;
    padding:5rem 1.5rem 3rem; position:relative; z-index:1;
}
.hero-content{text-align:center; max-width:600px}
.avatar-container{display:flex; flex-direction:column; align-items:center; gap:0.3rem; margin-bottom:1.5rem}
.avatar{
    width:80px; height:80px;
    background:linear-gradient(135deg,var(--green),var(--blue));
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:2.5rem; box-shadow:0 0 25px rgba(46,204,113,0.3);
    animation:float 3s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.avatar-name{
    font-family:var(--font-display); font-size:1.3rem;
    background:linear-gradient(135deg,var(--green),var(--blue));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.hero h1{font-family:var(--font-display);font-size:2rem;margin-bottom:0.8rem}
.highlight{
    background:linear-gradient(135deg,var(--green),var(--blue));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.subtitle{font-size:1rem;color:var(--text-muted);margin-bottom:1.5rem;max-width:450px;margin:0 auto 1.5rem}
.stats{display:flex;justify-content:center;gap:2rem;margin-bottom:1.5rem}
.stat{display:flex;flex-direction:column;align-items:center}
.stat-number{
    font-family:var(--font-display);font-size:2rem;
    background:linear-gradient(135deg,var(--green),var(--blue));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.stat-label{font-size:0.8rem;color:var(--text-muted);margin-top:0.15rem}

.section{padding:3rem 1.5rem;position:relative;z-index:1;max-width:900px;margin:0 auto}
.section.alt{background:#0f0f3e;max-width:none;padding:3rem 1.5rem}
.section.alt>*{max-width:900px;margin:0 auto}
.section-title{font-family:var(--font-display);font-size:1.8rem;text-align:center;margin-bottom:0.5rem}
.section-subtitle{text-align:center;color:var(--text-muted);margin-bottom:2rem;font-size:0.95rem}

.projects-grid,.friends-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;
}
.project-card,.friend-card{
    background:var(--bg-card);border:1px solid rgba(255,255,255,0.05);
    border-radius:14px;padding:1.25rem;text-align:center;transition:transform 0.3s;
}
.project-card:hover,.friend-card:hover{transform:translateY(-4px);border-color:rgba(46,204,113,0.3)}
.project-icon,.friend-avatar{font-size:2rem;margin-bottom:0.7rem}
.friend-avatar{
    width:60px;height:60px;margin:0 auto 0.7rem;
    background:linear-gradient(135deg,var(--green),var(--blue));
    border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;
}
.project-card h3,.friend-card h3{font-family:var(--font-display);font-size:1.05rem;margin-bottom:0.3rem}
.project-card p,.friend-card p{color:var(--text-muted);font-size:0.85rem;margin-bottom:0.7rem}
.tag{
    display:inline-block;padding:0.2rem 0.6rem;border-radius:15px;
    font-size:0.7rem;font-weight:700;background:rgba(52,152,219,0.2);color:#a8d8ea;
}
.friend-card.placeholder{border:2px dashed rgba(255,255,255,0.15)}
.friend-card.placeholder:hover{border-color:var(--green)}

.diary-entries{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.diary-entry{
    background:var(--bg-card);border:1px solid rgba(255,255,255,0.05);
    border-radius:14px;padding:1.25rem;
}
.entry-date{font-size:0.75rem;color:var(--text-muted);font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:0.4rem}
.diary-entry h3{font-family:var(--font-display);font-size:1.05rem;margin-bottom:0.3rem}
.diary-entry p{color:var(--text-muted);font-size:0.9rem;line-height:1.6}
.entry-tag{display:inline-block;margin-top:0.5rem;font-size:0.8rem;font-weight:700;color:var(--green)}

footer{
    position:relative;z-index:1;background:rgba(0,0,0,0.3);
    border-top:1px solid rgba(255,255,255,0.05);padding:2rem;text-align:center;
}
.footer-logo{
    font-family:var(--font-display);font-size:1.2rem;
    background:linear-gradient(135deg,var(--green),var(--blue));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:0.3rem;
}
footer p{color:var(--text-muted);font-size:0.85rem;margin-bottom:0.3rem}
footer a{color:var(--blue);text-decoration:none}
.muted{color:var(--text-muted);font-size:0.85rem}

@media(max-width:768px){
    .hero h1{font-size:1.6rem}
    .section-title{font-size:1.5rem}
    .projects-grid,.friends-grid{grid-template-columns:1fr}
    .avatar{width:70px;height:70px;font-size:2rem}
}