*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    :root {
      --card: rgba(0,0,0,0.5);
      --line: #fff;
      --fg: #fff;
    }

    html {
      scroll-behavior: smooth;
    }
    
    body {
      font-family: 'Comic Sans MS', sans-serif;
      background:black;
      color:white;
      animation:bg-rgb 7s infinite alternate;
      overflow-x:hidden;
      overscroll-behavior: none;
    }
    nav {
      display:flex; justify-content:center;
      background:rgba(0,0,0,0.8); padding:12px;
      position:sticky; top:0; z-index:10;
      scroll-behavior: smooth;
    }
    nav a {
      color:white; margin:0 15px; text-decoration:none;
      font-size:1.1rem; transition:color .3s;
    }
    nav a:hover { color:#ff0; }

    header {
      text-align:center; font-size:2.2rem; margin:30px 0;
      animation:text-rgb 1.5s infinite alternate;
      position:relative;
    }

    .threejs-canvas {
      width:150px; height:150px;
      margin:15px auto;
      pointer-events:none;
      animation:floaty 5s ease-in-out infinite;
    }

    section { margin:30px auto; width:80%; padding:20px; }

    .rainbow-border {
      border:4px solid transparent; padding:15px;
      border-image: linear-gradient(45deg,red,yellow,lime,cyan,magenta,blue) 1;
      animation:border-rgb 3s linear infinite;
    }

    .education {
      position:relative;
      display:inline-block;
      padding:25px;
      border-radius:20px;
      background:conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
      animation:spinBG 4s linear infinite, flashy 1s infinite;
      color:black;
      font-weight:bold;
      margin:0 auto; text-align:left;
      box-shadow:0 0 30px 10px rgba(255,255,255,0.8);
    }

    h2.glitch {
      position:relative; font-size:1.5rem; margin-bottom:10px;
      animation:text-rgb 2s infinite alternate;
    }
    h2.glitch::after {
      content:attr(data-text); position:absolute; left:2px; top:0;
      text-shadow:-2px 0 blue; color:red;
      clip:rect(0,900px,0,0);
      animation:glitch 2s infinite linear alternate-reverse;
    }

    ul { list-style:"🎏"; margin-top:10px; padding-left:1.2em; }

    .tags-container { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; }
    .tag {
      border:1px solid var(--line); background:var(--card); color:var(--fg);
      padding:10px 14px; border-radius:999px; font-weight:800;
      text-decoration:none; position:relative;
      transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .tag:hover, .tag:focus-visible {
      border-color:rgba(59,130,246,.55);
      background:linear-gradient(180deg, rgba(59,130,246,.12), rgba(59,130,246,.06)), var(--card);
      box-shadow:0 10px 24px rgba(59,130,246,.18);
      transform:translateY(-1px);
    }
    .tag::after {
      content:""; position:absolute; right:-12px; top:-16px;
      width:36px; height:36px;
      background:url('skill.png') center/contain no-repeat;
      opacity:0; transform:translateY(6px) scale(.9);
      transition:opacity .18s ease, transform .18s ease;
      pointer-events:none;
      filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
    }
    .tag:hover::after { opacity:1; transform:translateY(0) scale(1); }

    .links {
      margin:40px auto;
      width:80%;
      text-align:center;
      border:4px solid transparent;
      border-image: linear-gradient(45deg,red,yellow,lime,cyan,magenta,blue) 1;
      padding:20px;
      animation:border-rgb 3s linear infinite, flyAround 6s ease-in-out infinite;
    }
    .links a {
      margin:0 10px; padding:8px 16px;
      background:rgba(255,255,255,0.2); color:white;
      text-decoration:none; border-radius:8px;
      display:inline-block;
      animation:text-rgb 2s infinite alternate;
    }

    #photo {
      text-align:center;
      padding:100px;
      border-radius:30px;
      background:repeating-linear-gradient(
        45deg,
        #0000ff,
        #0000ff 20px,
        #00ffff 20px,
        #00ffff 40px
      );
      animation:bsodFlash 2s infinite;
      position:relative;
      overflow:hidden;
      box-shadow:inset 0 0 30px cyan, 0 0 40px magenta;
      margin:100px auto;
    }
    #photo h2 {
      color:#fff; font-size:2.5rem; text-shadow:0 0 10px #000;
      margin-bottom:60px;
    }
    #photo img {
      max-width:300px;
      border-radius:20px;
      position:absolute;
      top:50%; left:50%;
      transform:translate(-50%,-50%);
      animation:crazyFly 10s infinite linear;
      box-shadow:0 0 25px #0ff, 0 0 50px #f0f;
    }

    @keyframes floaty {
      0%,100% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
    }
    @keyframes flyAround {
      0%   { transform: translate(0,0) rotate(0deg); }
      25%  { transform: translate(20px,-15px) rotate(3deg); }
      50%  { transform: translate(-15px,20px) rotate(-3deg); }
      75%  { transform: translate(10px,-25px) rotate(2deg); }
      100% { transform: translate(0,0) rotate(0deg); }
    }

    footer {
      text-align:center; margin:50px 0;
      animation:blink 1s infinite; font-size:1.1rem;
    }
    audio { display:none; }

    @keyframes bg-rgb { 
      0%{background:linear-gradient(45deg,#ff00ff,#000);} 
      25%{background:linear-gradient(45deg,#00ffff,#000);} 
      50%{background:linear-gradient(45deg,#033592,#000);} 
      75%{background:linear-gradient(45deg,#00ff00,#000);} 
      100%{background:linear-gradient(45deg,#ffff00,#000);} 
    }
    @keyframes text-rgb { 
      0%{color:#ff00ff;}25%{color:#00ffff;}
      50%{color:#ff0000;}75%{color:#00ff00;}100%{color:#ffff00;} 
    }
    @keyframes border-rgb { 0%{filter:hue-rotate(0deg);}100%{filter:hue-rotate(360deg);} }
    @keyframes spinBG { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
    @keyframes flashy {
      0%,100%{box-shadow:0 0 20px 5px red;}
      25%{box-shadow:0 0 25px 10px lime;}
      50%{box-shadow:0 0 25px 10px cyan;}
      75%{box-shadow:0 0 25px 10px yellow;}
    }
    @keyframes bsodFlash {
      0%,100% {background-color:#0000aa;}
      50% {background-color:#000088;}
    }
    @keyframes crazyFly {
      0%   {transform:translate(-50%,-50%) rotate(0deg) scale(1);}
      15%  {transform:translate(120%,-150%) rotate(45deg) scale(0.8);}
      30%  {transform:translate(-140%,-50%) rotate(-30deg) scale(1.3);}
      45%  {transform:translate(80%,120%) rotate(60deg) scale(0.7);}
      60%  {transform:translate(-100%,140%) rotate(-45deg) scale(1.2);}
      75%  {transform:translate(150%,-120%) rotate(30deg) scale(0.9);}
      100% {transform:translate(-50%,-50%) rotate(0deg) scale(1);}
    }
    @keyframes glitch { 0%,100%{clip:rect(0,900px,0,0);}20%{clip:rect(20px,900px,50px,0);}60%{clip:rect(50px,900px,100px,0);} }
    @keyframes blink { 0%,100%{opacity:1;}50%{opacity:0.2;} }