megareset.css

/*For tailwind*/
*,
*::before,
*::after {
    position: relative; /* make absolutely positioned elements relative to their parent by default */
    margin: 0;
    min-width: 0; /* prevent flex items from overflowing horizontally */
    min-height: 0; /* prevent flex items from overflowing vertically */
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: none;
    background-position: center center; /* better default than `0% 0%` */
    background-repeat: no-repeat; /* better default than `repeat` */
}

html {
    text-align: left; /* make `text-align: inherit` work properly in subsequent rules */
}

button,
input,
select,
textarea {
    display: block; /* override UA stylesheet’s `display: inline-block` */
    /* make the inheritable text properties actually inherit */
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

button,
[type="button"],
[type="reset"],
[type="submit"],
[type="file"],
[type="file"]::-webkit-file-upload-button {
    appearance: none; /* override Preflight’s `-webkit-appearance: button` */
    cursor: pointer; /* apply Preflight’s `button { cursor: pointer }` to `input` buttons */
}

input::placeholder,
textarea::placeholder {
    /* override Preflight’s arbitrary placeholder color */
    color: inherit;
    opacity: 0.75; /* or other? */
}

svg {
    overflow: visible; /* override UA stylesheet’s `overflow: hidden`, to prevent clipping the edges of `svg` elements */
}

label {
    display: block; /* override UA stylesheet’s `display: inline` */
}

summary {
    display: block; /* override Preflight’s `display: list-item` */
}

/*
 * Otherwise browsers will automatically set the font family to monospace, which
 * might not be a part of your brand’s style guide.
 */
code,
kbd,
pre,
samp {
    font-family: inherit; /* override UA stylesheet’s `font-family: monospace` and Preflight’s `theme('fontFamily.mono')` */
}

address,
cite,
dfn,
var {
    font-style: inherit; /* override UA stylesheet’s `font-style: italic` */
}

small {
    font-size: inherit; /* override UA stylesheet’s `font-size: smaller` and Preflight’s `font-size: 80%` */
}

mark {
    color: inherit; /* override UA stylesheet’s `color: black` */
}

table {
    border-spacing: 0; /* override UA stylesheet’s `border-spacing: 2px`, if `border-separate` is used */
}

th {
    font-weight: inherit; /* override UA stylesheet’s `font-weight: bold` */
}

th:not([align]),
caption:not([align]) {
    text-align: inherit; /* override UA stylesheet’s `text-align: center` */
}


/*
 * Otherwise if a <li> element appears outside of an <ol> or <ul> parent, for
 * whatever reason, browsers will automatically add a bullet to it.
 */
li {
    list-style-type: none;
}

ol li,
ul li {
    list-style-type: inherit;
}

/*
 * Otherwise browsers will automatically set the font weight to bold, which
 * might not be a part of your brand’s style guide. For example, you might use
 * medium (500) or semibold (600) instead of bold (700) in your brand style
 * guide and without this you may not catch it.
 */
b,
strong {
    font-weight: inherit;
}

/*
 * Otherwise browsers will automatically make these italic.
 */
address,
cite,
dfn,
em,
i,
var {
    font-style: inherit;
}


/*
 * Add double curly quotes around <q> elements and intelligently apply single
 * curly quotes to quotes within quotes.
 */
q {
    quotes: "“" "”" "‘" "’";
}

q::before {
    content: open-quote;
}

q::after {
    content: close-quote;
}

/*
 * Otherwise browsers will automatically reduce the font-size to 80-85%, which
 * might not be a part of your brand’s type scale.
 */
sub,
sup {
    font-size: inherit;
}

/*
 * Otherwise SVGs without a fill specified will just show up as stark black,
 * which might not be a part of your brand’s color palette.
 */
svg:not([fill]) {
    fill: currentColor;
}

/*
 * Otherwise browsers will automatically center the text.
 */
caption,
th {
    text-align: inherit;
}

/*
 * Otherwise browsers will automatically set the font weight to bold, which
 * might not be a part of your brand’s font weight scale.
 */
th {
    font-weight: inherit;
}


/*
 * Otherwise browsers will automatically round corners and center the text.
 */
button {
    border-radius: 0;
    font-weight: inherit;
    text-align: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}

select {
    text-transform: inherit;
}

/*
 * Otherwise browsers will automatically center the text, but forget to add a
 * pointer on hover.
 */
input[type="button"],
input[type="reset"],
input[type="submit"] {
    text-align: inherit;
    cursor: pointer;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    opacity: 1;
}

button:focus,
input[type='button']:focus,
input[type='reset']:focus,
input[type='submit']:focus {
    outline: 0;
}


script,
[hidden] {
    display: none !important;
}

/*https://piccalil.li/blog/a-more-modern-css-reset/*/


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

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
    margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
    line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
    text-wrap: balance;
}

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

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

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

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}


