:root{
  --bg:#0f0f10;
  --panel:#181818;
  --muted:#9aa0a6;
  --text:#e6e6e6;
  --accent:#8f8f8f;
  --maxw:980px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
a{color:var(--accent);text-decoration:none}
.container{max-width:var(--maxw);margin:32px auto;padding:28px}
.header-row{display:flex;justify-content:space-between;align-items:center}
.nav{display:flex;gap:18px;font-size:0.95rem}
.brand{display:flex;flex-direction:column;align-items:flex-start;margin-left:6%}
.brand .title{font-size:38px;font-weight:700;letter-spacing:0.6px}
.brand .subtitle{font-size:14px;color:var(--muted);margin-top:6px}
.bio{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);padding:18px;margin-top:22px;border-radius:8px;max-width:640px}
.buttons-row{display:flex;gap:12px;margin-top:16px}
.btn{flex:1;padding:12px 16px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.06);text-align:center;cursor:pointer;display:inline-block}
.btn:hover{border-color:rgba(255,255,255,0.12)}
.achieve{display:block;margin-top:12px;padding:12px 14px;border-radius:8px;border:1px dashed rgba(255,255,255,0.04);width:260px;text-align:center}
.footer{display:flex;justify-content:center;gap:18px;margin-top:48px;opacity:0.9}
.icon{width:22px;height:22px;display:inline-block;filter:grayscale(1);opacity:0.9}
.small-note{font-size:12px;color:var(--muted);margin-top:8px}
.btn, .btn[type="submit"] {
  color: white !important;
}
@media(max-width:720px){
  .header-row{flex-direction:column;align-items:flex-start}
  .buttons-row{flex-direction:column}
}
.markdown-body {
  background: transparent;
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
  word-wrap: break-word;
}

/* basic markdown elements */
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
  margin-top: 18px;
  margin-bottom: 8px;
  color: var(--text);
}
.markdown-body p { margin: 10px 0; }
.markdown-body a { color: var(--accent); }
.markdown-body code { background: rgba(255,255,255,0.03); padding: 2px 6px; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; font-size:0.95em; }
.markdown-body pre { background: #0b0b0b; padding: 12px; border-radius:8px; overflow:auto; }
.markdown-body img { max-width:100%; height:auto; display:block; margin:12px 0; border-radius:6px; }
.markdown-body blockquote { border-left:3px solid rgba(255,255,255,0.04); padding-left:12px; color:var(--muted); margin:10px 0; }
.markdown-body ul, .markdown-body ol { margin-left:20px; }
.markdown-body table { border-collapse:collapse; width:100%; margin:12px 0; }
.markdown-body table th, .markdown-body table td { padding:8px; border:1px solid rgba(255,255,255,0.04); }

/* ===== PROJECTS PAGE ===== */
.projects-header {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 50px;
}

.projects-title {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
}

.projects-subtitle {
  color: var(--muted);
  font-size: 16px;
}

.projects-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 36px;
  padding: 0 10px;
  max-width: 960px;
  margin: 0 auto;
}

.project-card {
  flex: 0 1 300px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  border-color: rgba(255,255,255,0.08);
}

.project-card img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 18px;
  opacity: 0.95;
  transition: opacity 0.3s ease, transform 0.4s ease;
}

.project-card:hover img {
  opacity: 1;
  transform: scale(1.08);
}

.project-info h3 {
  font-size: 20px;
  margin-bottom: 8px;
  color: var(--text);
  letter-spacing: 0.5px;
}

.project-info p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 720px) {
  .projects-title {
    font-size: 32px;
  }
  .projects-grid {
    gap: 22px;
  }
  .project-card {
    padding: 20px;
  }
}

/* ===== UNIVERSAL FADE-IN EFFECT ===== */
@keyframes globalFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body {
  animation: globalFadeIn 0.9s ease forwards;
}
html.birthday-mode-page body {
  background-image: url('/assets/img/hbdbg.png');
  background-repeat: repeat-y;     /* repeat only downward */
  background-size: auto;           /* keep original FULL resolution */
  background-position: top center; /* center horizontally */
  background-attachment: scroll;   /* natural scrolling */
}

html.birthday-mode-page body::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.35); /* dim background slightly */
  pointer-events: none;
  z-index: -1;
}