@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import 'https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap';

/* ========================================
   ROOT
======================================== */

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

html{
    scroll-behavior:smooth;
}

:root{

    --bg:#000000;

    --text:#efefef;

    --muted:#c0c0c0;

    --border:#2a2a2a;

    --accent: #9333ea;
}

body.light{

    --bg:#faf9f6;

    --text:#1d1d1d;

    --muted:#252525;

    --border:#dddddd;

    --accent:#9333ea;

}

body{
    font-family:"Inter",sans-serif;

    background:var(--bg);
    color:var(--text);

    transition:
        background .25s ease,
        color .25s ease;

    line-height:1.75;

    -webkit-font-smoothing:antialiased;
}

/* ========================================
   GENERAL
======================================== */

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

p{
    color:var(--muted);
    margin-bottom:20px;
}

h1 {
    font-family: "Poppins";
}

h1 {
    color: var(--text);
    
}

h2{
    font-size:2.5rem;
    font-weight:600;
    letter-spacing:-0.04em;
    margin-bottom:20px;
  

}

/* ========================================
   PETALS
======================================== */

#petalCanvas {

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:-1;

}

/* ========================================
   HEADER
======================================== */

header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:120px;
}

.logo{
    font-size:1rem;
    font-weight:600;
    letter-spacing:-0.03em;
    color:var(--text);
    text-decoration:none;
}

.logo:hover{
    opacity:.6;
}

nav{
    display:flex;
    gap:32px;
}

nav a{
    color:var(--muted);
    text-decoration:none;
    font-size:.95rem;
    transition:.2s ease;
}

nav a:hover{
    color:var(--accent);
}

.theme-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    padding:8px;
    color:var(--muted);
    cursor:pointer;
}

.theme-toggle svg{
    width:20px;
    height:20px;
}

.theme-toggle:hover{
    color:var(--accent);
}

/* ========================================
   HERO
======================================== */

.hero{
    margin-bottom:80px;
}

.hero p {
    font-size:1.2rem;
    line-height:1.7;
    color:var(--muted);
    margin-bottom:28px;
}

.hero strong {
    color:var(--text);
    font-weight:500;
}

.profile {
    display:flex;
    align-items:center;
    gap:32px;
    margin-bottom:60px;
}

.profile-image {
    position:relative;
    width:150px;
    height:150px;
    border-radius: 50%;
    flex-shrink:0;

}

.profile-info h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height:1;
    margin-bottom:12px;
}

/* ========================================
   PROJECTS
======================================== */

.project{
    margin-bottom:100px;
}

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

.project img{
    width:100%;
    display:block;
    margin-bottom:20px;

    border-radius: 20px;
}

.project a{
    display:inline-block;
    margin-top:12px;
    font-weight:500;
}

.project-header{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:10px;
}

.project-header h3{
    margin:0;
}

.status{
    font-size:.75rem;
    letter-spacing:.02em;
    color:var(--muted);
    border:1px solid var(--border);
    padding:4px 10px;
    border-radius:999px;
}

/* Different states */

.status-progress{
    color: #f8a830;
    border-color: #f8a830;
}

.status-beta{
    color:#c084fc;
}

.status-archive{
    opacity:.6;
}

.status-update {
    color: #417cfc;
    border-color: #417cfc;
}

/* ========================================
   STACK
======================================== */

.stack ul{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    list-style:none;
}

.stack li{
    padding:8px 16px;
    border:2px solid var(--accent);
    border-radius:999px;
    color:var(--text);
    font-size:.95rem;
}

/* ========================================
   PAGE
======================================== */

.page{
    width:min(760px, calc(100% - 48px));
    margin:auto;
    padding:48px 0 140px;
}

/* ========================================
   SECTIONS
======================================== */

section{
    margin-bottom:80px;
}

section:last-of-type {
    margin-bottom: 40px;
}

h3{
    font-size:1.8rem;
    letter-spacing:-0.04em;
    margin-bottom:18px;
}

/* ========================================
   CONTACT
======================================== */

.links{
    display:flex;
    flex-wrap:wrap;
    gap:28px;
}

.links a{
    font-size:1.1rem;
    font-weight:500;
}

/* ========================================
   SELECTION
======================================== */

::selection{
    background:#111;
    color:white;
}

/* ========================================
   SCROLLBAR
======================================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-thumb{
    background:#d8d8d8;
}

::-webkit-scrollbar-thumb:hover{
    background:#bdbdbd;
}

/* ========================================
   MOBILE
======================================== */

@media (max-width:700px){

    .page{
        width:calc(100% - 32px);
        padding-top:32px;
        text-align: center;
    }

    header{
        margin-bottom:80px;
    }

    section{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    section h2 {
        text-align: center;
    }

    .hero h1{
        font-size:3.8rem;
    }

    h2{
        margin-bottom:40px;
    }

    .project{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .project-header {
        align-self: center;
    }

    .project-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .links {
        justify-content: center;
    }

    ul {
        justify-content: center;
    }

    .profile {
        display: block;
    }
}