:root {
  overflow-wrap: break-word; 
  -moz-tab-size: 4;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent; 
}

/* Consistent box-sizing rules */
/* Set `background-repeat: no-repeat` to all elements and pseudo elements */
:where(*, *::before, *::after) {
  box-sizing: border-box;
  background-repeat: no-repeat; 
}

/* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
:where(::before, ::after) {
  text-decoration: inherit; 
  vertical-align: inherit;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove margin on all sides */
/* Set body height */
:where(body) {
  margin: 0;
  min-height: 100vh;
}

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

/* Make images easier to work with */
:where(img, picture) {
  max-width: 100%;
  display: block;
}

:where(menu, ul, ol) {
  list-style: none;
  padding: 0;
  margin: 0;
}

:where(hr) {
  height: 0;
}

/* Get rid of border for <iframe> */
:where(iframe) {
	border-style: none;
}

/* Add the correct vertical alignment of <progress> in Chrome, Firefox, and Opera */
:where(progress) {
	vertical-align: baseline;
}

/* Restore the font weight unset by the previous rule */
:where(optgroup) {
	font-weight: bold; 
}

/* Change the alignment on media elements and some form elements in all browsers. */
:where(audio, canvas, iframe, img, svg, video, [type=range]) {
  vertical-align: middle;
}

/* Change the svg fill color to match the text color in all browsers. */
:where(svg:not([fill])) {
  fill: currentColor;
}

/* Collapse table border spacing in all browsers, correct table border color inheritance and remove text indentation from table contents */
:where(table) {
  border-collapse: collapse;
  border-color: inherit;
  text-indent: 0;
}





/* TYPOGRAPHY */

/* Correct font size of <h1> */
:where(h1) {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Correct the inheritance and scaling of font size in all browsers and correct the odd `em` font sizing in all browsers. */
:where(code, kbd, samp, pre) {
  font-family: monospace, monospace;
  font-size: 0.9375em;
}

:where(pre) {
  overflow: auto;
}

/* Add consistent font size for <small> in all browsers. */
:where(small) {
  font-size: 0.875em;
}

/* Adjust the Line-height of sub and sup (https://gist.github.com/unruthless/413930) */
:where(sub, sup) {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

:where(sub) {
  bottom: -0.25em;
}

:where(sup) {
  top: -0.5em;
}





/* FORM ELEMENTS */

/* Inherit fonts for inputs and buttons */
:where(input, button, textarea, select, optgroup) {
  font: inherit;
}

/* Add consistent border for <fieldset> in all browsers. */
:where(fieldset) {
  border: 1px solid #a0a0a0;
}

/* Specify textarea resizability */
:where(textarea) {
	resize: vertical; 
}

/* Make sure certain form elements are not tiny */
:where(textarea:not([rows]), optgroup, [type=text]) {
  min-width: 16rem;
}

/* Correct the odd appearance of <input type="search"> in Chrome and Safari */
:where([type='search']) {
	-webkit-appearance: textfield; 
	outline-offset: -2px;
}
  
:where([type='search']::-webkit-search-decoration) {
  -webkit-appearance: none;
}

/* Add pointer cursor to various elements */
:where(button, summary, [type=radio], [type=submit], [type=checkbox], [type=color], [type=button], [type=reset], [type=range], [type=file], [type=file]::-webkit-file-upload-button) {
    cursor: pointer;
}

/* The selectors above don't work in Firefox when the following :has selector is added */
:where(label:has([type=checkbox], [type=radio])) {
  cursor: pointer;
}

/* Replace pointer cursor in disabled elements */
:where([disabled]) {
cursor: not-allowed;
}





/* ACCESSIBILITY */

/* Specify the progress cursor of updating elements */
:where([aria-busy='true']) {
  cursor: progress;
}
  
/* Specify the pointer cursor of trigger elements */
:where([aria-controls]) {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
:where([aria-disabled='true']) {
  cursor: not-allowed;
}

/* Change the display on visually hidden accessible elements in all browsers (opinionated). */

:where([aria-hidden="false" i][hidden]) {
  display: initial;
}

:where([aria-hidden="false" i][hidden]:not(:focus)) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}





/* BROWSER SPECIFIC */

/* Remove the margin on controls in Safari. */

:where(button, input, select) {
  margin: 0;
}

/* Correct the inability to style buttons in iOS and Safari. */

:where(button, [type="button" i], [type="reset" i], [type="submit" i]) {
  -webkit-appearance: button;
}

/* Add the correct font weight in Chrome, Edge, and Safari. */

:where(b, strong) {
  font-weight: bolder;
}

/* Add the correct text decoration in Safari. */

:where(abbr[title]) {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/* Add the correct display in Safari. */

:where(details > summary:first-of-type) {
  display: list-item;
}

/* Add the correct styles in Safari. */

:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

/* Correct the cursor style of increment and decrement buttons in Safari. */

:where(::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
   height: auto;
 }

 /* Correct the text style of placeholders in Chrome, Edge, and Safari. */

 :where(::-webkit-input-placeholder) {
  color: inherit;
  opacity: 0.54;
}

/* Remove the inner padding in Chrome, Edge, and Safari on macOS. */

:where(::-webkit-search-decoration) {
  -webkit-appearance: none;
}

/* Correct the inability to style upload buttons in iOS and Safari and change font properties to `inherit` in Safari. */

:where(::-webkit-file-upload-button) {
  -webkit-appearance: button; 
  font: inherit; 
}