/*Another one*/

html:focus-within {
    scroll-behavior: smooth; /* Make the scrolling inside of any scrollable element smooth */
}

a:not([class]) {
    text-decoration-skip-ink: auto; /* Makes link undelines look better */
}

img, picture, svg, video, canvas {
    max-width: 100%; /* Makes it responsive */
    height: auto; /* Makes it responsive */
    vertical-align: middle; /* Makes text next to inline images look better */
    font-style: italic; /* If the images don't load it makes the alt decription look better */
    background-repeat: no-repeat;
    /* The background repeat and size are there if you want to load a picture first like a backroung image that is worse quality while the better quality image loads */
    background-size: cover;
}

input, button, textarea, select {
    font: inherit; /* Makes these elements inherit fonts */
}

/* Turns off animation for people who don't want to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transition: none;
    }
}

body, html {
    height: 100%; /* Makes the body element full screen */
    scroll-behavior: smooth; /* Makes normal scrolling smooth */
}

/*https://www.joshwcomeau.com/css/custom-css-reset/*/


/*
  2. Remove default margin
*/
* {
    margin: 0;
}

/*
  Typographic tweaks!
  3. Add accessible line-height
*/
body {
    line-height: 1.5;
}

/*
  5. Improve media defaults
*/
img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

/*
  6. Remove built-in form typography styles
*/
input, button, textarea, select {
    font: inherit;
}

/*
  7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

/*
  8. Create a root stacking context
*/
#root, #__next {
    isolation: isolate;
}

/*css remedy*/

/* @docs
label: Pre Wrapping

note: |
  Overflow by default is bad...

category: typography
*/
pre {
    white-space: pre-wrap;
}


/* @docs
label: Horizontal Rule

note: |
  1. Solid, thin horizontal rules
  2. Remove Firefox `color: gray`
  3. Remove default `1px` height, and common `overflow: hidden`

category: typography
*/
hr {
    border-style: solid;
    border-width: 1px 0 0;
    color: inherit;
    height: 0;
    overflow: visible;
}


/* @docs
label: Responsive Embeds

note: |
  1. Block display is usually what we want
  2. The `vertical-align` removes strange space-below in case authors overwrite the display value
  3. Responsive by default
  4. Audio without `[controls]` remains hidden by default

category: embedded elements
*/
img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
    max-width: 100%;
}

audio:not([controls]) {
    display: none;
}


/* @docs
label: Responsive Images

note: |
  These new elements display inline by default,
  but that's not the expected behavior for either one.
  This can interfere with proper layout and aspect-ratio handling.

  1. Remove the unnecessary wrapping `picture`, while maintaining contents
  2. Source elements have nothing to display, so we hide them entirely

category: embedded elements
*/
picture {
    display: contents;
}

source {
    display: none;
}


/* @docs
label: Aspect Ratios

note: |
  Maintain intrinsic aspect ratios when `max-width` is applied.
  `iframe`, `embed`, and `object` are also embedded,
  but have no intrinsic ratio,
  so their `height` needs to be set explicitly.

category: embedded elements
*/
img, svg, video, canvas {
    height: auto;
}

/* @docs
label: List Voiceover

note: |
  1. Add zero-width-space to prevent VoiceOver disable
  2. Absolute position ensures no extra space

links:
  - https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/

category: navigation

*/
nav li:before {
    content: "\200B";
    position: absolute;
}

/**
Apply a more natural box layout model to all elements (opinionated), but allowing components to change,
compare https://www.paulirish.com/2012/box-sizing-border-box-ftw/
and https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/

html {
    box-sizing: border-box;
}

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


/*! modern-base | MIT License | https://github.com/sindresorhus/modern-normalize */


/**
 * Improve font rendering on HiDPI devices.
 */

@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 2dppx) {
    body {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
    }
}


/**
 * Show link underline only on hover (and focus for screen readers).
 */

a {
    text-decoration: none;
}

a:hover, a:focus {
    text-decoration: underline;
}

/**
 * Remove outline on active/hovered focused links.
 */

a:active,
a:hover {
    outline-width: 0;
}

/**
 * Correct the text style of placeholders in Chrome and Safari.
 * See discussion: https://github.com/necolas/normalize.css/issues/550
 */

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

/**
 * Remove text shadow from selections.
 */

