:root{
--bg:#ffffff;
--text:#222;
--card:#f4f4f4;
--accent:#6c63ff;
}

.dark{
--bg:#121212;
--text:#ffffff;
--card:#1f1f1f;
}

body{
margin:0;
font-family:Arial;
background:var(--bg);
color:var(--text);
transition:0.4s;
}

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 10%;
}

.logo{
color:var(--accent);
}

#toggle{
border:none;
background:var(--card);
padding:8px 14px;
border-radius:20px;
cursor:pointer;
font-size:18px;
}

.hero{
text-align:center;
padding:80px 20px;
}


.profile-frame:hover{
transform:scale(1.05);
}


.profile-frame{
transition:0.4s;
width:160px;
height:160px;
margin:auto;
border-radius:50%;
padding:5px;
background:linear-gradient(135deg,#6c63ff,#8f88ff);
box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.profile{
width:100%;
height:100%;
border-radius:50%;
object-fit:contain;
background:white;
}

.typing{
color:var(--accent);
height:25px;
}

.about{
padding:60px 10%;
text-align:center;
}

.projects{
padding:60px 10%;
}

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

.card{
background:var(--card);
padding:25px;
border-radius:12px;
transition:0.3s;
}

.card:hover{
transform:translateY(-8px);
}

footer{
text-align:center;
padding:30px;
opacity:0.7;
}

@media(max-width:700px){

header{
padding:20px;
}

.about,.projects{
padding:40px 20px;
}

}