html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:Arial, sans-serif;
background:#0d1117;
color:#c9d1d9;
line-height:1.6;
}

nav{
position:sticky;
top:0;
background:#161b22;
padding:12px 20px;
z-index:100;
border-bottom:1px solid #21262d;
}

.nav-container{
max-width:900px;
margin:auto;
display:flex;
gap:20px;
}

nav a{
color:#c9d1d9;
text-decoration:none;
font-size:14px;
}

nav a:hover{
color:#00ff9c;
}

.hero{
padding:70px 20px 40px 20px;
}

.hero-container{
max-width:900px;
margin:auto;
display:flex;
align-items:center;
gap:40px;
}

.logo-box img{
width:150px;
}

.hero-text h1{
margin:0;
font-size:28px;
}

.site-name{
font-size:18px;
color:#00ff9c;
margin-top:5px;
}

.subtitle{
margin-top:15px;
color:#8b949e;
}

section{
max-width:900px;
margin:auto;
padding:60px 20px;
border-bottom:1px solid #21262d;
}

h2{
border-left:4px solid #00ff9c;
padding-left:10px;
}

.skills-section{
max-width:700px;
}

.skill{
margin:15px 0;
}

.bar{
width:100%;
height:8px;
background:#2b2b2b;
border-radius:5px;
overflow:hidden;
}

.progress{
height:100%;
background:#00ff9c;
}

.linux{width:80%;}
.redes{width:70%;}
.servidores{width:60%;}
.programacion{width:50%;}
.sql{width:27%;}


.skills{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:25px;
}

.card{
background:#161b22;
padding:18px;
border-radius:6px;
transition:all 0.25s ease;
}

.card:hover{
transform:translateY(-5px);
background:#1f2630;
}

.tech{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:20px;
}

.tag{
background:#21262d;
padding:7px 12px;
border-radius:4px;
font-size:14px;
}

footer{
padding:30px;
text-align:center;
background:#161b22;
color:#8b949e;
}

.footer-links{
margin-top:10px;
font-size:14px;
}

.reveal{
opacity:0;
transform:translateY(40px);
transition:all 0.8s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}


@media (max-width:700px){

.hero-container{
flex-direction:column;
text-align:center;
}

.logo-box img{
width:120px;
}

.nav-container{
justify-content:center;
flex-wrap:wrap;
}

.card ul{
line-height:1.7;
}