::selection {
    background: #b3d7fd;
    text-shadow: none;
}

/**
 * Remove outline from `:focus` pseudo element.
 * Note: Don't forget to apply some styling for the focus state of elements that support it.
 */

:focus {
    outline-width: 0;
}

/**
 * Remove the list style on navigation lists.
 */

nav ol,
nav ul {
    list-style: none;
}

/**
 * Better looking default horizontal rule
 */

hr {
    display: block;
    margin: 1em 0;
    padding: 0;
    border: 0;
    border-top: 1px solid #ccc;
}

/**
 * Remove default fieldset styles.
 */

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

/**
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

svg,
img,
canvas,
video,
audio,
iframe {
    /**
     * Remove the gap between these elements and the bottom of their containers.
     * See: https://github.com/h5bp/html5-boilerplate/issues/440
     */
    vertical-align: middle;

    /**
     * Prevent overflow.
     */
    max-width: 100%;
}

/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/


html {
    /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
    font-family: system-ui,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji';
    line-height: 1.15; /* 1. Correct the line height in all browsers. */
    -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
    -moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
    tab-size: 4; /* 3 */
}


/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
    height: 0; /* 1 */
    color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/

/**
Add the correct text decoration in Chrome, Edge, and Safari (find a better way to apply only to mobiles)
*/

@media (hover: none) {
    abbr[title] {
        text-decoration: none; /* or underline? */
    }
}

@media (hover: hover) {
    abbr[title] {
        text-decoration: underline dotted;
    }
}

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

b,
strong {
    font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family: ui-monospace,
    SFMono-Regular,
    Consolas,
    'Liberation Mono',
    Menlo,
    monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
Tabular data
============
*/

/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
    text-indent: 0; /* 1 */
    border-color: inherit; /* 2 */
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
    text-transform: none;
}

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

button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
}


/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/

:-moz-ui-invalid {
    box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
    padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
    vertical-align: baseline;
}

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

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

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

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

::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/* resset.dev • v5.0.2 */

/* # =================================================================
   # Global selectors
   # ================================================================= */

html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
    word-break: normal;
    -moz-tab-size: 4;
    tab-size: 4;
}

*,
::before,
::after {
    background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
    box-sizing: inherit;
}

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

* {
    padding: 0; /* Reset `padding` and `margin` of all elements */
    margin: 0;
}

/* # =================================================================
   # General elements
   # ================================================================= */

hr {
    overflow: visible; /* Show the overflow in Edge and IE */
    height: 0; /* Add the correct box sizing in Firefox */
    color: inherit; /* Correct border color in Firefox. */
}

details,
main {
    display: block; /* Render the `main` element consistently in IE. */
}

[hidden] {
    display: none; /* Add the correct display in IE */
}


a {
    background-color: transparent; /* Remove the gray background on active links in IE 10 */
}

a:active,
a:hover {
    outline-width: 0; /* Remove the outline when hovering in all browsers */
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace; /* Specify the font family of code elements */
}

pre {
    font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
}

b,
strong {
    font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
}

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

table {
    border-color: inherit; /* Correct border color in all Chrome, Edge, and Safari. */
    text-indent: 0; /* Remove text indentation in Chrome, Edge, and Safari */
}

iframe {
    border-style: none;
}

/* # =================================================================
   # Forms
   # ================================================================= */

input {
    border-radius: 0;
}

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
    height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
}

[type='search'] {
    -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
    outline-offset: -2px; /* Correct the outline style in Safari */
}

[type='search']::-webkit-search-decoration {
    -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */
}

textarea {
    overflow: auto; /* Internet Explorer 11+ */
    resize: vertical; /* Specify textarea resizability */
}

button,
input,
optgroup,
select,
textarea {
    font: inherit; /* Specify font inheritance of form elements */
}

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

button {
    overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

button,
select {
    text-transform: none; /* Firefox 40+, Internet Explorer 11- */
}

/* Apply cursor pointer to button elements */
button,
[type='button'],
[type='reset'],
[type='submit'],
[role='button'] {
    cursor: pointer;
}


button,
html [type='button'], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
[type='reset'],
[type='submit'] {
    -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
}

/* Remove the default button styling in all browsers */
button,
input,
select,
textarea {
    background-color: transparent;
    border-style: none;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline-width: 0;
}

/* Style select like a standard input */
select {
    -moz-appearance: none; /* Firefox 36+ */
    -webkit-appearance: none; /* Chrome 41+ */
}

select::-ms-expand {
    display: none; /* Internet Explorer 11+ */
}

select::-ms-value {
    color: currentColor; /* Internet Explorer 11+ */
}

legend {
    border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
    color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
    display: table; /* Correct the text wrapping in Edge and IE */
    max-width: 100%; /* Correct the text wrapping in Edge and IE */
    white-space: normal; /* Correct the text wrapping in Edge and IE */
    max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */
}

::-webkit-file-upload-button {
    /* Correct the inability to style clickable types in iOS and Safari */
    -webkit-appearance: button;
    color: inherit;
    font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
}

/* Replace pointer cursor in disabled elements */
[disabled] {
    cursor: default;
}

/* # =================================================================
   # Specify media element style
   # ================================================================= */


/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
    vertical-align: baseline;
}

