*{margin:0;padding:0;box-sizing:border-box;font-family:'Poppins',sans-serif}
html{scroll-behavior:smooth}
body{background:linear-gradient(135deg,#020617,#0a1f44);color:white}

/* remove link underline */
a{text-decoration:none}

/* loader */
#loader{position:fixed;width:100%;height:100vh;background:#000;display:flex;align-items:center;justify-content:center;z-index:9999}
.spinner{width:50px;height:50px;border:5px solid #333;border-top:5px solid #00bfff;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* cursor */
.cursor{position:fixed;width:12px;height:12px;background:#00bfff;border-radius:50%;pointer-events:none;box-shadow:0 0 15px #00bfff}

/* header */
header{display:flex;justify-content:space-between;padding:15px;background:rgba(0,0,0,0.6)}
nav a{color:white;margin:0 10px;font-weight:600}
nav a:hover{color:#00bfff;text-shadow:0 0 10px #00bfff}

/* hero */
.hero{padding:60px 20px;text-align:center}
.hero-container{display:flex;flex-direction:column;align-items:center;gap:20px}
.hero-img img{width:160px;height:160px;border-radius:50%;border:3px solid #00bfff;box-shadow:0 0 25px #00bfff;animation:float 3s infinite}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}

.hero-text h2{font-weight:800;text-shadow:0 0 15px #00bfff}
.hero-text span{color:#00bfff}

/* button */
.btn{background:#00bfff;color:black;padding:10px 20px;border-radius:6px;margin-top:15px;display:inline-block}
.btn:hover{box-shadow:0 0 20px #00bfff}

/* sections */
section{padding:50px 20px;text-align:center}
h2{text-shadow:0 0 10px #00bfff}

/* cards */
.cards{display:flex;flex-direction:column;align-items:center}
.card{background:#111;padding:15px;margin:10px;border-radius:10px;width:90%;max-width:280px}
.card:hover{transform:scale(1.05);box-shadow:0 0 20px #00bfff}

/* skills */
.skill{background:#222;margin:10px auto;width:80%}
.bar{background:#00bfff;padding:5px}

/* contact spacing fix */
#contact p{margin:8px 0}
#contact .btn{margin-top:15px}

/* footer */
footer{padding:20px;background:#000}