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

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

html{
    scroll-behavior:smooth;
    background:#05050d;
    position:relative;
}

/* ================= STARFIELD ================= */
/* three parallax star layers, pure CSS, no images needed */

html::before,
html::after{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:2000px;
    height:2000px;
    border-radius:50%;
    pointer-events:none;
    z-index:-3;
}

html::before{
    /* small, dense stars */
    width:1px;
    height:1px;
    background:transparent;
    box-shadow:1309px 228px #fff, 51px 1518px #fff, 563px 501px #fff, 457px 285px #fff, 1508px 209px #fff, 1385px 1516px #fff, 1827px 1116px #fff, 178px 1209px #fff, 864px 65px #fff, 61px 191px #fff, 447px 476px #fff, 1034px 1232px #fff, 54px 1149px #fff, 407px 1466px #fff, 1330px 1436px #fff, 1116px 859px #fff, 451px 919px #fff, 1206px 569px #fff, 1657px 1780px #fff, 13px 1554px #fff, 1650px 326px #fff, 1429px 865px #fff, 696px 569px #fff, 318px 440px #fff, 1960px 1563px #fff, 689px 209px #fff, 189px 778px #fff, 198px 735px #fff, 1735px 704px #fff, 1236px 541px #fff, 1652px 88px #fff, 1494px 940px #fff, 1098px 255px #fff, 1992px 1888px #fff, 775px 161px #fff, 1130px 600px #fff, 1698px 1287px #fff, 1266px 1813px #fff, 1764px 740px #fff, 1182px 393px #fff, 1442px 142px #fff, 93px 1354px #fff, 466px 1583px #fff, 592px 163px #fff, 1751px 476px #fff, 1774px 206px #fff, 778px 569px #fff, 928px 1301px #fff, 1708px 747px #fff, 333px 758px #fff, 727px 429px #fff, 1372px 546px #fff, 1437px 1918px #fff, 1399px 1327px #fff, 146px 1247px #fff, 1300px 350px #fff, 1093px 1493px #fff, 501px 334px #fff, 946px 777px #fff, 552px 1895px #fff, 1310px 1409px #fff, 1140px 449px #fff, 1402px 664px #fff, 1726px 1573px #fff, 1589px 114px #fff, 469px 1683px #fff, 65px 1648px #fff, 646px 821px #fff, 548px 135px #fff, 432px 1870px #fff, 1931px 1161px #fff, 1794px 1470px #fff, 644px 435px #fff, 1342px 1022px #fff, 810px 1811px #fff, 1872px 1316px #fff, 939px 292px #fff, 542px 285px #fff, 505px 1525px #fff, 1149px 1103px #fff, 538px 1529px #fff, 1197px 877px #fff, 1838px 1195px #fff, 817px 741px #fff, 449px 283px #fff, 1043px 1010px #fff, 186px 1547px #fff, 96px 1763px #fff, 224px 313px #fff, 1285px 327px #fff, 1622px 1393px #fff, 864px 1221px #fff, 130px 788px #fff, 781px 1220px #fff, 958px 1083px #fff, 514px 1988px #fff, 1133px 1762px #fff, 1930px 23px #fff, 1393px 1476px #fff, 234px 1396px #fff, 1812px 1099px #fff, 1537px 546px #fff, 1574px 1312px #fff, 696px 228px #fff, 601px 890px #fff, 323px 929px #fff, 6px 1953px #fff, 1478px 1793px #fff, 1473px 539px #fff, 1990px 1025px #fff, 1560px 365px #fff, 1039px 1869px #fff, 217px 1782px #fff, 1280px 611px #fff, 1723px 1308px #fff, 1039px 1247px #fff, 407px 313px #fff, 765px 1561px #fff, 330px 1104px #fff, 1952px 1594px #fff, 1889px 1086px #fff, 1881px 1px #fff, 1226px 663px #fff, 1000px 39px #fff, 229px 1902px #fff, 743px 1799px #fff, 1703px 1652px #fff, 629px 490px #fff, 118px 493px #fff, 1798px 1161px #fff, 1939px 161px #fff, 175px 1498px #fff, 995px 1671px #fff, 141px 1557px #fff, 1090px 1568px #fff, 257px 262px #fff, 1351px 973px #fff, 1939px 1125px #fff, 338px 542px #fff, 1080px 1786px #fff, 1242px 866px #fff, 1975px 433px #fff, 1902px 1104px #fff, 1546px 1494px #fff, 1412px 411px #fff, 1460px 638px #fff, 817px 1375px #fff, 1330px 764px #fff, 897px 1842px #fff, 1059px 924px #fff, 247px 507px #fff, 460px 131px #fff, 692px 43px #fff, 1204px 1134px #fff, 471px 1205px #fff, 451px 14px #fff, 145px 1449px #fff, 1292px 120px #fff, 468px 138px #fff, 1854px 64px #fff, 1760px 676px #fff, 145px 1052px #fff, 487px 570px #fff, 1370px 994px #fff, 438px 1104px #fff, 270px 1481px #fff, 1915px 1807px #fff, 1169px 1180px #fff, 968px 497px #fff, 1606px 968px #fff, 1653px 833px #fff, 389px 193px #fff, 198px 1349px #fff, 882px 725px #fff, 867px 841px #fff, 956px 1769px #fff, 1493px 110px #fff, 1379px 1338px #fff, 1323px 201px #fff, 124px 824px #fff, 1491px 694px #fff, 1639px 1764px #fff, 223px 509px #fff, 392px 389px #fff, 1098px 918px #fff, 287px 864px #fff, 375px 570px #fff, 947px 511px #fff, 1790px 1890px #fff, 154px 907px #fff, 1654px 1764px #fff, 1753px 1127px #fff, 200px 103px #fff, 1335px 1107px #fff, 1712px 30px #fff, 1984px 191px #fff, 1897px 1543px #fff, 1738px 484px #fff, 340px 832px #fff, 994px 985px #fff, 437px 1770px #fff, 821px 1848px #fff, 120px 337px #fff, 776px 4px #fff, 799px 543px #fff, 1897px 1605px #fff, 1607px 931px #fff, 584px 866px #fff, 1426px 1960px #fff, 1496px 1604px #fff, 1138px 1355px #fff, 1471px 996px #fff, 317px 388px #fff, 607px 445px #fff, 1983px 119px #fff, 1186px 1506px #fff, 1110px 124px #fff, 1531px 642px #fff, 117px 102px #fff, 1196px 976px #fff;
    animation:drift-slow 200s linear infinite, twinkle-a 6s ease-in-out infinite;
    opacity:.8;
}

