first version

reset.css

@@ -0,0 +1,149 @@
+/* Box Sizing Reset
+
+Swap to a sensible box model
+*/
+
+*,
+**::after,
+**::before {
+    box-sizing: border-box;
+}
+
+/* Remove default spacing and weird fonts from all elements
+
+*/
+* {
+    margin: 0;
+    padding: 0;
+    font: inherit
+}
+
+/* Dark Mode
+
+Enable dark mode by default
+*/
+html {
+    color-scheme: dark light;
+}
+
+/* Remove body margin
+
+There is a small margin on the body margin
+which we do not need and override anyway 
+*/
+
+body {
+    margin: unset;
+}
+
+/* Body Height
+
+a.k.a "Why is there space below?
+*/
+body {
+    min-height: 100vh;
+    min-height: 100svh;
+}
+
+/* Media
+
+a.k.a "Why is there space below?"
+*/
+
+picture,
+svg,
+video,
+canvas {
+    display: block;
+    max-inline-size: 100%;
+    max-width: 100%;
+    block-size: auto;
+}
+
+/* Better Image Handling
+
+Could this also be used for canvas elements and videos? Check
+*/
+img {
+    font-style: italic;
+    /* If image can't load, show italic alt text */
+
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    shape-margin: 1rem;
+    /* If we float an image, keep a margin around the image */
+
+    max-width: 100%;
+    /* Do not overflow the parent container */
+    height: auto;
+    vertical-align: middle;
+    /* Get rid of the space at the bottom */
+}
+
+/* Text Balancing for headings
+
+Prevent orphans from appearing and
+balance out headings that span multiple rows
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    text-wrap: balance;
+}
+
+/* Text Balancing for paragraphs
+
+Prevent long lines and orphans of text
+*/
+
+p {
+    max-width: 75ch;
+    /* max-width could also be a custom property like '--line-length' */
+    text-wrap: pretty;
+}
+
+/* Accessibility: Reduce motion if user explicitly opts out
+
+Hint: We do not set it to "none", but an imperceivable amount, so that events like "transitionend" still fire and do not break code.
+*/
+
+@media (prefers-reduced-motion: reduce) {
+
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}
+
+/* Accessibility: Smooth Scroll
+
+Similarly like the rule above, if the user did not explicitly opt out of motion, make the scrolling smooth by default
+*/
+
+@media (prefers-reduced-motion: no-preference) {
+
+    /* We use :has(:target) instead of the html element to also apply to inside elements */
+    :has(:target) {
+        scroll-behavior: smooth;
+        scroll-padding-top: 2rem;
+        /* The page scrolls so there is a 3rem space above the anchor elements position */
+    }
+}
+
+/* Aligning quotation marks
+
+Keep quotation marks outside of the main texts box (this is only supported in Safari. Yes. Only in Safari.)
+*/
+
+html {
+    hanging-punctuation: first last;
+}