:root{--spider-red:#e62429;--spider-purple:#7b2ff7;--spider-pink:#ff2e88;--ink:#fff}html{scroll-behavior:smooth;font-size:20px}body{color:#fff;background-color:#0000;background-image:radial-gradient(circle,#ff2e8840 1.5px,#0000 1.5px),linear-gradient(160deg,#1a0638 0%,#0b0220 60%,#2a0612 100%);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:18px 18px,auto;background-attachment:fixed;background-origin:padding-box,padding-box;background-clip:border-box,border-box;margin:0;font-family:sans-serif}nav{z-index:10;border-bottom:3px solid var(--spider-red);background:#0b0220;gap:20px;padding:15px 30px;display:flex;position:sticky;top:0}nav a{color:#fff;font-size:1.1rem;font-weight:700;text-decoration:none}nav a:hover{color:var(--spider-pink)}section{border-bottom:2px solid var(--spider-purple);padding:5rem max(30px,50% - 28rem);scroll-margin-top:70px}#home{box-sizing:border-box;text-align:center;--x:-500px;--y:-500px;background:#000;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}.home-light{pointer-events:none;-webkit-mask-image:radial-gradient(circle 220px at var(--x) var(--y), #000 0%, #0009 50%, transparent 100%);-webkit-mask-image:radial-gradient(circle 220px at var(--x) var(--y), #000 0%, #0009 50%, transparent 100%);mask-image:radial-gradient(circle 220px at var(--x) var(--y), #000 0%, #0009 50%, transparent 100%);background-position:50%;background-size:cover;position:absolute;inset:0}#home>:not(.home-light){z-index:1;position:relative}#home h1{text-shadow:4px 4px 0 var(--spider-red);margin:0 0 10px;font-size:3.5rem}.home-btn{background:var(--spider-red);color:#fff;box-shadow:6px 6px 0 var(--spider-purple);border:3px solid #fff;margin-top:20px;padding:14px 36px;font-weight:700;text-decoration:none;display:inline-block}.home-btn:hover{box-shadow:3px 3px 0 var(--spider-purple);transform:translate(3px,3px)}#about{padding-inline:max(30px,50% - 33rem)}.about-layout{align-items:center;gap:50px;display:flex}.about-left{flex:1}.profile-circle{width:12rem;height:12rem;box-shadow:6px 6px 0 var(--spider-red), 12px 12px 0 var(--spider-purple);background:#1c0b3a;border:3px solid #fff;border-radius:50%;justify-content:center;align-items:center;margin:0 auto 30px;display:flex;overflow:hidden}.profile-circle img{object-fit:cover;width:100%;height:100%}.tech-grid{flex:1;grid-template-columns:repeat(3,1fr);gap:20px;display:grid}.tech-box{aspect-ratio:1;min-width:0;box-shadow:5px 5px 0 var(--spider-purple);background:#000;border:3px solid #fff;overflow:hidden}.tech-box img{box-sizing:border-box;object-fit:contain;width:100%;height:100%;padding:16px;display:block}.project-card{align-items:center;gap:60px;margin:50px 0;display:flex}.project-card.reverse{flex-direction:row-reverse}.project-image{border:3px solid var(--ink);min-height:220px;box-shadow:-10px 10px 0 var(--spider-red), -20px 20px 0 var(--spider-purple);background:#1c0b3a;flex:1;justify-content:center;align-items:center;display:flex}.project-card.reverse .project-image{box-shadow:10px 10px 0 var(--spider-red), 20px 20px 0 var(--spider-purple)}.project-image img{width:100%;display:block}.project-info{flex-direction:column;flex:1;align-items:flex-start;gap:12px;display:flex}.btn{border:3px solid var(--ink);padding:10px 24px;font-weight:700;text-decoration:none}.btn-live{background:var(--spider-red);color:#fff}.btn-learn{color:#fff;border-color:var(--spider-purple);background:#000}.btn:hover{opacity:.85}#contact form{flex-direction:column;gap:16px;max-width:32rem;display:flex}#contact label{margin-bottom:6px;font-weight:700;display:block}#contact input,#contact textarea{box-sizing:border-box;color:#fff;width:100%;box-shadow:4px 4px 0 var(--spider-purple);background:#000;border:3px solid #fff;border-radius:0;outline:none;padding:10px 12px;font-family:inherit;font-size:1rem}#contact input:focus,#contact textarea:focus{border-color:var(--spider-pink)}#contact textarea{resize:vertical}.send-btn{background:var(--spider-red);color:#fff;cursor:pointer;box-shadow:5px 5px 0 var(--spider-purple);border:3px solid #fff;align-self:flex-start;padding:12px 32px;font-family:inherit;font-size:1rem;font-weight:700}.send-btn:hover{box-shadow:3px 3px 0 var(--spider-purple);transform:translate(2px,2px)}.send-btn:disabled{opacity:.6;cursor:not-allowed}.form-status{margin:0;font-weight:700}.form-status.success{color:#4ade80}.form-status.error{color:var(--spider-pink)}.socials{flex-wrap:wrap;align-items:center;gap:16px;margin-top:40px;display:flex}.social-circle{width:3rem;height:3rem;box-shadow:3px 3px 0 var(--spider-red), 6px 6px 0 var(--spider-purple);background:#000;border:3px solid #fff;border-radius:50%;justify-content:center;align-items:center;display:flex;overflow:hidden}.social-circle img{box-sizing:border-box;object-fit:contain;width:100%;height:100%;padding:8px;display:block}.social-circle:hover{transform:translate(2px,2px)}.mail-link{color:#fff;margin-left:10px;font-weight:700;text-decoration:none}.mail-link:hover{color:var(--spider-pink)}@media (width<=700px){html{font-size:16px}.about-layout,.project-card,.project-card.reverse{flex-direction:column}}