/* File: styles.css */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:Arial, sans-serif; color:#333; background:#e5f2ff; }
/* Clouds animation */
.clouds { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; overflow:hidden; z-index:-1; }
.cloud { position:absolute; background:rgba(255,255,255,0.8); border-radius:50%; filter:blur(30px); }
.cloud.x1 { width:200px; height:60px; top:20%; animation:moveCloud 60s linear infinite; left:-20%; }
.cloud.x2 { width:150px; height:45px; top:50%; animation:moveCloud 80s linear infinite; left:-30%; }
.cloud.x3 { width:250px; height:75px; top:75%; animation:moveCloud 100s linear infinite; left:-25%; }
@keyframes moveCloud { from { transform: translateX(0); } to { transform: translateX(130vw); } }

nav { position:sticky; top:0; background:rgba(255,255,255,0.9); backdrop-filter:blur(10px); border-bottom:1px solid #ddd; z-index:1000; }
nav ul { display:flex; list-style:none; overflow-x:auto; padding:0.5rem; }
nav li { margin-right:1rem; }
nav a { text-decoration:none; color:#0070f3; font-weight:600; }
nav a:hover { text-decoration:underline; }

#hero { text-align:center; padding:3rem 1rem; }
.avatar { width:160px; height:160px; border-radius:50%; object-fit:cover; box-shadow:0 4px 12px rgba(0,0,0,0.1); }
.fade-in { opacity:0; animation:fadeIn 1s forwards; }
.delay-1 { animation-delay:0.5s; }
.delay-2 { animation-delay:1s; }
@keyframes fadeIn { to { opacity:1; } }

section { padding:2rem 1rem; max-width:900px; margin:0 auto; background:rgba(255,255,255,0.8); margin-top:1rem; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.05); }
section h2 { margin-bottom:1rem; font-size:1.8rem; color:#0070f3; border-bottom:3px solid #0070f3; display:inline-block; }

.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:0.75rem; list-style:none; }
.grid li { background:#fff; padding:0.75rem; border-radius:4px; text-align:center; box-shadow:0 1px 4px rgba(0,0,0,0.1); }

.job { margin-bottom:1.5rem; }
.job h3 { font-size:1.2rem; color:#005bb5; }
.job time { font-size:0.9rem; color:#666; }

.projects ul, .certifications ul, .achievements ul { list-style:disc inside; margin-left:1rem; }
.btn-inline { display:inline-block; margin-top:0.75rem; padding:0.5rem 1rem; background:#0070f3; color:#fff; text-decoration:none; border-radius:4px; transition:background 0.3s; }
.btn-inline:hover { background:#005bb5; }

footer { text-align:center; padding:1rem; font-size:0.9rem; margin-top:2rem; color:#555; }

@media (prefers-reduced-motion: reduce) {
  *, :before, :after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; }
}
/* navigation */
nav ul { display:flex; list-style:none; }
nav a { margin-right:1rem; color:#0070f3; text-decoration:none; }
/* hero */
.hero { text-align:center; padding:2rem; }
.categories { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:1rem; margin-top:1rem; }
.card { display:block; padding:1rem; background:#fff; border:2px solid #0070f3; border-radius:6px; text-align:center; text-decoration:none; color:#0070f3; transition:background 0.2s; }
.card:hover { background:#e7f0ff; }
/* code block styling */
.code-block { background:#000; color:#0f0; padding:1rem; overflow-x:auto; border-radius:4px; font-family:monospace; }
/* footer */
footer { text-align:center; padding:1rem; margin-top:2rem; font-size:0.9rem; color:#666; }

/* Category card icons */
.card-icon { width:40px; height:auto; display:block; margin:0 auto 0.5rem; object-fit:contain; }

/* Category page header */
.category-header {
  text-align:center;
  padding:1rem;
}
.category-logo {
  width:80px;
  height:80px;
  margin-bottom:0.5rem;
}

/* Ensure cards adjust layout */
.card span {
  display:block;
  font-weight:600;
}

/* Code block styling */

pre.code-block { background:#000; color:#0f0; padding:1rem; overflow-x:auto; border-radius:4px; font-family:monospace; white-space:pre; }

.copy-btn{position:absolute; right:.5rem; top:.5rem; padding:.25rem .5rem; font:12px/1 sans-serif; border:1px solid #0f0; color:#0f0; background:#000; border-radius:4px; cursor:pointer}
.copy-btn:hover{filter:brightness(1.2)}