Change everything except font properties to px instead of rem

src/components/blog/Balloon.astro

···
 
 <div
   class="cable"
-  style={`--length: ${length}rem;
+  style={`--length: ${length}px;
           --id: ${id};
           --of: ${of};
-          --offset: ${offset}rem;
+          --offset: ${offset}px;
           ${rotation.map((x, i) => `--rot-${i}: ${x}deg;`).join(" ")}
           --timing: ${utils.getRandom(blog.balloons.timing)}s;
           `}
 >
   <div
     class="balloon"
-    style={`--width: ${utils.getRandom(blog.balloons.size[0])}rem;
-            --height: ${utils.getRandom(blog.balloons.size[1])}rem;`}
+    style={`--width: ${utils.getRandom(blog.balloons.size[0])}px;
+            --height: ${utils.getRandom(blog.balloons.size[1])}px;`}
     tabindex="-1"
     data-min-time={blog.balloons.time[0]}
     data-max-time={blog.balloons.time[1]}
···
           [
             {},
             {
-              top: "calc(var(--x-offset-0) + 50rem)",
+              top: "calc(var(--x-offset-0) + 500px)",
             },
           ],
           {
···
         postParent.animate(
           [
             {
-              top: "calc(var(--x-offset-0) + 50rem)",
+              top: "calc(var(--x-offset-0) + 500px)",
             },
             {},
           ],
···
   .cable {
     position: absolute;
 
-    width: 0.5rem;
+    width: 5px;
     height: var(--length);
-    border-radius: 0.25rem;
+    border-radius: 2.5px;
     background: black;
 
     [data-time="night"] + * & {
       background: #404040;
     }
 
-    /* .5rem accounts for border (z-index doesn't work) */
     z-index: -99;
     top: calc(-1 * var(--length));
     left: calc(
···
   }
 
   .cable-tie {
-    width: 1.75rem;
-    height: 0.5rem;
+    width: 17.5px;
+    height: 5px;
 
     position: absolute;
-    bottom: -0.25rem;
+    bottom: -2.5px;
     left: 50%;
     translate: -50%;
     z-index: 1;
 
-    border-radius: 0.25rem;
+    border-radius: 2.5px;
     background-color: black;
 
     [data-time="night"] + * & {
···
   }
 
   .tie {
-    width: 2rem;
-    height: 2rem;
+    width: 20px;
+    height: 20px;
     background-color: var(--colour);
     clip-path: polygon(50% 0, 0 100%, 100% 100%);
     position: absolute;
-    bottom: -1rem;
+    bottom: -10px;
     left: 50%;
     translate: -50%;
   }

src/components/blog/CodeHeading.astro

···
 
       & svg {
         stroke: var(--text);
-        margin: 0.2rem;
+        margin: 2px;
       }
     }
 
···
       justify-content: space-between;
       align-items: center;
       /* gets overridden by * because why not ig */
-      padding: 1rem !important;
+      padding: 10px !important;
       position: sticky;
       top: 0;
       left: 0;
-      border-bottom: 0.4rem solid var(--border);
+      border-bottom: 4px solid var(--border);
       user-select: none;
     }
   </style>

src/components/blog/Post.astro

···
           ${offsets
             .map(
               (x, i) =>
-                `--x-offset-${i}: calc((100svw - ${blog.post.width + 2 * blog.post.xPadding}rem) * ${positions[0] + x[0]} + ${blog.post.xPadding}rem); 
-                 --y-offset-${i}: ${blog.post.yLeeway * 2 * (positions[1] + x[1]) - blog.post.yLeeway}rem;`,
+                `--x-offset-${i}: calc((100svw - ${blog.post.width + 2 * blog.post.xPadding}px) * ${positions[0] + x[0]} + ${blog.post.xPadding}px); 
+                 --y-offset-${i}: ${blog.post.yLeeway * 2 * (positions[1] + x[1]) - blog.post.yLeeway}px;`,
             )
             .join("\n")}
 
···
 
           /* config */
           
-          --width: ${blog.post.width}rem;
-          --y-gap: ${blog.post.yGap}rem;
+          --width: ${blog.post.width}px;
+          --y-gap: ${blog.post.yGap}px;
           `}
 >
   {
···
 
   section {
     width: var(--width);
-    padding: 1rem;
+    padding: 10px;
     margin-bottom: var(--y-gap);
 
     position: relative;
···
       content: "" / "";
       display: block;
       position: absolute;
-      top: -0.5rem;
-      left: -0.5rem;
+      top: -5px;
+      left: -5px;
       z-index: -2;
 
-      width: calc(var(--width) + 1rem);
-      height: calc(100% + 1rem);
+      width: calc(var(--width) + 10px);
+      height: calc(100% + 10px);
 
       background-color: white;
-      border: 0.5rem solid var(--colour, dodgerblue);
-      border-radius: 2.5rem;
+      border: 5px solid var(--colour, dodgerblue);
+      border-radius: 25px;
 
-      box-shadow: 0 0 7.5rem var(--box-shadow-colour, #00000080);
+      box-shadow: 0 0 75px var(--box-shadow-colour, #00000080);
     }
 
     /* default, overridden by reduced motion */
···
     }
 
     & > img {
-      border-radius: 1.5rem;
+      border-radius: 15px;
 
-      width: 30rem;
-      height: 20rem;
+      width: 300px;
+      height: 200px;
       object-fit: cover;
     }
   }

src/components/blog/background/Clouds.astro

···
             ...prev.output,
             <Cloud
               style={`--parallax-speed: ${blog.background.parallax.clouds};
-                      width: ${width}rem;
-                      height: ${height}rem;
-                      top: ${y}rem;
+                      width: ${width}px;
+                      height: ${height}px;
+                      top: ${y}px;
                       left: calc(${x} * 200lvw - 100lvw);
                       position: absolute;`}
               id={"cloud-" + i}

src/components/blog/background/Moon.astro

···
 
 <style>
   svg {
-    width: 20rem;
-    height: 20rem;
-    font-size: 20rem;
+    width: 200px;
+    height: 200px;
+    font-size: 200px;
 
     position: absolute;
-    top: 30rem;
-    right: 1rem;
+    top: 300px;
+    right: 10px;
   }
 </style>
 

src/components/blog/background/Stars.astro

···
       return (
         <svg
           style={`--parallax-speed: ${utils.getRandom(blog.background.parallax.star, sizeSeed)};
-                --size: ${blog.background.stars.size[0] + sizeSeed * (blog.background.stars.size[1] - blog.background.stars.size[0])}rem;
+                --size: ${blog.background.stars.size[0] + sizeSeed * (blog.background.stars.size[1] - blog.background.stars.size[0])}px;
                 --x: ${Math.random()};
                 --y: ${Math.random()};
                 --rotate-speed: ${blog.background.stars.rotateSpeed[0] + Math.random() * (blog.background.stars.rotateSpeed[1] - blog.background.stars.rotateSpeed[0])}s;

src/components/blog/background/Sun.astro

···
   svg {
     position: absolute;
     border-radius: 100%;
-    top: 15rem;
-    left: calc(100lvw * var(--sun-progress-percent) - 7.5rem);
+    top: 150px;
+    left: calc(100lvw * var(--sun-progress-percent) - 75px);
     z-index: -1;
 
     animation:

src/components/blog/post.css

···
   & h2,
   & h3,
   & h4 {
-    margin-block-start: 2rem;
-    margin-block-end: 2rem;
+    margin-block-start: 20px;
+    margin-block-end: 20px;
 
     color: var(--typo-subheading);
 
···
   & p,
   & blockquote {
     clear: both;
-    margin-block: 2rem;
+    margin-block: 20px;
   }
 
   & div:has(> p) {
-    margin-block: 1rem;
+    margin-block: 10px;
   }
 
   /* Images */
   & img {
     height: auto; /* fix height issues ?? */
-    margin: 1rem;
+    margin: 10px;
   }
 
   & a {
-    text-decoration: 0.2rem underline;
+    text-decoration: 2px underline;
 
     &:link {
       color: var(--typo-url);
···
       color: var(--typo-visited);
     }
     &:hover {
-      text-decoration: 0.1rem wavy underline;
+      text-decoration: 1px wavy underline;
     }
     &:active {
       color: var(--rainbow-3);
···
   /* Standard Lists */
   & ul,
   & ol {
-    margin-inline-start: 4rem;
+    margin-inline-start: 40px;
     & & {
-      margin-inline-start: 2rem;
+      margin-inline-start: 20px;
     }
   }
 
   /* Blockquotes */
   & blockquote {
     --accent: var(--bg-secondary);
-    border-left: 0.2rem solid hsl(from var(--accent) h s calc(l * 0.9));
-    padding: 1rem 4rem 1rem 1rem;
-    margin: 1rem;
-    border-radius: 0.5rem;
+    border-left: 2px solid hsl(from var(--accent) h s calc(l * 0.9));
+    padding: 10px 40px 10px 10px;
+    margin: 10px;
+    border-radius: 5px;
     background-color: var(--accent);
     width: fit-content;
-    min-width: 20rem;
+    min-width: 200px;
 
     &::before {
       content: var(--icon) " " var(--name) / var(--name);
···
   :not(pre) > code {
     color: var(--typo-code);
     background-color: var(--bg-code);
-    padding: 0.2rem;
-    border-radius: 0.5rem;
+    padding: 2px;
+    border-radius: 5px;
 
     /* make blockquote code use a lighter version of the accent with a darker background */
     :is(blockquote) & {
···
 
   /* Outline Code */
   & pre:has(> code) {
-    padding: 0.5rem;
-    border-radius: 1rem;
+    padding: 5px;
+    border-radius: 10px;
   }
 
   .astro-code {
     background-color: var(--bg-code) !important;
-    margin-block: 1rem;
+    margin-block: 10px;
     padding: 0;
     position: relative;
 
     & code {
       display: block;
-      padding: 1rem;
+      padding: 10px;
 
       & span {
         color: light-dark(var(--shiki-light), var(--shiki-dark)) !important;
···
 
   .task-list-item label {
     display: flex;
-    margin-block-start: 0.5rem;
-    margin-block-end: 0.75rem;
+    margin-block-start: 5px;
+    margin-block-end: 75px;
 
-    gap: 0.5rem;
+    gap: 5px;
 
     & input[type="checkbox"] {
-      width: 2.5rem;
-      height: 2.5rem;
-      margin-inline-end: 0.5rem;
+      width: 25px;
+      height: 25px;
+      margin-inline-end: 5px;
 
       background: light-dark(rgb(0, 0, 0, 0.2), rgb(255, 255, 255, 0.4));
-      border-radius: 0.5rem;
-      border: 0.1rem solid var(--typo-body);
+      border-radius: 5px;
+      border: 1px solid var(--typo-body);
 
       &:checked {
         --checkmark: url("../../assets/check.svg");
-        background: var(--checkmark) center/2rem padding-box no-repeat
+        background: var(--checkmark) center/20px padding-box no-repeat
           var(--rainbow-2);
       }
     }
···
 
     & th,
     & td {
-      border: 0.1rem solid white;
-      padding: 0.5rem;
+      border: 1px solid white;
+      padding: 5px;
     }
 
     & thead th {

src/components/generic/LightDarkToggle.astro

···
 
     border: none;
     border-radius: 50%;
-    padding: 0.5rem;
+    padding: 5px;
 
-    width: 3.4rem;
-    height: 3.4rem;
+    width: 34px;
+    height: 34px;
 
     & svg {
       fill: var(--fg);

src/components/generic/Nav.astro

···
   dialog {
     color: white;
 
-    min-width: 20rem;
+    min-width: 200px;
     width: fit-content;
-    max-width: 40rem;
+    max-width: 400px;
     height: 100vh;
-    padding: 1rem;
+    padding: 10px;
 
     background: black;
     border: none;
···
   /* STUPID ISSUE (astro tries to add a tag to the backdrop) */
   :global(::backdrop) {
     background: #00000080;
-    backdrop-filter: blur(0.5rem);
+    backdrop-filter: blur(5px);
   }
 </style>

src/components/generic/NavEntry.astro

···
 <style>
   li {
     list-style-type: "╺  ";
-    margin-inline-start: 2rem;
+    margin-inline-start: 20px;
   }
 
   a:link {
···
   }
 
   a:focus {
-    outline: 0.2rem solid #62a0ea;
+    outline: 2px solid #62a0ea;
     outline-offset: 0;
-    border-radius: 0.4rem;
+    border-radius: 4px;
 
     &:visited {
       outline-color: #dc8add;

src/components/index/Map.astro

···
       top: var(--y);
       left: var(--x);
       .location:hover & {
-        filter: drop-shadow(0 0 0.5rem var(--colour));
+        filter: drop-shadow(0 0 5px var(--colour));
         scale: 1.1;
       }
     }
···
   .text {
     position: absolute;
 
-    width: 10rem;
-    height: 2rem;
+    width: 100px;
+    height: 20px;
 
     top: var(--y);
     left: var(--x);
 
     color: var(--colour);
     .location:hover & {
-      filter: drop-shadow(0 0 0.5rem var(--colour));
+      filter: drop-shadow(0 0 5px var(--colour));
     }
   }
 

src/config.ts

···
 export const blog = {
   // overrideHour: 0,
   post: {
-    width: 30,
-    xPadding: 2,
-    yLeeway: 5,
-    yGap: 20,
-    topYGap: 35,
+    width: 300,
+    xPadding: 20,
+    yLeeway: 50,
+    yGap: 200,
+    topYGap: 350,
     drift: [0.1, 1],
     timing: [10, 20],
   },
···
 
     clouds: {
       count: 8,
-      width: [40, 80],
-      height: [15, 30],
-      yGap: [15, 25],
+      width: [400, 800],
+      height: [150, 300],
+      yGap: [150, 250],
 
       bumpRadius: [20, 60],
       gradientStops: [35, 80],
···
 
     stars: {
       count: 40,
-      size: [2, 5],
+      size: [20, 50],
       prongs: [4, 8],
       rotateSpeed: [20, 40],
     },
···
   },
   balloons: {
     numBalloons: [1, 3],
-    length: [5, 15],
-    offset: [-2.5, 2.5],
+    length: [50, 150],
+    offset: [-25, 25],
     rotation: [-10, 10],
     timing: [30, 45],
     size: [
-      [5, 10],
-      [10, 20],
+      [50, 100],
+      [100, 200],
     ],
     opacity: [0.6, 0.9],
     time: [2, 5],

src/pages/blog/[id].astro

···
 
     background-color: var(--bg-secondary);
     color: var(--typo-heading);
-    padding-bottom: 0.5rem;
+    padding-bottom: 5px;
 
     & > :global(:not(style, script):last-of-type) {
-      margin-right: 1rem;
-      margin-top: 0.5rem;
+      margin-right: 10px;
+      margin-top: 5px;
     }
   }
 
···
   .content,
   :global(.full-width),
   :global([data-para-flag--full-width]) {
-    --padding-inline: 2rem;
+    --padding-inline: 20px;
     --content-max-width: 60ch;
     --breakout-max-width: 80ch;
 

src/pages/blog/index.astro

···
     height: 2em;
     aspect-ratio: 1;
     padding: 0.2em;
-    border-radius: 0.5rem;
+    border-radius: 5px;
 
     & svg {
       width: 1.6em;
···
     justify-content: space-between;
 
     & a {
-      margin: 0.5rem 1rem;
+      margin: 5px 10px;
     }
   }
 
···
 
   :global(#nav-menu) {
     background-color: black;
-    padding: 1rem;
+    padding: 10px;
     border-radius: 0 0 50% 0;
   }
 </style>
···
 <Base title="Blog">
   <Background />
   <main>
-    <heading style={`--y-gap: ${blog.post.yGap}rem`}>
+    <heading style={`--y-gap: ${blog.post.yGap}px`}>
       <Nav current="Blog" />
 
       <a href="/rss.xml" aria-label="Rss Feed">
···
       </a>
     </heading>
 
-    <div class="top-offset" style={`--top-gap: ${blog.post.topYGap}rem;`}></div>
+    <div class="top-offset" style={`--top-gap: ${blog.post.topYGap}px;`}></div>
 
     {
       posts.map((x, i) => (

src/pages/index.astro

···
       align-items: center;
       justify-content: center;
       flex-direction: column;
-      gap: 5rem;
+      gap: 50px;
       padding: 0;
       margin: 0;
       background-color: #011627;