:root{
--bg:#0a0a0a;
--text:#eaeaea;
--secondary:#a1a1a1;
--card:#141414;
--accent:#3b82f6;
}

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

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
background:var(--bg);
color:var(--text);
line-height:1.6;
}

.container{
max-width:1100px;
margin:auto;
padding:80px 20px;
}

h1{
font-size:3rem;
letter-spacing:-1px;
}

h2{
font-size:1.6rem;
margin-bottom:25px;
color:var(--secondary);
}

section{
margin-top:80px;
}

.hero p{
margin-top:15px;
color:var(--secondary);
font-size:1.1rem;
}

.projects{
    display:block;
}

.project{
    width: 100%;
    background:var(--card);
    padding:25px;
    border-radius:14px;
    transition:transform .2s ease, background .2s ease;
    border:1px solid rgba(255,255,255,0.05);
    break-inside: avoid;
    margin-bottom: 25px;
}

.project-content{
    height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);

    transition:
        height 0.85s ease,
        opacity 0.75s ease;
}

.project-details[open] .project-content{
    opacity: 1;
    transform: translateY(0);
}

.project-details summary{
    cursor:pointer;
    margin-top:10px;
    font-weight:500;
    color:#60a5fa;
}

.project-details summary::marker{
    display:none;
}

@keyframes details-open{
    from{
        opacity:0;
        transform:translateY(-4px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.feature-list {
    list-style-position: inside;
    padding-left: 0;
    margin-top: 8px;
}

.feature-list li {
    margin-bottom: 6px;
}

.project-details summary {
    cursor: pointer;
    margin-top: 10px;
    color: #60a5fa;
}

.section-title {
    margin-top: 12px;
    font-weight: 600;
}

.project:hover{
transform:translateY(-4px);
background:#1a1a1a;
}

.project-links{
margin-top:12px;
font-size:.95rem;
}

.project-links a{
margin-right:14px;
opacity:.8;
}

.project-links a:hover{
opacity:1;
}

.project h3{
margin-bottom:10px;
}

a{
color:var(--accent);
text-decoration:none;
}

.contact a{
margin-right:20px;
}

.footer{
margin-top:80px;
color:var(--secondary);
font-size:.9rem;
}


.github-avatar-container{
    position: fixed;
    top: 40px;
    right: 100px;
    pointer-events: none;
    z-index: -1;
}

.github-avatar{
    width: 340px;
    height: 340px;

    border-radius: 50%;
    object-fit: cover;

    opacity: 0.35;
    filter: blur(1px) contrast(1.1) saturate(1.1);

    box-shadow: 0 15px 40px rgba(0,0,0,0.4);

    transform: translateY(0);
    transition: transform 0.1s linear;
    mask-image: radial-gradient(circle at center, black 55%, transparent 80%);
    background: radial-gradient(
        circle,
        rgba(255,255,255,0.06),
        transparent 70%
    );
}

.hero-links{
margin-top:15px;
}

.hero-links a{
margin-right:15px;
opacity:.8;
}

.hero-links a:hover{
opacity:1;
}

#backToTop{
display:flex;
align-items:center;
justify-content:center;
position:fixed;
bottom:40px;
right:40px;

width:60px;
height:60px;
font-size:20px;

border:none;
border-radius:50%;

background:#1a1a1a;
color:white;

cursor:pointer;

opacity:0;
pointer-events:none;
transition:opacity .2s ease, transform .2s ease, background .2s ease;
}

#backToTop.visible{
opacity:1;
pointer-events:auto;
}

#backToTop:hover{
    transform:translateY(-4px);
    background:#1a1a1a;
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

@media(max-width:700px){

.github-avatar-container{
display:none;
}

h1{
font-size:2.4rem;
}

}

@media (hover: none){
#backToTop{
display:none;
}
}