:root { 
  --ink:#11110f; 
  --paper:#f0efe8; 
  --acid:#d9ff3f; 
  --purple:#7657ff; 
  --peach:#ff8066; 
  --cyan:#4de6ff; 
  --light-grey:#e6e5de;
  --mono:"DM Mono", monospace; 
  --display:"Space Grotesk", sans-serif; 
}

* { box-sizing:border-box; } 
html { scroll-behavior:smooth; } 
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--display); } 

.noise { 
  position:fixed; 
  inset:0; 
  pointer-events:none; 
  opacity:.045; 
  z-index:5; 
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); 
}

.site-header, footer { display:flex; align-items:center; justify-content:space-between; max-width:1300px; padding:24px 5vw; margin:auto; } 
.site-header { border-bottom:1px solid #c9c8c0; } 

/* Interactive Brand / Header Logo Styles */
.brand { display:inline-flex; align-items:center; color:var(--ink); font:700 1.55rem var(--display); text-decoration:none; letter-spacing:-.1em; } 
.brand .mb-text { color:var(--ink); transition:color 0.2s ease; }
.brand .dot { color:var(--purple); } 
.brand .term-logo { display:none; color:var(--purple); font-family:var(--mono); font-size:1.3rem; letter-spacing:normal; transition:color 0.2s ease; }
.brand:hover .mb-text { color:var(--purple); }
.brand:hover .dot { display:none; }
.brand:hover .term-logo { display:inline-block; color:var(--ink); }

.nav-links { display:flex; gap:28px; } 
.nav-links a, footer a { color:var(--ink); font:500 .75rem var(--mono); text-decoration:none; text-transform:uppercase; } 
.nav-links a:hover, footer a:hover { color:var(--purple); }
.menu-toggle { display:none; }

.section { max-width:1300px; margin:auto; padding:110px 5vw; } 
.eyebrow { font:500 .7rem var(--mono); letter-spacing:.08em; margin:0 0 22px; color:#595852; } 
h1,h2,h3,p { margin-top:0; } 
h1,h2 { letter-spacing:-.07em; line-height:.93; } 
h1 { font-size:clamp(3.8rem,9vw,8.5rem); max-width:880px; margin-bottom:32px; } 
h2 { font-size:clamp(2.7rem,5.2vw,5.4rem); } 
em { color:var(--purple); font-style:normal; } 

/* Hero Section Layout & Framed Profile Picture */
.hero { min-height:calc(100vh - 84px); display:grid; grid-template-columns:1fr 320px; align-items:center; gap:40px; position:relative; overflow:hidden; } 
.hero-copy { max-width:455px; font-size:1.1rem; line-height:1.55; }
.hero-actions { display:flex; align-items:center; gap:25px; margin-top:12px; }
.button { background:var(--ink); color:white; padding:14px 18px; font:500 .75rem var(--mono); text-decoration:none; }
.button span { color:var(--acid); margin-left:20px; }
.text-link { color:var(--ink); font:500 .78rem var(--mono); }

.hero-avatar { display:flex; justify-content:center; align-items:center; }
.avatar-frame { position:relative; width:280px; height:280px; border:3px solid var(--ink); background:var(--purple); padding:10px; box-shadow:12px 12px 0px var(--acid); transition:transform 0.3s ease, box-shadow 0.3s ease; }
.avatar-frame:hover { transform:translate(-4px, -4px); box-shadow:16px 16px 0px var(--acid); }
.avatar-frame img { width:100%; height:100%; object-fit:cover; display:block; border:1px solid var(--ink); }

/* Projects Section */
.projects { background:var(--ink); color:var(--paper); max-width:none; padding-left:max(5vw, calc((100vw - 1300px)/2 + 5vw)); padding-right:max(5vw, calc((100vw - 1300px)/2 + 5vw)); }
.projects .eyebrow { color:#b6b5ae; }
.projects h2 { margin-bottom:55px; }
.project-grid { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; }
.project-card { min-height:350px; padding:20px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; transition:transform .25s ease; }
.project-card:hover { transform:translateY(-7px); }
.game-card { background:var(--purple); grid-row:span 2; min-height:710px; }
.bot-card { background:var(--acid); color:var(--ink); }
.ai-card { background:#242421; }
.card-top { display:flex; justify-content:space-between; font:500 .65rem var(--mono); }
.card-bottom { position:relative; z-index:2; }
.card-bottom h3 { font-size:2rem; letter-spacing:-.05em; margin-bottom:7px; }
.card-bottom p { max-width:365px; font-size:.92rem; line-height:1.4; margin-bottom:0; }
.card-arrow { position:absolute; right:0; bottom:0; font-size:1.7rem; }
.pixel-scene { position:absolute; inset:64px 15% 165px; overflow:hidden; border:6px solid #3639bd; background:#11110f; box-shadow:10px 10px 0 var(--peach); }
.arcade-maze { background:linear-gradient(#11110f,#11110f) padding-box,repeating-linear-gradient(0deg,transparent 0 42px,#2f53ff 42px 49px,transparent 49px 84px),repeating-linear-gradient(90deg,transparent 0 55px,#2f53ff 55px 62px,transparent 62px 110px); }
.arcade-maze:before { content:""; position:absolute; inset:22% 12%; border:7px solid #2f53ff; border-radius:18px; }
.arcade-player { position:absolute; width:55px; height:55px; left:15%; top:50%; transform:translateY(-50%); background:#ffe74c; border-radius:50%; clip-path:polygon(100% 15%, 50% 50%, 100% 85%, 100% 100%, 0 100%, 0 0, 100% 0); z-index:2; animation:chomp 0.5s ease-in-out infinite alternate; } 
@keyframes chomp { 0% { clip-path:polygon(100% 15%, 50% 50%, 100% 85%, 100% 100%, 0 100%, 0 0, 100% 0); } 100% { clip-path:polygon(100% 48%, 50% 50%, 100% 52%, 100% 100%, 0 100%, 0 0, 100% 0); } }
.maze-dot { position:absolute; width:12px; height:12px; border-radius:50%; background:#fff8e0; z-index:1; }.d1{left:48%;top:59%}.d2{left:62%;top:59%}.d3{left:76%;top:59%}.d4{left:52%;top:35%}.d5{left:72%;top:35%}
.arcade-ghost { position:absolute; width:50px; height:55px; border-radius:28px 28px 7px 7px; z-index:2; }
.ghost-one { background:#ff4d99; right:16%; top:35%; }
.ghost-two { background:var(--cyan); right:32%; bottom:17%; }
.arcade-ghost:after { content:"••"; position:absolute; color:white; font-size:26px; letter-spacing:2px; left:9px; top:6px; }
.pixel-score { position:absolute; top:12px; left:14px; font:500 .62rem var(--mono); color:#ffe74c; }
.bot-icon { display:flex; justify-content:center; align-items:center; margin-top:30px; color:var(--ink); } 
.bot-icon svg { width:clamp(70px, 10vw, 95px); height:auto; transition:transform 0.25s ease; } 
.bot-card:hover .bot-icon svg { transform:scale(1.08); }
.jupyter-icon { display:flex; justify-content:center; align-items:center; margin-top:30px; color:var(--acid); } 
.jupyter-icon svg { width:clamp(70px, 10vw, 95px); height:auto; transition:transform 0.25s ease; } 
.ai-card:hover .jupyter-icon svg { transform:scale(1.08); }

/* Section 03: About Me (Electric Cyan Background) */
.about { 
  background:var(--cyan); 
  color:var(--ink); 
  max-width:none; 
  padding-left:max(5vw, calc((100vw - 1300px)/2 + 5vw)); 
  padding-right:max(5vw, calc((100vw - 1300px)/2 + 5vw)); 
  border-bottom:1px solid rgba(0,0,0,0.15); 
}
.about .eyebrow { color:#005261; }
.about-layout { display:grid; grid-template-columns:1.25fr .75fr; gap:8vw; }
.about-layout h2 { margin:0; }
.about-layout > div > p { font-size:1.1rem; line-height:1.55; }
.skills { display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; }
.skills span { padding:8px 10px; border:1px solid rgba(0,0,0,0.25); font:400 .7rem var(--mono); }

/* Section 04: Portfolio / Achievements (Light Grey Background with Accent Cards) */
.achievements { 
  background:var(--light-grey); 
  max-width:none;
  padding-left:max(5vw, calc((100vw - 1300px)/2 + 5vw)); 
  padding-right:max(5vw, calc((100vw - 1300px)/2 + 5vw)); 
  padding-top:100px; 
  padding-bottom:100px; 
  border-bottom:1px solid rgba(0,0,0,0.15);
}
.achievements .eyebrow { color:#595852; }
.achievement-row { 
  display:grid; 
  grid-template-columns:120px 1fr 25px; 
  align-items:center; 
  background:#ffffff; 
  border:2px solid var(--ink); 
  border-left:8px solid var(--cyan); 
  padding:18px 24px; 
  margin-bottom:14px; 
  box-shadow:4px 4px 0px var(--ink); 
  transition:transform 0.2s ease, box-shadow 0.2s ease; 
}
.achievement-row:hover { 
  transform:translate(-3px, -3px); 
  box-shadow:7px 7px 0px var(--ink); 
}
.achievement-row span { font:500 .7rem var(--mono); color:var(--purple); }
.achievement-row p { margin:0; font-size:1.05rem; }
.achievement-row small { color:#595852; font:400 .72rem var(--mono); white-space:nowrap; }
.achievement-row b { font-size:.85rem; color:var(--purple); }

/* Fun Facts Section */
.fun-facts { max-width:none; background:var(--purple); color:var(--paper); padding-left:max(5vw, calc((100vw - 1300px)/2 + 5vw)); padding-right:max(5vw, calc((100vw - 1300px)/2 + 5vw)); }
.fun-facts .eyebrow { color:#ded7ff; }
.fun-facts h2 { margin-bottom:52px; }
.fun-facts em { color:var(--acid); }
.facts-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
.facts-grid article { background:var(--ink); padding:22px; display:flex; flex-direction:column; gap:28px; }
.facts-grid span { color:var(--acid); font:500 .7rem var(--mono); }
.facts-grid p { max-width:380px; margin:0; font-size:clamp(1.25rem,2.2vw,2rem); letter-spacing:-.05em; line-height:1.05; }

/* Contact Section */
.contact { min-height:70vh; background:var(--acid); max-width:none; padding-left:max(5vw, calc((100vw - 1300px)/2 + 5vw)); padding-right:max(5vw, calc((100vw - 1300px)/2 + 5vw)); display:flex; flex-direction:column; justify-content:center; }
.contact h2 { margin:0 0 28px; }
.contact > p { max-width:400px; line-height:1.55; margin-bottom:24px; }
.contact-email,.contact-phone { align-self:flex-start; color:var(--ink); border-bottom:2px solid var(--ink); font:500 clamp(1rem,2vw,1.4rem) var(--mono); padding-bottom:5px; text-decoration:none; }
.contact-phone { margin-top:14px; font-size:clamp(.9rem,1.6vw,1.1rem); }
.contact-email:hover,.contact-phone:hover { color:var(--purple); border-color:var(--purple); } 

footer { min-height:100px; } 
footer p { margin:0; font:400 .68rem var(--mono); }

@media(max-width:900px){
  .hero { grid-template-columns:1fr; text-align:left; }
  .hero-avatar { margin-top:20px; justify-content:flex-start; }
}

@media(max-width:700px){ 
  .site-header { padding-top:18px;padding-bottom:18px; }
  .menu-toggle { display:block; background:none;border:0;font:500 .75rem var(--mono); }
  .nav-links { display:none; position:absolute; top:67px; right:5vw; flex-direction:column; padding:18px; background:var(--ink); z-index:6; }
  .nav-links.open { display:flex; }
  .nav-links a { color:white; }
  .section { padding-top:75px;padding-bottom:75px; }
  .hero { min-height:calc(100vh - 68px); }
  .project-grid,.about-layout,.facts-grid { grid-template-columns:1fr; }
  .game-card { min-height:500px; }
  .project-card { min-height:330px; }
  .achievement-row { grid-template-columns:75px 1fr 20px; padding:14px 16px; }
  .achievement-row p { font-size:.95rem; } 
  footer { align-items:flex-start; gap:16px; flex-wrap:wrap; } 
}


footer {
  background-color: #f5f5f7; /* Off-white background */
}

footer p,
footer a {
  color: #000000; /* Black text */
}

.contact-avatar .avatar-frame {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-avatar .avatar-frame:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.95);
}

.contact-email,
.contact-phone {
  display: block;
  margin-top: 0.75rem;
}


.contact-email,
.contact-phone {
  display: block;
  width: fit-content;
  margin-top: 0.75rem;
}


.site-header {
  background: #d9ff3f;
}


/* Change Jupyter Logo color */
.jupyter-icon svg path,
.jupyter-icon svg circle {
  fill: #F37626 !important; /* Official Jupyter Orange */
}

/* Change Jupyter Logo dots to dark grey */
.jupyter-icon svg circle {
  fill: #888888 !important;
}


/* Change background color of Section 03 */
#about {
  background-color: #d9ff3f; /* Replace with whatever color hex you like! */
}

/* Make only the eyebrow text in Section 03 black */
#about .eyebrow {
  color: #000000 !important;
}


/* Make skill boxes in Section 03 purple */
#about .skills span {
  background-color: #7657ff !important;
  color: #ffffff !important; /* Makes text white so it stays readable */
  border-color: #7657ff !important;
}  


/* Change side accents and borders in Section 04 to purple */
#portfolio .achievement-row,
#portfolio .achievement-row::before,
#portfolio .achievement-row::after {
  border-left-color: #7657ff !important;
  border-color: #7657ff !important;
}