feat: switch to modern-normalize CSS package

The normalize.css package hasn't been updated in 7 years and I suspect
many of its changes are no longer necessary. modern-normalize is
slightly more opinionated, and resulted in some layout shifts due to it
defaulting to `box-sizing: border-box;`. But that's meant I've now gone
back and improved my CSS to rely less on padding when margins are more
appropriate, and made more use of flexbox to centre elements rather than
auto margins.

frontend/package-lock.json

···
       "dependencies": {
         "htmx-ext-sse": "^2.2.2",
         "htmx.org": "^2.0.4",
-        "normalize.css": "^8.0.1",
+        "modern-normalize": "^3.0.1",
         "three": "^0.172.0"
       },
       "devDependencies": {
···
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/modern-normalize": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-3.0.1.tgz",
+      "integrity": "sha512-VqlMdYi59Uch6fnUPxnpijWUQe+TW6zeWCvyr6Mb7JibheHzSuAAoJi2c71ZwIaWKpECpGpYHoaaBp6rBRr+/g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
···
       "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
       "dev": true,
       "license": "MIT"
-    },
-    "node_modules/normalize.css": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
-      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
     },
     "node_modules/optionator": {
       "version": "0.9.4",
···
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
       "dev": true
     },
+    "modern-normalize": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-3.0.1.tgz",
+      "integrity": "sha512-VqlMdYi59Uch6fnUPxnpijWUQe+TW6zeWCvyr6Mb7JibheHzSuAAoJi2c71ZwIaWKpECpGpYHoaaBp6rBRr+/g=="
+    },
     "ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
···
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
       "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
       "dev": true
-    },
-    "normalize.css": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
-      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
     },
     "optionator": {
       "version": "0.9.4",

frontend/package.json

···
     "url": "https://github.com/ivomurrell/myivo.git"
   },
   "dependencies": {
-    "htmx.org": "^2.0.4",
     "htmx-ext-sse": "^2.2.2",
-    "normalize.css": "^8.0.1",
+    "htmx.org": "^2.0.4",
+    "modern-normalize": "^3.0.1",
     "three": "^0.172.0"
   },
   "volta": {

frontend/src/css/defaults.css

···
-html {
-  font-family: -apple-system, Helvetica, Arial, sans-serif;
-}
-
 h1 {
   font-size: 3.6em;
   padding-left: 4%;

frontend/src/css/header.css

···
   --logo-aspect-ratio: 2.5;
 
   height: 100%;
-  margin: auto;
-  padding-right: 3%;
+  margin-right: 3%;
   width: calc(var(--header-viewport-proportion) * var(--logo-aspect-ratio));
 
   @media screen and (max-height: 500px) {

frontend/src/css/main.css

···
-@import "normalize.css";
+@import "modern-normalize";
 @import "defaults";
 @import "header";
 @import "projects";

frontend/src/css/projects.css

···
 .projects {
-  --animation-padding: calc(100% / 12);
+  --animation-distance: calc(100% / 12);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 @keyframes project-fade-in-left {
   0% {
     opacity: 0;
-    transform: translateX(calc(var(--animation-padding) * -1));
+    transform: translateX(calc(var(--animation-distance) * -1));
   }
 
   100% {
···
 @keyframes project-fade-in-right {
   0% {
     opacity: 0;
-    transform: translateX(var(--animation-padding));
+    transform: translateX(var(--animation-distance));
   }
 
   100% {
···
 .project-container {
   align-items: center;
   display: flex;
-  margin: 0 auto 6vh;
+  margin: 0 var(--animation-distance) 6vh;
   max-width: 1000px;
-  padding: 0 var(--animation-padding);
 
   @media screen and (max-width: 900px) {
     flex-wrap: wrap-reverse;
···
 
 .project-container:nth-child(odd) {
   --animation: project-fade-in-right;
-  --flex-direction: reverse;
+  --flex-direction: row;
 
   .project-desc {
     margin-right: var(--margin);