.side-bar {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 0;
    position: fixed;
    right: 0.6em;
    top: 1rem;
    height: calc(100% - 2rem);
    background: transparent;
    z-index: 100;
    overflow: hidden;
    scrollbar-width: thin;
    border-radius: 1em;
    width: 35vw;
    background: var(--background-white);
    box-shadow: var(--soft-continer-outer-shadow);
}

.side-bar-content {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 3em 2em 1em 2em;
    height: 100%;
    width: 100%;
}

#side-bar-universal-close{
    position: absolute;
    top: 0.5em;
    left: 1em;
    font-size: 1.5em;
    cursor: pointer;
    color: var(--black);
    transition: all 0.1s ease-in-out;
  /*Extra hitbox to be easier to be clicked*/
    padding: 1rem;
    margin: -1rem;
}

/* On click animation*/
    #side-bar-universal-close:active {
        scale: 0.8;
    }

    @media screen and (max-width: 1500px) {
      .side-bar {
        width: 50vw;
      }
    }
    
/* Generated spring-in animation for the sidebar with stylus. Code:
    https://stylus-lang.com/try.html
    const stylus = require("stylus"); 
    const str = `
    // your stylus code here
    spring-wobbly(t)
        return -0.5 * (2.71828 ** (-11 * t)) * (
        -2 * (2.71828 ** (11 * t)) + sin(12 * t) + 2 * cos(12 * t))
    
    lerp(a, b, p)
        return a + p * (b - a)
  
    @keyframes spring-in
        for i in (0..100)
        {i + '%'}
            t = i / 100
            p = spring-wobbly(t)
            transform: translateX(lerp(100%, 1.5%, p))
    `
    stylus.render(str, { filename: 'playground.css' }, function(err, css){
        if (err) throw err;
    });
*/

