/* CSS Reset */

*{
    padding: 0;
    margin: 0;
    border: 0;
    box-sizing: border-box;
    color: black;
}


/* Default Bootstrap's Font Styling */

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px; /* Don't delete! It helps to prevent Safari auto-zoom on text inputs, which triggers if input's font-size is < 16px. It ensures consistency across all browsers and devices. Serves as a base for rem/em units. Now, 1rem = 16px. */
    font-weight: 400;
    line-height: 1.5;
}


/* Default Bootstrap's Heading Styling */

h1, h2, h3, h4, h5, h6{
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}


/* Custom Styling */

/* Form inputs (input, select, textarea, button) do NOT inherit font-size from body by default in most browsers. They use browser-specific default sizes. */
input, textarea, select{
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}

/* 
  * Safari auto-zooms occur on input type="text", input type="password", input type="email", input type="number", input type="search", and textarea.
  * Safari does NOT auto-zoom on input type="button", input type="submit", input type="reset", button, select, checkbox, radio, and file.
*/

button, input[type="button"], input[type="submit"], input[type="reset"] {
    font-size: 0.875rem; /* ~14px looks better visually */
    line-height: 1.2;
    font-family: inherit;
}