html::after{
    /* mid-size stars */
    width:2px;
    height:2px;
    background:transparent;
    box-shadow:1029px 1882px #fff, 1746px 1087px #fff, 322px 116px #fff, 1967px 1040px #fff, 164px 1743px #fff, 380px 140px #fff, 1218px 139px #fff, 1382px 1765px #fff, 481px 826px #fff, 245px 1928px #fff, 1823px 1166px #fff, 504px 1185px #fff, 1217px 81px #fff, 1268px 167px #fff, 858px 1346px #fff, 1195px 1157px #fff, 1070px 647px #fff, 1914px 534px #fff, 418px 1371px #fff, 1466px 643px #fff, 488px 543px #fff, 810px 268px #fff, 1375px 1321px #fff, 614px 936px #fff, 647px 1902px #fff, 1539px 1916px #fff, 148px 19px #fff, 938px 1272px #fff, 1153px 204px #fff, 150px 1101px #fff, 436px 1036px #fff, 543px 271px #fff, 1911px 714px #fff, 1804px 140px #fff, 1800px 500px #fff, 756px 583px #fff, 323px 897px #fff, 1707px 1112px #fff, 1440px 619px #fff, 1252px 1652px #fff, 1339px 1083px #fff, 16px 1367px #fff, 1673px 1135px #fff, 613px 1908px #fff, 1358px 212px #fff, 1922px 1798px #fff, 275px 541px #fff, 236px 1822px #fff, 219px 1520px #fff, 1133px 318px #fff, 557px 577px #fff, 1238px 431px #fff, 1469px 702px #fff, 416px 1407px #fff, 1298px 1746px #fff, 540px 1035px #fff, 1000px 514px #fff, 1854px 1859px #fff, 1732px 104px #fff, 189px 1299px #fff, 867px 1698px #fff, 566px 90px #fff, 7px 683px #fff, 1579px 267px #fff, 1304px 536px #fff, 330px 1518px #fff, 904px 1129px #fff, 1445px 875px #fff, 1148px 19px #fff, 229px 154px #fff, 1935px 1808px #fff, 1415px 1851px #fff, 305px 1117px #fff, 73px 1709px #fff, 756px 1192px #fff, 1131px 303px #fff, 880px 261px #fff, 85px 631px #fff, 746px 1841px #fff, 1910px 1630px #fff;
    animation:drift-slow 140s linear infinite reverse, twinkle-b 4.5s ease-in-out infinite;
    opacity:.9;
}

