:root{

    --bg:#FEFCF2;
    --card:#FFFFFF;

    --title:#1F1F1F;
    --subtitle:#3D3D3D;
    --text:#000000B0;

    --border:#4F4F4F;
    --shadow:#4F4F4F;

    --yellow:#FFD95B;
    --blue:#89AEFF;
    --green:#8EE3C6;
    --pink:#FF9CBD;
    --purple:#C9A8FF;

    --radius:24px;

    --font-title:'Unbounded',sans-serif;
    --font-body:'Space Mono',monospace;

}

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

html{
    scroll-behavior:smooth;
}

body{

    background:var(--bg);

    font-family:var(--font-body);

    color:var(--text);

    padding:50px 20px;

}

.container{

    width:min(760px,100%);
    margin:auto;

}

/* ANIMATIONS */

@keyframes fadeInUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero{

    animation:fadeInUp .6s ease both;

}

.project:nth-child(2){

    animation:fadeInUp .6s ease .15s both;

}

.project:nth-child(3){

    animation:fadeInUp .6s ease .3s both;

}

.project:nth-child(4){

    animation:fadeInUp .6s ease .45s both;

}

.project:nth-child(5){

    animation:fadeInUp .6s ease .6s both;

}

.project:nth-child(6){

    animation:fadeInUp .6s ease .75s both;

}

.social{

    animation:fadeInUp .6s ease .9s both;

}

/* GENERAL */

.card,
.project,
.social a{

    border-radius:var(--radius);

    box-shadow:0 6px 20px rgba(0,0,0,0.2);

    transition:transform .3s ease, box-shadow .3s ease;

}

.card:hover,
.project:hover,
.social a:hover{

    transform:translateY(-3px);

}

/* HERO */

.hero{

    display:flex;

    align-items:center;

    gap:32px;

    background:var(--card);

    padding:32px;

    margin-bottom:28px;

}

.avatar{

    width:120px;
    height:120px;

    border-radius:50%;

    background:#D8D8D8;

    flex-shrink:0;

    overflow:hidden;

}

.avatar img{

    width:100%;
    height:100%;
    object-fit:cover;

}

.hero-content{

    flex:1;

}

.hero h1{

    font-family:var(--font-title);

    font-size:2.2rem;

    line-height:1;

    color:var(--title);

    margin-bottom:18px;

}

.hero h2{

    font-family:var(--font-body);

    font-size:1rem;

    font-weight:700;

    color:var(--subtitle);

    margin-bottom:14px;

}

.hero p{

    font-family:var(--font-body);

    font-size:.95rem;

    line-height:1.8;

    color:var(--text);

    max-width:520px;

}

/* PROJECTS */

.project{

    display:flex;

    justify-content:space-between;

    align-items:center;

    text-decoration:none;

    padding:28px;

    margin-bottom:22px;

}

.project h3{

    font-family:var(--font-title);

    font-size:1.4rem;

    color:var(--title);

    line-height:1.2;

}

.project i{

    font-size:24px;

    color:var(--title);

    flex-shrink:0;

    transition:.25s;

}

.project:hover i{

    transform:translate(3px,-3px);

}

.project h3:last-child{
    margin-bottom:0;
}

.project p{

    font-family:var(--font-body);

    font-size:.88rem;

    line-height:1.7;

    max-width:500px;

    color:var(--text);

}

.yellow{
    background:var(--yellow);
}

.yellow:hover{
    box-shadow:0 8px 30px rgba(255,217,91,0.5);
}

.blue{
    background:var(--blue);
}

.blue:hover{
    box-shadow:0 8px 30px rgba(137,174,255,0.5);
}

.green{
    background:var(--green);
}

.green:hover{
    box-shadow:0 8px 30px rgba(142,227,198,0.5);
}

.pink{
    background:var(--pink);
}

.pink:hover{
    box-shadow:0 8px 30px rgba(255,156,189,0.5);
}

.purple{
    background:var(--purple);
}

.purple:hover{
    box-shadow:0 8px 30px rgba(201,168,255,0.5);
}

/* SOCIAL */

.social{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-top:42px;

}

.social a{

    width:68px;

    height:68px;

    background:var(--card);

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

}

