/* Every browser (Chrome, Safari, Firefox) has its own weird default styles for things like buttons and margins. The Reset file "zeros everything out" so you have a perfectly flat, consistent starting point.*/


/* 1. Use a more-intuitive box sizing model */
*, *::before, *::after {                            /* The "Star" Selector (*) is a universal selector. it tells the browser to apply these rulws to every single element on the entire page */
    box-sizing: border-box;                        /* (border-box) This changes the box-sizing model so that padding and borders are included within the width and height of box. "the box stays the same sixe no matter how much padding you put in it" */            
}

/* 2. Remove default margins so things dont have "accidental" gaps */
* {
    margin: 0;
    padding: 0;
}

/* 3. Improve media defaults */
img, picture, video, canvas, svg {
    display: block;                                /* Changes the display property of these elements from inline to block, preventing unwanted space below them */
    max-width: 100%;                              /* Ensures that these media elements do not overflow their containers "I will never be wider than the container im in" */
}

/* 4. Remove built-in form typography styles */
input, button, textarea, select {
    font: inherit;                                /* Inherits the font styles from their parent elements, ensuring consistency in typography across form elements */
}

/* 5. Smooth scrolling */
html {
    scroll-behavior: smooth;                       /* Enables smooth scrolling for anchor links and other in-page navigation (makes the browser slider gracefully to new position instead of instantly jumping to that spot) */
}

/* 6. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;                     /* Ensures that long words or URLs will break and wrap onto the next line instead of overflowing their containers */
}