body::before{
    content:"";
    position:fixed;
    top:0;
    left:0;
    width:3px;
    height:3px;
    border-radius:50%;
    background:transparent;
    box-shadow:1991px 1762px #cdeaff, 81px 1840px #cdeaff, 732px 430px #cdeaff, 1396px 511px #cdeaff, 1365px 210px #cdeaff, 724px 1597px #cdeaff, 1146px 1810px #cdeaff, 1791px 832px #cdeaff, 1994px 1271px #cdeaff, 1534px 316px #cdeaff, 1895px 1904px #cdeaff, 484px 1770px #cdeaff, 332px 1999px #cdeaff, 1638px 1660px #cdeaff, 362px 1805px #cdeaff, 844px 50px #cdeaff, 367px 1508px #cdeaff, 1893px 680px #cdeaff, 1602px 1906px #cdeaff, 843px 1642px #cdeaff, 1371px 1769px #cdeaff, 1505px 1660px #cdeaff, 508px 546px #cdeaff, 326px 1612px #cdeaff, 1436px 221px #cdeaff, 783px 1786px #cdeaff, 79px 1758px #cdeaff, 963px 455px #cdeaff, 408px 1672px #cdeaff, 1880px 942px #cdeaff;
    pointer-events:none;
    z-index:-2;
    animation:drift-slow 100s linear infinite, twinkle-c 3s ease-in-out infinite;
    filter:drop-shadow(0 0 2px #9fd8ff);
}

body::after{
    /* nebula glow blobs, floating slowly */
    content:"";
    position:fixed;
    inset:-10%;
    background:
        radial-gradient(circle at 15% 20%, rgba(122, 92, 255, .25), transparent 40%),
        radial-gradient(circle at 85% 15%, rgba(56, 189, 255, .18), transparent 45%),
        radial-gradient(circle at 60% 80%, rgba(160, 70, 220, .18), transparent 45%),
        radial-gradient(circle at 25% 85%, rgba(40, 120, 255, .15), transparent 40%);
    pointer-events:none;
    z-index:-4;
    animation:nebula-float 40s ease-in-out infinite;
}

@keyframes drift-slow{
    from{ transform:translate(0,0); }
    to{ transform:translate(-300px,-200px); }
}

@keyframes twinkle-a{
    0%,100%{ opacity:.5; }
    50%{ opacity:1; }
}

@keyframes twinkle-b{
    0%,100%{ opacity:.6; }
    50%{ opacity:1; }
}

@keyframes twinkle-c{
    0%,100%{ opacity:.4; }
    50%{ opacity:1; }
}

@keyframes nebula-float{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(2%,-3%) scale(1.05); }
}

@keyframes float-y{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-14px); }
}

@media (prefers-reduced-motion: reduce){
    html::before, html::after, body::before, body::after,
    .Header_Icon, .hero-title{
        animation:none !important;
    }
}

/* ================= BASE ================= */

body{
    font-family:'Inter',sans-serif;
    background:transparent;
    color:#e9e9f7;
    line-height:1.6;
    position:relative;
    overflow-x:hidden;
}

h1,h2,h3,h4{
    font-family:'Space Grotesk','Inter',sans-serif;
}

/* HEADER */

header{
    position:sticky;
    top:0;
    z-index:999;
    backdrop-filter:blur(20px);
    background:rgba(7,7,18,.65);
    border-bottom:1px solid rgba(150,140,255,.25);
}