/* # =================================================================
   # Accessibility
   # ================================================================= */

/* Specify the progress cursor of updating elements */
[aria-busy='true'] {
    cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
    cursor: pointer;
}

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

/*Just default normalize https://github.com/csstools/normalize.css*/

/* Document
 * ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

:where(html) {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* or none? 2 */
    text-size-adjust: 100%; /* or none? 2 */
}

/* Sections
 * ========================================================================== */

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */

:where(h1) {
    font-size: 2em;
    margin-block-end: 0.67em;
    margin-block-start: 0.67em;
}

/* Grouping content
 * ========================================================================== */

/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */

:where(dl, ol, ul) :where(dl, ol, ul) {
    margin-block-end: 0;
    margin-block-start: 0;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Correct the inheritance of border color in Firefox.
 */

:where(hr) {
    box-sizing: content-box; /* 1 */
    color: inherit; /* 2 */
    height: 0; /* 1 */
}

/* Text-level semantics
 * ========================================================================== */


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

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

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

:where(code, kbd, pre, samp) {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}


/* Tabular data
 * ========================================================================== */

/**
 * 1. Correct table border color in Chrome, Edge, and Safari.
 * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */

:where(table) {
    border-color: currentColor; /* 1 */
    text-indent: 0; /* 2 */
}

/* Forms
 * ========================================================================== */


/**
 * Remove the inheritance of text transform in Firefox.
 */

:where(button) {
    text-transform: none;
}

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

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

/**
 * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */

:where(progress) {
    vertical-align: baseline;
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

:where(select) {
    text-transform: none;
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

:where(input[type="search" i]) {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

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

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

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

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

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

::-webkit-search-decoration {
    -webkit-appearance: none;
}

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

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}


/**
 * Remove the additional :invalid styles in Firefox.
 */

:where(:-moz-ui-invalid) {
    box-shadow: none;
}

/* Interactive
 * ========================================================================== */

/*
 * 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 font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */

:where(h1) {
    font-size: 2em;
    margin-block-end: 0.67em;
    margin-block-start: 0.67em;
}

/* Grouping content
 * ========================================================================== */

/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */

:where(dl, ol, ul) :where(dl, ol, ul) {
    margin-block-end: 0;
    margin-block-start: 0;
}


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

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

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

:where(code, kbd, pre, samp) {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}


/* Tabular data
 * ========================================================================== */

/**
 * 1. Correct table border color in Chrome, Edge, and Safari.
 * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */

:where(table) {
    border-color: currentColor; /* 1 */
    text-indent: 0; /* 2 */
}

/* Forms
 * ========================================================================== */

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

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

/**
 * Remove the inheritance of text transform in Firefox.
 */

:where(button) {
    text-transform: none;
}

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

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

/**
 * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */

:where(progress) {
    vertical-align: baseline;
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

:where(select) {
    text-transform: none;
}

/**
 * Remove the margin in Firefox and Safari.
 */

:where(textarea) {
    margin: 0;
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

:where(input[type="search" i]) {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

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

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

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

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

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

::-webkit-search-decoration {
    -webkit-appearance: none;
}



/*continue researching*/
/*https://github.com/u1ui/norm.css*/
/*https://github.com/u1ui/base.css*/
/*https://keithjgrant.com/posts/2024/01/my-css-resets/*/
/*https://github.com/elad2412/the-new-css-reset*/
/*https://github.com/xkrishguptaa/reseter.css*/
/*https://github.com/csstools/sanitize.css*/
/*https://github.com/mblode/marx*/
/*https://github.com/matheushenriquefs/modress*/
/*https://www.youtube.com/watch?v=cCAtD_BAHNw*/
/*https://gist.github.com/EllyLoel/4ff8a6472247e6dd2315fd4038926522*/
/*https://www.youtube.com/watch?v=345V2MU3E_w*/