
/* 
   1. Use a more-intuitive box-sizing model.
   2. Remove default margin.
*/
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
  }
  
  /* 
	 3. Remove default margin, padding, and borders for specific elements 
		to ensure consistent styling across browsers.
  */
  html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl, dt, dd, figure, fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td, article, aside, details, figcaption, hgroup, 
  menu, footer, header, nav, section, summary, time, mark, audio {
	  margin: 0;
	  padding: 0;
	  border: 0;
  }
  
  /* 
	 Typographic tweaks!
	 4. Set default font and color for body.
	 5. Add accessible line-height.
	 6. Improve text rendering.
  */
  body {
	  font: 16px 'Arial', sans-serif;
	  color: #333;
	  line-height: 1.5;
	  -webkit-font-smoothing: antialiased;
  }
  
  /* 
	 7. Set anchor tags to have no text decoration for cleaner link presentation.
  */
  a {
	  text-decoration: none;
  }
  
  /* 
	 8. List styling: remove bullets and numbers from lists.
  */
  ol, ul {
	  list-style: none;
  }
  
  /* 
	 9. For tables, set border collapse for consistent cell borders.
  */
  table {
	  border-collapse: collapse;
	  border-spacing: 0;
  }
  
  /* 
	 10. Reset form element styling.
	 11. Remove built-in form typography styles.
  */
  input, textarea, select, button {
	  font-family: inherit;
	  font-size: 100%;
	  font: inherit;
  }
  
  /* 
	 12. Reset image and media elements to ensure they don't exceed their container.
		 Improve media defaults.
  */
  img, picture, video, canvas, svg {
	  display: block;
	  max-width: 100%;
	  height: auto;
  }
  
  /* 
	 13. Avoid text overflows in heading and paragraph tags.
  */
  p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
  }
  
  /* 
	 14. Set the focus styles for accessibility.
  

  :focus {
	  outline: 2px solid blue;
  }
  */
  /* 
	 15. Clear float after floating containers.
  */
  .clearfix::after {
	  content: "";
	  display: table;
	  clear: both;
  }
  
  /* 
	 16. Create a root stacking context for isolation.
  */
  #root, #__next {
	isolation: isolate;
  }
  