/* 
IMPORTANT

<img alt="">
    alt text for screen readers and also if the image stops working

<img loading="lazy"> 
    when they are outside the viewport on page load

<img width="" height=""> 
    so the space to fit them is reserved even when they have not loaded yet

*/



:root{
    /* a reasonable default line height*/
    --line-height:1.5;
    /* when navigating to a href #, it scrolls some more to leave some visual space with the top of the page */
    --scroll-padding:3rem;
    /* for comfortable reading */  
    --p-max-width:65ch;
    /* when floating an image, so text wraps around it properly*/
    --shape-margin: 1rem;
}

*, 
*::before, 
*::after{
    box-sizing: border-box;
}

*{
    margin:0;
    padding:0;
    font:inherit; /*removes all style from titles and so on */
}

html{
    color-scheme: dark light;

    /* If a text or title starts with a symbol, it hangs outside, for better aesthetics*/
    hanging-punctuation: first last; 
}

html:focus-within{
    scroll-behavior: smooth;
}

html, 
body{
    height:100%;
}

body {
    /* useful for mobile, when parts of the interface may change the actual 100vh*/
    min-height: 100svh;
    text-rendering: optimizeSpeed;
    line-height: var(--line-height);
}

img, 
picture, 
svg, 
video{
    max-width: 100%; /* no overflow */
    display:block; /* not mixing up with text or other*/
}

img{
    vertical-align: middle;
    height:auto;

    font-style:italic; /* good for alt text */

    /*for placeholder images used as a background when loading*/ 
    background-repeat: no-repeat;
    background-size:cover;

    /* when floating an image, so text wraps around it properly*/
    shape-margin: var(--shape-margin); 
}

h1, h2, h3, h4, h5, h6{
    text-wrap: balance; /* better title aesthetics */
}

p, 
li, 
figcaption {
    text-wrap: pretty; /* removes "orphans" */
    max-width: var(--p-max-width);
}


header, 
footer, 
main, 
section, 
article{
    container-type: inline-size;
}


@media (prefers-reduced-motion: no-preference){
    :has(:target){
        scroll-behavior:smooth;
        scroll-padding-top: var(--scroll-padding);
    }
}

/* Remove animations, transitions and smooth scrolling for people who prefer reduced motion*/

@media (prefers-reduced-motion: reduce){

    html:focus-within{
        scroll-behavior: auto;
    }

    *, 
    *::before, 
    *::after{
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior:auto !important;
    }
}