/* MY SIMPLE RESET */
/* copied from google */

/*
box-sizing: border-box: This is the single most important rule.
  It forces padding and borders to be included within the element's specified width and height,
  rather than being added on top. This prevents elements from breaking out of their containers.
Removing Margins and Padding: Browsers add default spacing (margins) to elements like headings,
  paragraphs, and lists.
Removing them (margin: 0) ensures you are starting from a completely blank canvas so you can
  apply spacing exactly where you want it.
Responsive Media: Adding max-width: 100% and display: block to images prevents them from
  overflowing their parent containers, making them automatically responsive on mobile screens.
Inherited Form Fonts: By default, inputs and buttons use system defaults instead of the
  font you set for the rest of your website. Setting font: inherit ensures your forms match
  the typography of the rest of your page.
Font Smoothing: Adding -webkit-font-smoothing: antialiased; makes text look crisper and
  smoother on macOS and iOS devices.


/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2. Remove default margin and padding for better baseline control */
* {
  margin: 0;
  padding: 0;
}

/* 3. Improve body defaults */
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* 4. Inherit fonts for form controls */
input, button, textarea, select {
  font: inherit;
}

/* 5. Prevent text overflows for images and SVGs */
img, svg, picture, video {
  display: block;
  max-width: 100%;
}

/* 6. Remove built-in list styles for ul, ol elements */
ul, ol {
  list-style: none;
}

/* here are some others that google also suggested */
/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  xmin-height: 100vh;  /* this might cause issues, as screen will stretch top to bottom. */
  /* one alternative, put width: 100% on the html element */
  /* also see min-height: 100svh; to prevent jerking on mobile when url bar dissappears */
  text-rendering: optimizeSpeed;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* here are some other resets, possibly from w3css */
html {
  font-family: Verdana, sans-serif; /* Fallback baseline */
  font-size: 15px;                  /* Custom default root font-size */
  line-height: 1.5;                /* Clean paragraph readability spacing */
  overflow-x: hidden;              /* scott, this broke dialog Prevents accidental horizontal layout breaks */
}
audio, canvas, progress, video {
  display: inline-block;
}
img {
  max-width: 100%;
  height: auto;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Segoe UI", Arial, sans-serif; /* Modern UI typography */
  font-weight: 400;                            /* Normalizes default bold styling */
  margin: 10px 0;                             /* Uniform top and bottom margins */
}
button, input, select, textarea {
  font: inherit; /* Forces form controls to match document font properties */
  margin: 0;     /* Removes varying browser-applied input margins */
}
button, select {
  text-transform: none; /* Removes erratic capitalized button text rendering */
}
a {
  background-color: transparent; /* Fixes unexpected gray backgrounds on IE10 */
}
a:active, a:hover {
  outline-width: 0; /* Clears fuzzy border selection focus rings */
}


/* restore stuff that w3css clobbered */
/* --- 1. Restore standard and visited link colors --- */
a:link {
  color: blue; /* Or your preferred unvisited color */
}

a:visited {
  color: purple; /* Or your preferred visited color */
}