/* 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;
    /* that's important for form elements */
    font: inherit;
}

/* Dark Mode

Enable dark mode and specify the website works with both modes 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 {
    /* Fallback if browsers don't support dynamic viewport units*/
    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 {
    /* If image can't load, show italic alt text */
    font-style: italic;

    /* for the low quality image placeholder hack in the background*/
    background-repeat: no-repeat;
    background-size: cover;

    /* If we float an image, keep a margin around the image */
    shape-margin: 1rem;

    /* Do not overflow the parent container */
    max-width: 100%;

    /* to keep the aspect ratio the same */
    height: auto;

    /* Get rid of the space at the bottom */
    vertical-align: middle;
}

/* 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 could also be a custom property like '--line-length' */
    max-width: 75ch;
    text-wrap: pretty;
}

/* Accessibility: Reduce motion if user explicitly opts out

Hint: We do not set the values 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;
        /* The page scrolls so there is a 3rem space above the anchor elements position */
        scroll-padding-top: 2rem;
    }
}

/* 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;
}