.Header{
    max-width:1300px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    padding:22px;
}

.Header_Icon{
    width:65px;
    height:65px;
    border-radius:50%;
    object-fit:cover;
    background:#14142b;
    border:2px solid rgba(150,140,255,.4);
    box-shadow:0 0 22px rgba(122,92,255,.45);
    animation:float-y 5s ease-in-out infinite;
}

.header-title{
    font-size:34px;
    font-weight:700;
    letter-spacing:.3px;
    background:linear-gradient(90deg,#dfe3ff,#b7c5ff);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

/* HERO */

.hero{
    background:transparent;
    width: 100%;
    min-height: 90vh;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    padding: 40px;
    position:relative;
}

.hero-container{
    width:100%;
    max-width:1200px;
    margin:0 auto;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.hero-title{
    text-align: center;
    font-size:64px;
    font-weight:700;
    line-height:1.15;
    max-width:900px;
    margin-bottom:50px;
    font-family:'Space Grotesk',sans-serif;
    background:linear-gradient(135deg,#9fd8ff 0%,#c9a6ff 50%,#7ee8d8 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(0 0 30px rgba(150,140,255,.35));
    animation:float-y 7s ease-in-out infinite;
}

.hero-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
    background:rgba(18,16,40,.5);
    border:1px solid rgba(150,140,255,.25);
    backdrop-filter:blur(14px);
    padding:22px;
    border-radius:18px;
}

.main-button{
    display:inline-block;
    text-decoration:none;
    color:#e9e9f7;
    background:rgba(122,92,255,.12);
    border:1px solid rgba(150,140,255,.4);
    border-radius:999px;
    padding:10px 20px;
    transition:.25s;
    font-weight:500;
    font-size:15px;
}

.main-button:hover{
    transform:translateY(-4px);
    background:rgba(122,92,255,.3);
    border-color:#9fd8ff;
    box-shadow:0 6px 20px rgba(122,92,255,.35);
}

/* ALL SECTIONS */
.about-me,
.pricing,
.whyhireme,
.services,
.projects,
.policy,
.moreinfo,
.contact-me{
    margin:auto;
    padding:10px;
}

.background-image-container{
    padding: 60px 20px;
    max-width:1300px;
    margin:0 auto;
}

.background-image-container.aboutmebg{
    position:relative;
}

.about-me-layout{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
    max-width:1100px;
    margin:0 auto;
}

.avatar-img{
    height:460px;
    width:auto;
    max-width:100%;
    object-fit:contain;
    filter:drop-shadow(0 10px 30px rgba(122,92,255,.35));
    animation:float-y 6s ease-in-out infinite;
    flex-shrink:0;
}

.about-me-layout .description.about-me{
    margin:0;
    max-width:500px;
    flex:1;
    min-width:280px;
}

@media(max-width:900px){
    .about-me-layout{
        flex-direction:column;
    }

    .avatar-img{
        height:340px;
    }
}

.title{
    text-align:center;
    font-size:38px;
    font-weight:700;
    margin-bottom:35px;
    color:#eef0ff;
}

.description{
    display: block;
    text-decoration: none;
    font-size:20px;
    font-weight:400;
    color:#d6d6ec;
    max-width:900px;
    margin:0 auto 16px auto;
    background:rgba(20,18,45,.55);
    backdrop-filter:blur(10px);
    list-style-position: inside;
    padding: 24px;
    transition:.3s;
    overflow: hidden;
    border:1px solid rgba(150,140,255,.18);
    border-radius:14px;
}

.description:hover{
    transform:translateY(-6px);
    border-color:rgba(159,216,255,.7);
    box-shadow:0 10px 30px rgba(90,60,200,.25);
}

/* PROJECT */

.project-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.project-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
    gap:30px;
    max-width:1300px;
    margin:0 auto;
}

.project-tile{
    background:
        linear-gradient(180deg, rgba(6,6,16,.4), rgba(6,6,16,.85)),
        url("images/rbx.jpg");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;

    display: flex;
    flex-direction: column;
    width:320px;
    max-width:100%;
    margin-top:0px;
    border:1px solid rgba(150,140,255,.2);
    border-radius:16px;
    overflow:hidden;
    transition:.3s;
}

.project-tile:hover{
    transform:translateY(-8px);
    border-color:#9fd8ff;
    box-shadow:0 14px 34px rgba(90,60,200,.3);
}

.project-tile iframe{
    width:100%;
    height:180px;
    display:block;
    border:none;
}

.project-title{
    font-size:30px;
    font-weight:600;
    margin:26px 26px 0 26px;
    color:#eef0ff;
}

.project-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:14px 26px 0 26px;
}

.project-tag{
    background:rgba(150,140,255,.15);
    border:1px solid rgba(150,140,255,.4);
    color:#cfd6ff;
    padding:6px 14px;
    font-size:13px;
    font-weight:600;
    border-radius:999px;
}

.project-description{
    background:transparent;
    flex:1;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:4;
    overflow:hidden;
    line-height:1.5;
    margin:18px 26px;
    color:#aeb0ce;
    font-size:16px;
}

.project-link{
    margin:26px;
    margin-top: auto;
}

.project-link-button{
    display:inline-block;
    text-decoration:none;
    background:rgba(122,92,255,.25);
    border:1px solid rgba(150,140,255,.5);
    color:#eef0ff;
    padding:12px 26px;
    font-weight:600;
    border-radius:999px;
    transition:.25s;
}

.project-link-button:hover{
    background:rgba(122,92,255,.45);
    border-color:#9fd8ff;
    transform:translateY(-3px);
}

/* CONTACT */

.contact-me{
    max-width:1200px;
    margin:auto;
    padding:120px 25px;
    text-align:center;
}

.contact-buttons{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:50px;
    flex-wrap:wrap;
}

.contact_button_link{
    text-decoration:none;
    color:#e9e9f7;
    background:rgba(20,18,45,.6);
    border:1px solid rgba(150,140,255,.3);
    padding:18px 35px;
    font-weight:600;
    border-radius:14px;
    transition:.25s;
}

.contact_button_link:hover{
    transform:translateY(-5px);
    background:rgba(122,92,255,.3);
    border-color:#9fd8ff;
    box-shadow:0 10px 26px rgba(90,60,200,.3);
}

.footer{
    text-align:center;
    padding:20px;
    background:rgba(5,5,13,.9);
    color:#8d8db0;
    font-size:14px;
    position:relative;
    z-index:1;
}

/* ================= REVIEWS ================= */

.reviews-list{
    max-width:800px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.reviews-loading, .projects-loading{
    text-align:center;
    color:#9797c4;
    font-size:16px;
}

.review-form{
    max-width:600px;
    margin:0 auto 40px auto;
    display:flex;
    flex-direction:column;
    gap:14px;
    background:rgba(20,18,45,.55);
    backdrop-filter:blur(10px);
    border:1px solid rgba(150,140,255,.18);
    border-radius:14px;
    padding:26px;
}

.review-form input[type="text"],
.review-form textarea{
    background:rgba(9,9,20,.6);
    border:1px solid rgba(150,140,255,.3);
    border-radius:10px;
    padding:12px 14px;
    color:#e9e9f7;
    font-family:inherit;
    font-size:15px;
}

.review-form textarea{
    min-height:90px;
    resize:vertical;
}

.review-form button[type="submit"]{
    align-self:flex-start;
    background:rgba(122,92,255,.3);
    border:1px solid rgba(150,140,255,.5);
    color:#eef0ff;
    padding:12px 26px;
    border-radius:999px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
}

.review-form button[type="submit"]:hover{
    background:rgba(122,92,255,.5);
    transform:translateY(-3px);
}

.honeypot{
    position:absolute;
    left:-9999px;
    opacity:0;
    pointer-events:none;
}

.star-input{
    display:flex;
    gap:8px;
    font-size:32px;
}

.star-input .star{
    cursor:pointer;
    color:rgba(150,140,255,.3);
    transition:.15s;
}

.star-input .star.filled,
.star-input .star:hover,
.star-input .star:hover ~ .star{
    color:#f4c95d;
}

.review-card{
    background:rgba(20,18,45,.55);
    backdrop-filter:blur(10px);
    border:1px solid rgba(150,140,255,.18);
    border-radius:14px;
    padding:20px 24px;
}

.review-card-top{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:10px;
}

.review-stars{
    color:#f4c95d;
    font-size:18px;
    letter-spacing:2px;
}

.review-name{
    font-weight:600;
    color:#eef0ff;
}

.review-date{
    color:#8d8db0;
    font-size:13px;
    margin-left:auto;
}

.review-message{
    color:#c9c9e6;
    font-size:16px;
    line-height:1.5;
}

/* ================= ADMIN UI ================= */

.hidden{
    display:none !important;
}

.admin-panel{
    max-width:600px;
    margin:0 auto 40px auto;
    background:rgba(20,18,45,.55);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,140,180,.25);
    border-radius:14px;
    padding:24px;
    text-align:center;
}

.admin-panel h4{
    margin-bottom:16px;
    color:#eef0ff;
}

.admin-form{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.admin-form input,
.admin-form textarea{
    background:rgba(9,9,20,.6);
    border:1px solid rgba(150,140,255,.3);
    border-radius:10px;
    padding:12px 14px;
    color:#e9e9f7;
    font-family:inherit;
    font-size:15px;
}

.admin-form textarea{
    min-height:80px;
    resize:vertical;
}

.admin-form button,
.danger-button{
    background:rgba(122,92,255,.3);
    border:1px solid rgba(150,140,255,.5);
    color:#eef0ff;
    padding:12px 20px;
    border-radius:999px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
}

.admin-form button:hover{
    background:rgba(122,92,255,.5);
}

.danger-button{
    background:rgba(255,80,80,.2);
    border-color:rgba(255,120,120,.5);
}

.danger-button:hover{
    background:rgba(255,80,80,.4);
}

.form-error{
    color:#ff8a8a;
    font-size:14px;
    min-height:18px;
}

.delete-project-btn,
.delete-review-btn{
    margin-top:12px;
    background:rgba(255,80,80,.15);
    border:1px solid rgba(255,120,120,.4);
    color:#ffb4b4;
    padding:8px 16px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.delete-project-btn{
    margin:0 26px 26px 26px;
}

.delete-project-btn:hover,
.delete-review-btn:hover{
    background:rgba(255,80,80,.35);
}

.admin-bar{
    position:fixed;
    bottom:16px;
    right:16px;
    z-index:900;
}

.admin-bar-link{
    background:rgba(20,18,45,.8);
    border:1px solid rgba(150,140,255,.3);
    color:#c9c9e6;
    padding:8px 16px;
    border-radius:999px;
    font-size:13px;
    cursor:pointer;
    backdrop-filter:blur(10px);
}

.admin-bar-link:hover{
    border-color:#9fd8ff;
}

.admin-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:1000;
}

.admin-modal-box{
    background:#0d0d1e;
    border:1px solid rgba(150,140,255,.35);
    border-radius:16px;
    padding:30px;
    width:320px;
    max-width:90vw;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.admin-modal-box h4{
    color:#eef0ff;
    margin-bottom:4px;
}

.admin-modal-box input{
    background:rgba(9,9,20,.6);
    border:1px solid rgba(150,140,255,.3);
    border-radius:10px;
    padding:10px 12px;
    color:#e9e9f7;
    font-family:inherit;
}

.admin-modal-actions{
    display:flex;
    gap:10px;
}

.admin-modal-actions button{
    flex:1;
    padding:10px;
    border-radius:999px;
    border:1px solid rgba(150,140,255,.4);
    background:rgba(122,92,255,.25);
    color:#eef0ff;
    cursor:pointer;
    font-weight:600;
}

#admin-modal-close{
    background:rgba(255,255,255,.05);
}

/* SCROLLBAR */

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

::-webkit-scrollbar-track{
    background:#0a0a16;
}

::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#7a5cff,#4fc3f7);
    border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg,#9575ff,#6ee7ff);
}

/* MOBILE */

@media(max-width:900px){

    .header-title{
        font-size:24px;
        text-align:center;
    }

    .hero-title{
        font-size:38px;
    }

    .project-tile iframe{
        height:300px;
    }

    .title{
        font-size:30px;
    }

    .description{
        font-size:17px;
    }

}