@keyframes spring-in{
  0% {
    transform: translateX(100%);
  }
  1% {
    transform: translateX(94.30130764423592%);
  }
  2% {
    transform: translateX(87.48975264278043%);
  }
  3% {
    transform: translateX(79.94677696694322%);
  }
  4% {
    transform: translateX(71.99585527328001%);
  }
  5% {
    transform: translateX(63.906264686650275%);
  }
  6% {
    transform: translateX(55.89739663023215%);
  }
  7% {
    transform: translateX(48.14340082990803%);
  }
  8% {
    transform: translateX(40.77798629795336%);
  }
  9% {
    transform: translateX(33.89923413968178%);
  }
  10% {
    transform: translateX(27.57430525904455%);
  }
  11% {
    transform: translateX(21.843952607900434%);
  }
  12% {
    transform: translateX(16.726768799417272%);
  }
  13% {
    transform: translateX(12.223121235690883%);
  }
  14% {
    transform: translateX(8.318742449324716%);
  }
  15% {
    transform: translateX(4.987958804902604%);
  }
  16% {
    transform: translateX(2.196552469902244%);
  }
  17% {
    transform: translateX(-0.095739219224185%);
  }
  18% {
    transform: translateX(-1.933074282163318%);
  }
  19% {
    transform: translateX(-3.361688818871443%);
  }
  20% {
    transform: translateX(-4.428389131605059%);
  }
  21% {
    transform: translateX(-5.179328255809111%);
  }
  22% {
    transform: translateX(-5.659039479657807%);
  }
  23% {
    transform: translateX(-5.909699210345124%);
  }
  24% {
    transform: translateX(-5.970591352145732%);
  }
  25% {
    transform: translateX(-5.877746152759329%);
  }
  26% {
    transform: translateX(-5.66372749739395%);
  }
  27% {
    transform: translateX(-5.357544602571167%);
  }
  28% {
    transform: translateX(-4.984665432951687%);
  }
  29% {
    transform: translateX(-4.567111542509394%);
  }
  30% {
    transform: translateX(-4.123616009864733%);
  }
  31% {
    transform: translateX(-3.66982821153124%);
  }
  32% {
    transform: translateX(-3.218551347598876%);
  }
  33% {
    transform: translateX(-2.780000642987474%);
  }
  34% {
    transform: translateX(-2.362071940238522%);
  }
  35% {
    transform: translateX(-1.97061234471974%);
  }
  36% {
    transform: translateX(-1.609686028494821%);
  }
  37% {
    transform: translateX(-1.28182984599998%);
  }
  38% {
    transform: translateX(-0.988294757284962%);
  }
  39% {
    transform: translateX(-0.72927006880721%);
  }
  40% {
    transform: translateX(-0.504088591593273%);
  }
  41% {
    transform: translateX(-0.311411625495424%);
  }
  42% {
    transform: translateX(-0.14939334561565%);
  }
  43% {
    transform: translateX(-0.015824751359347%);
  }
  44% {
    transform: translateX(0.09174217401295%);
  }
  45% {
    transform: translateX(0.175889160433769%);
  }
  46% {
    transform: translateX(0.239243970416226%);
  }
  47% {
    transform: translateX(0.284408935348466%);
  }
  48% {
    transform: translateX(0.313904212980347%);
  }
  49% {
    transform: translateX(0.330124197583331%);
  }
  50% {
    transform: translateX(0.33530552715348%);
  }
  51% {
    transform: translateX(0.331505147257687%);
  }
  52% {
    transform: translateX(0.320586978052233%);
  }
  53% {
    transform: translateX(0.304215791500354%);
  }
  54% {
    transform: translateX(0.283857026754276%);
  }
  55% {
    transform: translateX(0.260781371142258%);
  }
  56% {
    transform: translateX(0.236073061119413%);
  }
  57% {
    transform: translateX(0.210640968280444%);
  }
  58% {
    transform: translateX(0.185231658098729%);
  }
  59% {
    transform: translateX(0.160443722719023%);
  }
  60% {
    transform: translateX(0.136742795252744%);
  }
  61% {
    transform: translateX(0.114476755033834%);
  }
  62% {
    transform: translateX(0.093890724671581%);
  }
  63% {
    transform: translateX(0.075141544576681%);
  }
  64% {
    transform: translateX(0.058311484185609%);
  }
  65% {
    transform: translateX(0.043421016281059%);
  }
  66% {
    transform: translateX(0.030440533928115%);
  }
  67% {
    transform: translateX(0.019300943540756%);
  }
  68% {
    transform: translateX(0.009903102638958%);
  }
  69% {
    transform: translateX(0.002126106855528%);
  }
  70% {
    transform: translateX(-0.004165542604255%);
  }
  71% {
    transform: translateX(-0.009115840963815%);
  }
  72% {
    transform: translateX(-0.01287218406425%);
  }
  73% {
    transform: translateX(-0.015581198472674%);
  }
  74% {
    transform: translateX(-0.017385413211898%);
  }
  75% {
    transform: translateX(-0.018420685958162%);
  }
  76% {
    transform: translateX(-0.01881429595241%);
  }
  77% {
    transform: translateX(-0.018683617093032%);
  }
  78% {
    transform: translateX(-0.01813528817911%);
  }
  79% {
    transform: translateX(-0.01726480184135%);
  }
  80% {
    transform: translateX(-0.016156439078216%);
  }
  81% {
    transform: translateX(-0.014883483052074%);
  }
  82% {
    transform: translateX(-0.013508651492216%);
  }
  83% {
    transform: translateX(-0.01208469458966%);
  }
  84% {
    transform: translateX(-0.01065511137206%);
  }
  85% {
    transform: translateX(-0.009254944161867%);
  }
  86% {
    transform: translateX(-0.007911616890866%);
  }
  87% {
    transform: translateX(-0.006645788695408%);
  }
  88% {
    transform: translateX(-0.005472199469452%);
  }
  89% {
    transform: translateX(-0.004400488971655%);
  }
  90% {
    transform: translateX(-0.003435975178604%);
  }
  91% {
    transform: translateX(-0.002580381563561%);
  }
  92% {
    transform: translateX(-0.001832506009336%);
  }
  93% {
    transform: translateX(-0.001188827099526%);
  }
  94% {
    transform: translateX(-0.000644045723845%);
  }
  95% {
    transform: translateX(-0.000191561904643%);
  }
  96% {
    transform: translateX(0.000176111653104%);
  }
  97% {
    transform: translateX(0.000466996617391%);
  }
  98% {
    transform: translateX(0.000689353114254%);
  }
  99% {
    transform: translateX(0.000851436576895%);
  }
  100% {
    transform: translateX(0.000961302729777%);
  }
}