/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}


/* BODY */

body{

font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial;

background:#f6f8fa;

color:#24292f;

line-height:1.5;

}


/* LAYOUT */

.layout{

display:flex;

max-width:1100px;

margin:auto;

padding:40px 20px;

gap:40px;

}


/* SIDEBAR */

.sidebar{

width:280px;

flex-shrink:0;

}

.avatar{

width:100%;

border-radius:50%;

margin-bottom:20px;

}

.sidebar h1{

font-size:24px;

margin-bottom:5px;

}

.role{

color:#57606a;

margin-bottom:20px;

}


/* SIDEBAR NAV */

.sidebar nav{

display:flex;

flex-direction:column;

gap:8px;

}

.sidebar nav a{

text-decoration:none;

color:inherit;

font-weight:500;

font-size:14px;

}

.sidebar nav a:hover{

opacity:0.7;

}


/* MAIN */

.main{

flex:1;

}


/* CARD */

.card{

background:white;

border:1px solid #d0d7de;

border-radius:6px;

padding:24px;

margin-bottom:20px;

}


/* TITLES */

.card h2{

font-size:20px;

margin-bottom:15px;

}


/* LIST */

.card ul{

padding-left:18px;

}

.card li{

margin-bottom:6px;

}


/* GITHUB GRID */

.repo-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:16px;

}

.repo{

border:1px solid #d0d7de;

border-radius:6px;

padding:16px;

background:#f6f8fa;

}

.repo h3{

font-size:16px;

margin-bottom:6px;

}

.repo a{

text-decoration:none;

color:#0969da;

font-weight:600;

}

.repo a:hover{

text-decoration:underline;

}


/* LANGUAGE */

.language-switcher{

position:fixed;

top:20px;

right:20px;

}

#language-select{

border:1px solid #d0d7de;

padding:6px;

border-radius:6px;

background:white;

}


/* DARK MODE BUTTON */

.theme-toggle{

position:fixed;

top:20px;

right:80px;

}

#theme-toggle{

border:1px solid #d0d7de;

background:white;

padding:6px 10px;

border-radius:6px;

cursor:pointer;

}

#theme-toggle:hover{

background:#f3f4f6;

}


/* DARK MODE */

body.dark{

background:#0d1117;

color:#c9d1d9;

}

body.dark .card{

background:#161b22;

border-color:#30363d;

}

body.dark .repo{

background:#161b22;

border-color:#30363d;

}

body.dark .sidebar nav a{

color:inherit;

}

body.dark #theme-toggle{

background:#30363d;

color:#c9d1d9;

}


/* MOBILE */

@media (max-width:900px){

.layout{

flex-direction:column;

padding:20px;

}


/* SIDEBAR */

.sidebar{

width:100%;

text-align:center;

}

.avatar{

width:140px;

margin:auto;

}


/* NAV */

.sidebar nav{

flex-direction:row;

flex-wrap:wrap;

justify-content:center;

gap:12px;

margin-top:20px;

}


/* GRID */

.repo-grid{

grid-template-columns:1fr;

}


/* CARDS */

.card{

padding:20px;

}

}


/* SMALL MOBILE */

@media (max-width:500px){

.sidebar h1{

font-size:20px;

}

.role{

font-size:14px;

}

.avatar{

width:120px;

}

.card h2{

font-size:18px;

}

}


/* SMOOTH SCROLL */

html{

scroll-behavior:smooth;

}


/* SOCIAL ICONS */

#contact{
display:flex;
gap:20px;
margin-top:20px;
}

.social-icon{
color:#333;
transition:0.3s;
}

.social-icon:hover{
color:#0077b5;
transform:scale(1.2);
}