@font-face {
     font-family: "IBM Plex Sans";
     font-style: normal;
     font-weight: 300;
     font-display: swap;
     src: url("fonts/ibm-plex-sans-300.woff2") format("woff2");
 }

 @font-face {
     font-family: "IBM Plex Sans";
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url("fonts/ibm-plex-sans-400.woff2") format("woff2");
 }

 @font-face {
     font-family: "Space Grotesk";
     font-style: normal;
     font-weight: 500;
     font-display: swap;
     src: url("fonts/space-grotesk-500.woff2") format("woff2");
 }

 :root {
     --accent-rgb: 70, 170, 200;
     --dim: rgba(255, 255, 255, .75);
     --halo-text: 0 0 60px rgba(0, 0, 0, .85), 0 0 12px rgba(0, 0, 0, .95);
     --halo-img: drop-shadow(0 0 22px rgba(0, 0, 0, .75)) drop-shadow(0 0 6px rgba(0, 0, 0, .9));
 }

 body {
     font-family: "IBM Plex Sans", sans-serif;
     text-shadow: var(--halo-text);
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: "Space Grotesk", sans-serif;
 }

 .dim {
     color: var(--dim);
 }

 .subtext {
     font-size: .78rem;
     font-weight: 300;
     color: var(--dim);
 }

 main img {
     filter:
         drop-shadow(0 0 5px rgba(var(--accent-rgb), 0)) drop-shadow(0 0 12px rgba(var(--accent-rgb), 0)) var(--halo-img);
 }

 .item:hover img,
 .item:focus-visible img {
     filter:
         drop-shadow(0 0 5px rgba(var(--accent-rgb), .95)) drop-shadow(0 0 12px rgba(var(--accent-rgb), .8)) var(--halo-img);
 }

 .item {
     color: inherit;
     text-decoration: none;
     text-shadow:
         0 0 4px rgba(var(--accent-rgb), 0),
         0 0 11px rgba(var(--accent-rgb), 0),
         var(--halo-text);
 }

 .item:hover,
 .item:focus-visible {
     text-shadow:
         0 0 4px rgba(var(--accent-rgb), .95),
         0 0 11px rgba(var(--accent-rgb), .75),
         var(--halo-text);
 }

 /* Bootstrap's spacer scale tops out at 3rem, so the section break lives here */
 #projects-title {
     margin-top: 6rem;
     margin-bottom: 2rem;
 }

 .item .bi {
     font-size: 2.25rem;
     line-height: 1;
 }

 @media (prefers-reduced-motion: no-preference) {
     .item {
         transition: text-shadow .25s ease;
     }

     .item img {
         transition: filter .25s ease;
     }

     .item .subtext {
         transition: color .25s ease;
     }

     .rise {
         animation: rise .7s cubic-bezier(.2, .7, .3, 1) backwards;
     }

     #links {
         animation-delay: .1s;
     }

     #projects-title {
         animation-delay: .2s;
     }

     #projects {
         animation-delay: .25s;
     }

     @keyframes rise {
         from {
             opacity: 0;
             transform: translateY(14px) scale(.98);
         }
     }
 }