:root {
    --color-bg: #0f1117;
    --color-surface: #1a1d27;
    --color-accent: #4ade80;
    --color-primary-text: #f1f5f9;
    --color-secondary-text: #94a3b8;
    --color-border: rgba(255, 255, 255, 0.08);

}

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

body {
    background-color: var(--color-bg);
    color: var(--color-primary-text);
    font-family: "Space Grotesk", sans-serif;
    max-width: 1400px;
    margin: 0 auto;
}


#navbar {
    display: flex;
    justify-content: flex-end;
    padding: 20px;
    padding-right: 60px;
    gap: 20px;
    position: fixed;
    width: 100%;
    background-color: var(--color-bg);
    max-width: 1400px;
    margin: 0 auto;
}

#navbar a {
    color: var(--color-secondary-text)
}

#navbar a:hover {
    color: var(--color-accent)
}

#about {
    display: flex;
    padding: 60px;
    padding-bottom: 0;
}

.about {
    flex-basis: 70%;
    margin-right: 60px;
}

.about p {
    margin-bottom: 20px;
}

.profile-pic {
    flex-basis: 30%;
    max-width: 343px;
    max-height: 343px;
}

.profile-pic img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;

}

a {
    text-decoration: none;
    color: var(--color-accent);
    transition: color 0.2s ease;
}

#about .about-button {
    display: flex;
}

#about a:hover {
    color: var(--color-accent)
}

#about a.btn-primary {
    color: var(--color-bg);
    background-color: var(--color-accent);
    padding: 10px;
    border-radius: 10px;
    margin-right: 20px;
}

#about a.btn-secondary {
    color: var(--color-secondary-text);
    border: 1px solid var(--color-accent);
    padding: 10px;
    border-radius: 10px;
}

#projects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 60px;
    padding-bottom: 0;
}

#projects h2 {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

#projects a {
    display: block;
    padding-top: 10px;
}

#projects a:hover {
    text-decoration: underline;
}



.project-card {
    background-color: var(--color-surface);
    padding: 24px;
    border-radius: 10px;

}

.stack {
    color: var(--color-accent);
    padding-bottom: 10px;
}

#skills {
    padding: 60px;
    padding-bottom: 0;
}

ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin-bottom: 24px;
    gap: 10px;
}

#skills li {
    padding: 10px;
    background-color: var(--color-surface);
    border-radius: 10px;
    border: 1px solid rgba(74, 222, 128, 0.4);


}

#skills h3 {
    margin-bottom: 10px;
}

#experience {
    padding: 60px;
    padding-bottom: 30px;
    padding-top: 30px;

}

#experience p {
    margin-bottom: 20px;
}

#contact {
    display: flex;
    flex-direction: column;
    padding: 60px;
    padding-top: 0;
    align-items: center;
    gap: 20px;
}

.contact-link {
    display: flex;
    gap: 20px;
}

h2 {
    margin-bottom: 20px;
}

#contact h2 {

    margin-bottom: 0;

}

#contact a:hover {
    text-decoration: underline;
}

#hamburger {
    display: none;
}

@media (max-width: 768px) {
    #about {
        flex-direction: column;
        padding: 20px;
        padding-bottom: 0;

    }

    .profile-pic {
        max-width: 100% !important;
        order: -1;
        width: 100%;
    }

    .profile-pic img {
        max-height: 300px;
        object-fit: cover;
    }

    .about {
        width: 100%;
        margin-right: 0;
    }

    #projects {
        grid-template-columns: 1fr;
        padding: 20px;
        padding-bottom: 0;
    }

    #navbar a {
        display: none;
    }

    #hamburger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
    }

    #hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        background-color: var(--color-primary-text);
    }

    #navbar.open {
        flex-direction: column;
        align-items: flex-end;
    }

    #navbar.open a {
        display: block;
        flex-direction: column;
    }

    #navbar.open #hamburger {
        order: -1;
    }
}