/* =========================================================
   RESET.CSS
   =========================================================

   Browsers all have their own built-in styling.

   Example:
   - Chrome gives headings one size
   - Firefox gives another
   - Safari adds strange margins

   A reset removes all those inconsistencies so YOU
   control the appearance instead of the browser.

   Think of this like clearing a whiteboard before writing.
   ========================================================= */


/* Remove default spacing from everything */
* {
    margin: 0;
    padding: 0;

    /*
        box-sizing: border-box

        VERY IMPORTANT.

        Normally:
            width = content only

        With border-box:
            width = content + padding + border

        This makes layouts MUCH easier to control.
    */
    box-sizing: border-box;
}


/*
    Make images behave properly inside containers.

    max-width: 100%
        Prevents images from overflowing.

    display: block
        Removes weird inline spacing.
*/
img {
    max-width: 100%;
    display: block;
}


/*
    Remove ugly default blue/purple link styling.

    We'll style links manually later.
*/
a {
    text-decoration: none;
    color: inherit;
}


/*
    Prevent long words from breaking layouts.
*/
body {
    overflow-wrap: break-word;
}