.social a i{

    font-size:28px;

    color:var(--title);

    transition:.25s;

}

.social a:hover i{

    transform:scale(1.15);

}

/* FOCUS */

a:focus-visible{

    outline:3px solid var(--border);

    outline-offset:4px;

}

/* SELECTION */

::selection{

    background:var(--yellow);

    color:var(--title);

}

/* SCROLLBAR */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--bg);

}

::-webkit-scrollbar-thumb{

    background:var(--border);

    border-radius:999px;

}

/* FOOTER */

.site-footer{

    margin-top:42px;

    padding-bottom:28px;

}

.footer-card{

    display:flex;

    justify-content:center;

    gap:24px;

    background:var(--card);

    border-radius:var(--radius);

    box-shadow:0 6px 20px rgba(0,0,0,0.2);

    padding:20px 28px;

    animation:fadeInUp .6s ease 1.05s both;

}

.footer-item{

    display:flex;

    align-items:center;

    gap:10px;

}

.footer-item i{

    font-size:18px;

    color:var(--subtitle);

    flex-shrink:0;

}

.footer-item p{

    font-family:var(--font-body);

    font-size:.85rem;

    color:var(--subtitle);

    margin:0;

}

.footer-item a{

    display:flex;

    align-items:center;

    gap:10px;

    text-decoration:none;

    color:var(--subtitle);

    transition:color .2s;

}

.footer-item a:hover{

    color:var(--title);

}

.footer-item a:hover i{

    color:var(--title);

}

/* PRIVACY */

.privacy .hero h1{

    font-size:1.6rem;

}

.privacy-content{

    background:var(--card);

    border-radius:var(--radius);

    box-shadow:0 6px 20px rgba(0,0,0,0.2);

    padding:32px;

    margin-bottom:28px;

}

.privacy-content h2{

    font-family:var(--font-title);

    font-size:1.1rem;

    color:var(--title);

    margin-top:28px;

    margin-bottom:12px;

}

.privacy-content p{

    font-family:var(--font-body);

    font-size:.9rem;

    line-height:1.8;

    color:var(--text);

    margin-bottom:12px;

}

.privacy-content ul{

    font-family:var(--font-body);

    font-size:.9rem;

    line-height:1.8;

    color:var(--text);

    margin-bottom:12px;

    padding-left:24px;

}

.privacy-content li{

    margin-bottom:6px;

}

.privacy-content a{

    color:var(--subtitle);

    text-decoration:underline;

}

.privacy-content a:hover{

    color:var(--title);

}

.back-link{

    text-align:center;

    margin-bottom:28px;

    padding-bottom:28px;

}

.back-link a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-family:var(--font-body);

    font-size:.9rem;

    color:var(--subtitle);

    text-decoration:none;

    background:var(--card);

    border-radius:var(--radius);

    box-shadow:0 6px 20px rgba(0,0,0,0.2);

    padding:16px 28px;

    transition:transform .3s ease, box-shadow .3s ease, color .2s;

}

.back-link a:hover{

    color:var(--title);

    transform:translateY(-3px);

}

.back-link a i{

    font-size:14px;

    transition:transform .2s;

}

.back-link a:hover i{

    transform:translateX(-3px);

}

/* RESPONSIVE */

@media (max-width:768px){

    body{

        padding:30px 16px;

    }

    .hero{

        flex-direction:column;

        text-align:center;

        gap:24px;

    }

    .hero h1{

        font-size:2.7rem;

    }

    .hero p{

        max-width:100%;

    }

    .project{

        flex-direction:row;

        align-items:center;

    }

    .project i{

        font-size:20px;

    }

}

@media (max-width:480px){

    .hero{

        padding:24px;

    }

    .hero h1{

        font-size:2.2rem;

    }

    .project{

        padding:22px;

    }

    .project h3{

        font-size:1rem;

    }

    .project p{

        font-size:.82rem;

    }

    .social{

        gap:14px;

    }

    .social a{

        width:58px;

        height:58px;

    }

    .privacy-content{

        padding:24px;

    }

    .footer-card{

        flex-direction:column;

        gap:16px;

        padding:18px;

    }

}