keychain

/* REPLACE the existing #keychain CSS block with this: */

#keychain {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 180px;
  height: auto;
  z-index: 50;
  filter: drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(0px 0px 1px white) drop-shadow(2px 2px #00000044);
}

/* ADD "position: relative" to .layout so the keychain anchors to the content box instead of the browser window: */

.layout {
  position: relative;
}

/* fonts 3. ADD this inside the existing @media (max-width: 800px) block, to scale the keychain down on mobile: */

  #keychain {
    width: 100px;
    top: -10px;
    right: -10px;
  }

/* switching fixed -> absolute makes the keychain position relative to .layout (the content box) instead of the browser viewport, so it sits at the corner of your content wherever that content is, instead of a fixed % of screen width that shifts between desktop and phone. */