/* --------------------------------------------------------------
   Base styles – unchanged except for a few tweaks for the canvas
   -------------------------------------------------------------- */
* {margin:0;padding:0;box-sizing:border-box;}
body {
    min-height:100vh;
    font-family:'Helvetica Neue',Arial,sans-serif;
    color:#e0e0e0;
    background-color:#000;
    background-image:linear-gradient(135deg,#001133,#000);
}
body::before{
    content:"";position:absolute;inset:0;
    /* background:rgba(0,0,30,.6);pointer-events:none; */
}
header,footer{background:rgba(0,0,0,.5);text-align:center;padding:1rem;}
main{
    max-width:800px;margin:2rem auto;padding:1rem;
    background:rgba(0,0,0,.4);border-radius:8px;
}
h1,h2{color:#ffdd33;margin-bottom:.5rem;}
p,li{line-height:1.6;margin-bottom:.8rem;}
footer p{font-size:.85rem;opacity:.7;}

/* --------------------------------------------------------------
   Bullet‑point layout + canvas styling
   -------------------------------------------------------------- */
.quantum-facts ul{
    list-style:none;
    padding-left:0;
}
.quantum-facts li{
    position:relative;
    padding-left:500px;      /* room for the canvas */
    min-height:500px;
    display:flex;
    align-items:center;
}
.anim-canvas{
    /* position:absolute;
    left:0;top:50%;
    transform:translateY(-50%);
    border:1px solid rgba(255,255,255,.2);
    background:rgba(0,0,0,.2); */
    top: 0;               /* start from the top‑left corner */
    left: 0;
    position: fixed;
    inset: 0;
    z-index: -1;               /* behind all content */
    pointer-events: none;
    background: #000;        

}

/* Optional hover‑pause – makes the animation stop while the user reads */
.quantum-facts li:hover canvas{animation-play-state:paused;}


  /* -------------------------- Weird Footer ----------------------*/
   :root {
      --lightness: 50%;
      --code-background: #ddd;
  }
   footer {
          /* position: absolute; */
          left:0;
          bottom:0;
          background: #FFF;
          text-align: center;
          clear: both;
          display: block;
          padding:10px;
          border: 2px dashed red;
          z-index: 20;
      }
  footer a:hover {
      display: inline-block;
      animation: 0.2s infinite alternate linear wiggle;

      background: linear-gradient(in hsl longer hue 45deg, hsl(0deg, 75%, var(--lightness)) 10%, hsl(0deg, 75%, var(--lightness)) 90%);
      background-clip: text;
      color: transparent;
  }
      @keyframes wiggle {
          from {
              transform: skewX(-8deg);
          }
          to {
              transform: skewX(8deg);
          }
      }