:root{
    /* color palette */
    --primary-1:#8c45ff;--primary-2:#9d5bff;--primary-3:#ac70ff;--primary-4:#ba85ff;--primary-5:#c799ff;--primary-6:#d3adff;
    --surface-1:#121212;--surface-2:#282828;--surface-3:#3f3f3f;--surface-4:#575757;--surface-5:#717171;--surface-6:#8b8b8b;
    --tonal-1:#1f1826;--tonal-2:#342d3a;--tonal-3:#4a4450;--tonal-4:#615c67;--tonal-5:#7a757e;--tonal-6:#938f97;
    --success-1:#22946e;--success-2:#47d5a6;--success-3:#9ae8ce;
    --warning-1:#a87a2a;--warning-2:#d7ac61;--warning-3:#ecd7b2;
    --danger-1:#9c2121;--danger-2:#d94a4a;--danger-3:#eb9e9e;
    --info-1:#21498a;--info-2:#4077d1;--info-3:#92b2e5;

    /* structural constants */
    --radius:14px;
    --shadow:0 0 25px rgba(0,0,0,.35);
    --text-main:#fff;
}

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

/* base document styling */
html,body{
    background:var(--surface-1);
    color:var(--text-main);
    font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
    min-height:100%;
}

body{
    display:flex;
    flex-direction:column;
}

/* header container */
header{
    width:100%;
    background:var(--surface-2);
    border-bottom:1px solid var(--surface-3);
    padding:1rem 0;
    backdrop-filter:blur(10px);
}

/* navigation bar wrapper */
nav{
    max-width:900px;
    margin:auto;
}

/* navigation button group */
.navbar-buttons{
    display:flex;
    gap:.75rem;
    justify-content:center;
}

/* navigation buttons */
.navbar-buttons button{
    padding:.6rem 1.3rem;
    background:var(--tonal-2);
    border:none;
    border-radius:var(--radius);
    color:var(--text-main);
    font-size:.95rem;
    transition:.2s ease;
    cursor:pointer;
}

.navbar-buttons button:hover{
    background:var(--primary-2);
    transform:translateY(-2px);
}

/* main content area */
main{
    flex:1;
    max-width:900px;
    margin:2.5rem auto;
    padding:0 1rem;
}

/* hero card container */
.herocard{
    background:var(--surface-2);
    border:1px solid var(--surface-3);
    border-radius:var(--radius);
    padding:2rem;
    box-shadow:var(--shadow);
}

/* avatar sizing container */
.pfp{
    width:150px;
    height:150px;
    border-radius:50%;
    overflow:hidden;
    margin:auto;
}

/* avatar image fit */
.pfp img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* large heading */
h1{
    font-size:2.4rem;
    margin-top:1rem;
    text-align:center;
}

/* gradient highlight text */
.gradient{
    background:linear-gradient(90deg,var(--primary-1),var(--info-2));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* paragraph spacing */
p{
    margin-top:.75rem;
    line-height:1.55;
    text-align:center;
}

/* section subheading */
h2{
    margin-top:2rem;
    text-align:center;
    font-size:1.6rem;
}

/* decorative horizontal rule */
.neathr{
    border:none;
    height:1px;
    background:var(--surface-4);
    margin:1rem auto 2rem;
    width:60%;
}

/* limited-width paragraph container */
.customtextarea{
    max-width:53ch;
    margin:auto;
    padding:1rem;
    background:var(--tonal-1);
    border:1px solid var(--surface-3);
    border-radius:var(--radius);
}

/* footer layout */
footer{
    margin-top:4rem;
    padding:2rem 0;
    font-size:.9rem;
    background:var(--surface-2);
    border-top:1px solid var(--surface-3);
}

/* 88x31 badges */
footer img{
    margin:2px;
    image-rendering:pixelated;
}

/* link styling */
a{
    color:var(--primary-4);
    text-decoration:none;
}

a:hover{
    color:var(--primary-2);
}

/* animated background */
#rainbow{
    animation:rainbow-bg 15s linear infinite;
    background-size:300% 300%;
}

@keyframes rainbow-bg{
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.iframe-center{
    display:flex;
    justify-content:center;
    width:100%;
}

.iframe-center iframe{
    border:none;
    overflow:hidden;
    max-width:500px;
    width:100%;
}

.projects-grid{
    margin-top:2rem;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:1.5rem;
}

.project-card{
    background:var(--surface-2);
    border:1px solid var(--surface-3);
    border-radius:var(--radius);
    padding:1.2rem 1.4rem;
    box-shadow:var(--shadow);
    text-align:center;
    transition:.25s ease;
}

.project-card:hover{
    transform:translateY(-4px);
    border-color:var(--primary-3);
}

.project-card h3{
    margin-bottom:.5rem;
    font-size:1.4rem;
}

.project-card p{
    margin-bottom:1rem;
    line-height:1.5;
}

.project-card button{
    padding:.55rem 1.2rem;
    background:var(--tonal-2);
    border:none;
    border-radius:var(--radius);
    color:var(--text-main);
    cursor:pointer;
    transition:.2s ease;
}

.project-card button:hover{
    background:var(--primary-2);
    transform:translateY(-2px);
}