/****************************************************** 
*
* Made with the help of:
*   https://www.joshwcomeau.com/css/custom-css-reset/
*   
* Uses modern-normalize for the bulk:
*   https://github.com/sindresorhus/modern-normalize
*     NPM LINK:
*       https://www.npmjs.com/package/modern-normalize
*
* Permission for use was given by creators.
******************************************&&*********/


/* Handles the bulk of css normalization */
@import './modern-normalize.css';

/* Remove default padding and margins */
* {
  padding: 0;
  margin: 0;
}

/* 
  The default height of 1.15 is less accessible and harder to read than 1.5
*/
:root {
  line-height: 1.5;
}

/* 
  Ensure the better box model is applied, while allowing tweaking if needed on elements.
*/
html {
  box-sizing: border-box;
}

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

/* 
  This makes text rendering more readable on modern hardware.
  !!Only effects MacOS!!
*/
body {
  -webkit-font-smoothing: antialiased;
}

/* 
  1) Images by default are in-line. 
     Typically when we want to use images, we want them to be there own block.

  2) Ensures large images shrink to fit inside container.
     Relevant for high-dpi mobile screens.
*/
img {
  display: block; /* 1 */
  max-inline-size: 100%; /* 2 */
}

/* 
  This prevents text from overflowing outside the container, by breaking a word
  to wrap onto a new line.
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* 
  1) This changes the text-wrapping for paragraphs to force a final line to contain
     at minimum 2 words. !!Not supported by all browsers!!

  2) This makes the line wrap algorithm ensure each line of text is roughly the 
     same length.
*/
p /* 1 */ {
  text-wrap: pretty;
}

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