body{
background:#000;
color:#ddd;
font-family:monospace;
margin:0;
}

/* NAVBAR */
.navbar{
display:flex;
justify-content:flex-end;
gap:20px;
padding:20px;
border-bottom:1px solid #111;
}

.navbar a{
color:#aaa;
text-decoration:none;
}

/* CONTAINER */
.container{
max-width:800px;
margin:auto;
padding:20px;
}

/* HERO */
.cover img{
width:100%;
height:200px;
object-fit:cover;
border-radius:16px;
filter:brightness(0.6);
}

.hero-content{
margin-top:-40px;
padding:0 10px;
}

.dp{
width:80px;
height:80px;
border-radius:50%;
border:3px solid #000;
margin-top:-40px;
}

h1{
margin:10px 0 5px;
}

.tagline{
color:#aaa;
font-size:14px;
}

.socials{
display:flex;
gap:15px;
margin:10px 0;
}

.socials a{
color:#aaa;
font-size:18px;
}

.socials a:hover{
color:#fff;
}

.bio{
color:#bbb;
line-height:1.6;
font-size:14px;
}

/* SECTION */
.section-title{
margin-top:40px;
color:#eee;
}

.section-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:40px;
}

/* CARDS */
.card{
border:1px solid #222;
padding:20px;
border-radius:15px;
margin-top:20px;
background:#050505;
}

/* SKILLS */
.skills-wrapper{
overflow:hidden;
display:flex;
flex-direction:column;
gap:12px;
margin-top:15px;
}

.skills-track{
display:flex;
gap:12px;
width:max-content;
}

.skill{
border:1px solid #333;
padding:6px 12px;
border-radius:8px;
background:#0a0a0a;
font-size:13px;
white-space:nowrap;
}

/* ANIMATION */
.skills-track.left{
animation:scrollLeft 20s linear infinite;
}

.skills-track.right{
animation:scrollRight 20s linear infinite;
}

@keyframes scrollLeft{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}

@keyframes scrollRight{
0%{transform:translateX(-50%);}
100%{transform:translateX(0);}
}

/* GITHUB */
.github{
width:100%;
margin-top:20px;
}

/* TERMINAL */
.terminal{
margin-top:40px;
padding:20px;
border-left:2px solid #333;
color:#aaa;
}
.cover{
position:relative;
z-index:1;
}

.hero-content{
position:relative;
z-index:2;
}

.dp{
position:relative;
z-index:3;
}