betterize-slim.css

@charset "UTF-8";

/* /////////////////////////////////////////////////////////////////////////// /
/* --------------------------------------------------------------------------- /
/* betterize-slim.css -- Modern normalization, better cross-browser design --- /
/* @author Stephen M Irving -- <@metric_dev> --------------------------------- /
/* version 2.0.9 -- 03/28/2024 ----------------------------------------------- /
/* --------------------------------------------------------------------------- /
/* ////////////////////////////////////////////////////////////////////////// */


/* --------------------------------------------------------------------------- /
/* --------------------------------------------------------------------------- /
/* #BASE STYLES: Opinionated defaults and base element styles ---------------- /
/* --------------------------------------------------------------------------- /
/* -------------------------------------------------------------------------- */


/*
 * 1. Set `box-sizing` to `inherit` while setting the inheritance root,
 *    which is the html element, to `box-sizing: border-box`. This is
 *    a much more intuitive default box-model than `content-box` as it
 *    will make `width` and `height` calculations include `padding` and
 *    `border` size.
 * 2. Setting `min-width: 0` here is a VERY opinionated decision. It can save
 *    you a lot of time trying to figure out a ton of odd and unintuitive
 *    behavior, especially with flexbox, but it can also cause unexpected
 *    issues if you aren't aware it is here. If an element is unexpectedly
 *    shrinking down to nothing, try setting an explicit `min-width` to
 *    overwrite this declaration.
 * 3. Ensure background images do not repeat by default..
 */

*,
::before,
::after {
  box-sizing: inherit; /* 1 */
  min-width: 0; /* 2 */
  background-repeat: no-repeat; /* 3 */
}

/* Improved default settings for the `::before` and `::after` pseudo-elements */

::before,
::after {
  vertical-align: inherit;
  text-decoration: inherit;
}

/*
 *  1. Prevent horizontal scrolling from being possible and set vertical
 *     scrolling. If you want a page with no scrollbar at all change
 *     to `overflow-y: hidden`. Setting it here combined with `overflow-x: clip`
 *     on the body will prevent the behavior from breaking when an element
 *     like a masthead / nav bar is set with `position: sticky`
 *  2. Set the root element box-sizing, the universal selector will inherit.
 *  3. Add backup font stack that works across all browsers and devices.
 *  4. Set the default font size in an accessible way (such that a user
 *     can change the default size with the browser settings).
 *  5. Normalize default `line-height` across browsers.
 *  6. Set a new default for `word-wrap` (alias for `overflow-wrap`) on the root
 *     element since it is an inherited property.
 *  7. Allow the browser to automatically break words at appropriate hyphenation
 *     points. Ensure you specificy a language using the `lang` HTML attribute.
 *     to guarantee the automatic hyphenation applied is language-specific.
 *  8. Use a more readable tab size.
 *  9. Resets the cursor to default across all browsers and for any property
 *     that does not explicitly define a different cursor.
 * 10. Tell the browser which color schemes the page can be rendered in.
 *     Change to just `light` or just `dark` if only doing a single scheme,
 *     but both are strongly recommended for accessibility purposes.
 * 11. This will reserve space for a scrollbar, preventing unwanted layout
 *     shifts as content grows or shrinks. If you are making a page that
 *     has no scrolling whatsoever, you can remove or overwrite this rule.
 * 12. Allows opening and closing punctuation like quotes at the start and end
 *     of a line of text to "hang" outside the line's content box, making the
 *     formatting look more aesthetically pleasing.
 * 13. Remove the blue tap box over buttons and links in some versions of
 *     iOS browsers for touch-enabled devices.
 * 14. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  overflow-x: hidden; /* 1 */
  overflow-y: scroll; /* 1 */
  -webkit-box-sizing: border-box; /* 2 */
  -moz-box-sizing: border-box; /* 2 */
  box-sizing: border-box; /* 2 */
  font-family:
    /* Modern pan-device default */
    system-ui,
    /* Safari for OS X and iOS (San Francisco) */
    -apple-system,
    /* Chrome < 56 for OS X (San Francisco) */
    BlinkMacSystemFont,
    /* Windows */
    'Segoe UI',
    /* Android */
    Roboto,
    /* Ubuntu */
    Ubuntu,
    /* GNOME 3+ */
    Cantarell,
    /* KDE Plasma 5+ */
    'Noto Sans',
    /* Basic web fallback */
    'Helvetica Neue',
    Helvetica,
    Arial,
    sans-serif,
    /* Emoji fonts - Apple, Windows, Linux */
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'; /* 3 */
  font-size: 1em; /* 4 */
  line-height: 1.15; /* 5 */
  word-wrap: break-word; /* 6 */
  -webkit-hyphens: auto; /* 7 */
  hyphens: auto; /* 7 */
  -moz-tab-size: 4; /* 8 */
  tab-size: 4; /* 8 */
  cursor: default; /* 9 */
  color-scheme: light dark; /* 10 */
  scrollbar-gutter: stable; /* 11 */
  hanging-punctuation: first last; /* 12 */
  -webkit-tap-highlight-color: transparent; /* 13 */
  -webkit-text-size-adjust: 100%; /* 14 */
  text-size-adjust: 100%; /* 14 */
}

/*
 * If user does not have prefers-reduced-motion on in their OS settings,
 * this will keep scrolling from looking jumpy when an anchor link or other
 * action automatically scrolls the page.
 */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /*
   * 1. TODO: May need to modify this value depending on height
   *    of any masthead/top nav bar or similar content.
   */
  :has(:target) {
    scroll-behavior: smooth;
    scroll-padding-top: 3rem; /* 1 */
  }
}

/*
 * Normalize the color of the background and text when it is highlighted by
 * selecting it with a mouse.
 *
 * TODO: Customize the selection background and color to match your design
 */

::-moz-selection {
  background: #345172;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: #345172;
  color: #fff;
  text-shadow: none;
}

/*
 * 1. Remove the possibility of a horizontal scrollbar. Combined with the
 *    `overflow: hidden scroll` on the html element, it prevents this behavior
 *    without causing issues when a top level element is set to
 *    `position: sticky`.
 * 2. Force the body to always take up the whole screen.
 * 3. Remove the body margin in all browsers.
 * 4. As a best practice, apply a default `background-color` and `color`.
 *    Also set a faint background gradient and apply an inverted scheme
 *    for `prefers-color-scheme: dark` To overwrite, use the `background`
 *    shorthand property.
 * 5. Set a normal font-size default.
 * 6. Set an opionated line-height for other elements to inherit.
 * 7. Set an explicit `text-align: left` so that we can later use
 *    the `inherit` value.
 * 8. On devices with small screens (likely phone or tablet), set text-rendering
 *    to improve speed. On devices with larger screens (likely laptops and PCs),
 *    set text-rendering to improve legibility.
 * 9. Ensure finer text rendering on Mac OS systems.
 */

body {
  overflow-x: clip; /* 1 */
  min-height: 100vh; /* 2 */
  min-height: 100dvh; /* 2 */
  margin: 0; /* 3 */
  background-color: #fff; /* 4 */
  background-image: linear-gradient(135deg, #fff, #e9ecef); /* 4 */
  color: #212529; /* 4 */
  font-size: 1rem; /* 5 */
  line-height: 1.5; /* 6 */
  text-align: left; /* 7 */
  text-align: start; /* 7 */
  text-rendering: optimizeSpeed; /* 8 */
  -moz-osx-font-smoothing: grayscale; /* 9 */
  -webkit-font-smoothing: antialiased; /* 9 */
}

@media screen and (max-width: 27.25em),
       screen and (max-height: 41.25em) {
  body {
    line-height: 1.4; /* 6 */
  }
}

@media screen and (min-width: 80em) {
  body {
    text-rendering: optimizeLegibility; /* 8 */
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212; /* 4 */
    background-image: linear-gradient(135deg, #121212, #0c080c); /* 4 */
    color: #fff; /* 4 */
  }
}

/* Ensure HTML5 structual elements and media elements display correctly. */

canvas,
details,
dialog,
legend,
main,
summary,
img,
svg,
video {
  display: block;
}

/*
 * Better balance blocks of text in headings, blockqutoes, and figure captions.
 * See: https://developer.chrome.com/docs/css-ui/css-text-wrap-balance
 */

h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
figcaption {
  text-wrap: balance;
}

/*
 * 1. Remove the top margin for easier control as it avoids margin collapse.
 * 2. Overwrite margin-bottom with margin-block-end for browsers that support it.
 * 3. Correct the font size `<h1>` elements within `<section>` and
 *    <article> contexts in Chrome, Firefox, and Safari.
 */

h1 {
  margin: 0 0 0.67em; /* 1 */
  margin-block: 0 0.67em; /* 2 */
  margin-inline: 0; /* 2 */
  font-size: 2em; /* 3 */
}

/* Remove the top margin for easier control as it avoids margin collapse. */

h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-block-start: 0;
}

/*
 * 1. Limit the inline size of paragraphs to 92 characters.
 * 3. Set text-wrap to pretty if possible.
 */

p {
  max-inline-size: 92ch; /* 1 */
  text-wrap: pretty; /* 2 */
}

/*
 * Remove the top margin for easier control as it avoids margin collapse.
 * Reset the side margins and change the bottom margin from `1em` to `1rem`.
 * Overwrite bottom margin with margin-block-end for browesers that support it.
 */

p,
dl,
ol,
ul,
blockquote,
figure {
  margin: 0 0 1rem;
  margin-block: 0 1rem;
  margin-inline: 0;
}

/* Normalize bold and strong across browsers. */

b,
strong {
  font-weight: bolder;
  line-height: inherit;
}

/* Normalize small across browsers across browsers. */

small {
  font-size: 80%;
  line-height: inherit;
}

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

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

sub {
  bottom: -0.25em;
  inset-block: auto -0.25em;
  inset-inline: auto;
}

sup {
  top: -0.5em;
  inset-block: -0.5em auto;
  inset-inline: auto;
}

/*
 * Correct the odd font inheritance and size scaling issues seen
 * in some browsers when using `code`, `kbd`, `pre`, and `samp`.
 */

code,
kbd,
pre,
samp {
  font-family:
    /* Modern pan-device default */
    ui-monospace,
    /* macOS 10.10+ */
    Menlo,
    /* macOS fallback */
    Monaco,
    /* Windows 6+ */
    Consolas,
    /* Android 4+ */
    'Roboto Mono',
    /* Ubuntu 10.10+ */
    'Ubuntu Monospace',
    /* KDE Plasma 5+ */
    'Noto Mono',
    /* KDE Plasma 4+ */
    'Oxygen Mono',
    /* Linux/OpenOffice fallback */
    'Liberation Mono',
    /* Default fallback */
    monospace,
    /* Emoji fonts - Apple, Windows, Linux */
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji';
  font-size: 1em;
}

code,
kbd {
  font-size: 0.875em;
}

code {
  border-radius: 3px;
  background-color: #eee;
  word-break: break-word;
}

/*
 * Opinionated styling for <kbd> elements
 * to make them look like keyboard buttons
 */

kbd {
  position: relative;
  top: -0.125rem;
  inset-block: -0.125rem auto;
  inset-inline: auto;
  display: inline-block;
  padding: 0.25rem 0.5rem;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  border: 1px solid #b4b4b4;
  border-radius: 3px;
  background-color: #eee;
  color: #333;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  font-size: 0.875em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/*
 * 1. Dont't allow content to break outside.
 * 2. Remove top margin to avoid vertical margin collapse.
 * 3. Overwrite physical margin properties with logical margin properties for
 *    browsers that support it to improve internationalization.
 */

pre {
  overflow: auto; /* 1 */
  margin: 0 0 1rem; /* 2 */
  margin-block: 0 1rem; /* 3 */
  margin-inline: 0; /* 3 */
}

:where(pre:has(code)) {
  max-width: 110ch;
  max-inline-size: 110ch;
  max-height: 21.25rem;
  max-block-size: 21.25rem;
  padding-block: 0.25rem;
  padding-inline: 0.5rem;
  background-color: #eee;
}

:where(pre) code {
  border-radius: 0;
  background-color: inherit;
  word-break: inherit;
}

output {
  display: inline-block;
}

address {
  margin-bottom: 1rem;
  margin-block: 0 1rem;
  margin-inline: 0;
  font-style: normal;
  line-height: inherit;
}

/*
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 * 3. Add explicit cursor to indicate changed behavior.
 */

dfn[title],
abbr[title],
acronym[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
  cursor: help; /* 3 */
}

/* Render tables with collapsed borders and other improved defaults */

table {
  vertical-align: middle;
  border-spacing: 0;
  border-collapse: collapse;
  border-color: currentColor;
  text-indent: 0;
  font-variant-numeric: tabular-nums;
}

/*
 * Child-combinator `tr` for tables without table section elements,
 * which can happen with XHTML or dynamically created tables.
 */

table,
table > tr {
  vertical-align: middle;
}

/*
 * Matches default `<td>` alignment by inheriting from the `<body>`, or the
 * closest parent with a set `text-align`.
 */

th {
  text-align: inherit;
}

caption {
  padding: 0.75rem 0;
  padding-block: 0.75rem;
  padding-inline: 0;
  color: #6c757d;
  caption-side: bottom;
  text-align: inherit;
}

/*
 * A better looking horizontal rule that looks the same in all browsers
 * and inherits the color of the parent element's text so that it looks good
 * by default on all background colors.
 */

hr {
  display: block;
  overflow: hidden;
  box-sizing: content-box;
  height: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid currentColor;
  margin: 1rem 0;
  margin-block: 1rem;
  margin-inline: 0;
  color: inherit;
  opacity: 0.6;
}

/*
 * If you do not like the look of the modified <hr> above, and you want a more
 * basic horizontal rule without having to overwrite styling yourself, use the
 * `hr-light` class.
 */

.hr-light {
  border-top-color: #ccc;
  opacity: 1;
}

/* Add the correct font style in Android 4.3- and Safari 5.1- */

dfn {
  font-style: italic;
}

/* Undo browser default inline start margin */

dd {
  margin: 0 0 0.5rem;
  margin-block: 0 0.5rem;
  margin-inline: 0;
}

/* Reset all list styles for <ol> and <ul> elements used in <nav> elements */

menu,
nav ol,
nav ul,
footer ol,
footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

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

menu dl,
ol dl,
ul dl,
dl dl,
dl ol,
dl ul,
dl menu {
  margin: 0;
}

/* Prevent VoiceOver from ignoring list semantics in Safari */

nav li:before {
  content: '\200B';
  float: left;
}

/* Ensure dialog elements always displayed correctly */

dialog {
  position: absolute;
  right: 0;
  left: 0;
  width: -webkit-intrinsic;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-intrinsic;
  height: -moz-fit-content;
  height: fit-content;
  padding: 1em;
  border: 2px solid currentColor;
  margin: auto;
  background-color: #fff;
  color: #111;
}

/*
 * Ensures dialog elements without the 'open' attribute are not displayed and
 * adds the correct display value for template elements in legacy Edge and IE.
 */

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


/* --------------------------------------------------------------------------- /
/* --------------------------------------------------------------------------- /
/* #FORMS -------------------------------------------------------------------- /
/* --------------------------------------------------------------------------- /
/* -------------------------------------------------------------------------- */


/*
 * 1. Remove the margins in Firefox and Safari.
 * 2. Change the font styles for  correctly across browsers
 */

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

/* Fix the inconsistent default appearance across browsers */

button,
input,
select,
textarea {
  padding: 0.25em 0.375em;
  padding-block: 0.25em;
  padding-inline: 0.375em;
  background-color: transparent;
  color: inherit;
  letter-spacing: inherit;
}

/* Ensure the correct touch action for these elements across browsers */

a,
area,
button,
[role='button'],
input:not([type='range']),
label,
select,
summary,
textarea,
[tabindex='0'] {
  touch-action: manipulation;
}

/*
 * 1. Remove underline from links and add them back as a hover/focus effect.
 * 2. Ensure default cursor behavior on links.
 * 3. Remove gaps in link underlines in iOS8+ and Safari 8+ (opinionated).
 * 4. Add a fake color to `:link` and `:visited` which will cause those
 *    link states to fall back to the color set on the `<a>` itself.
 */

a {
  text-decoration: none; /* 1 */
  cursor: pointer; /* 2 */
  -webkit-text-decoration-skip: objects; /* 3 */
}

a:link,
a:visited {
  color: _; /* 4 */
}

a:focus,
a:hover,
a:active {
  text-decoration: underline; /* 1 */
}

/*
 * And undo these styles for placeholder links/named anchors (without href)
 * which have not been made explicitly keyboard-focusable (without tabindex).
 */

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

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

button,
select {
  text-transform: none;
}

/* Fix the inconsistent appearance across browsers */

select {
  padding: 0.125em 1em 0.125em 0.25em;
  padding-block: 0.125em;
  padding-inline: 1em 0.25em;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em;
}

/* Don't show the arrow for multiple choice selects */

select[multiple] {
  background-image: none;
}

/*
 * Ensure the same default "down arrow" to indicate
 * available options in a select box.
 */

select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
}

/*
 * 1. Remove the default `border-radius` that macOS Chrome adds.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 * 3. Changes the default cursor on all buttons to the pointer.
 */

button,
[type='button'],
[type='reset'],
[type='submit'] {
  border-radius: 0; /* 1 */
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/* Remove the inner border and padding on focused buttons in Firefox */

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

/* Remove the border and padding in all browsers (opinionated) */

[type='color'],
[type='range'] {
  padding: 0;
  border-width: 0;
}

/* Remove the default appearance of temporal inputs to avoid a Mobile Safari
 * bug where setting a custom line-height prevents text from being vertically
 * centered within the input.
 * See https://bugs.webkit.org/show_bug.cgi?id=139848
 * and https://github.com/twbs/bootstrap/issues/11266
 */

input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'] {
  -webkit-appearance: listbox;
}

/* Remove the default vertical scrollbar and restric horizontal resizing. */

textarea {
  overflow: auto;
  resize: vertical;
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: #e6e6e6;
  cursor: not-allowed;
}

/*
 * Reset fieldsets to make them behave more like a standard block element and
 * not negatively affect page layout.
 * See https://github.com/twbs/bootstrap/issues/12359
 * and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
 */

fieldset {
  min-width: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

/*
 * Correct the text wrapping in Edge and IE and the color inheritance from
 * <fieldset> elements in IE. Remove the padding so developers are not caught
 * out when they zero out <fieldset> elements.
 */

legend {
  width: 100%;
  max-width: 100%;
  padding: 0;
  border: 0;
  margin-bottom: 0.5rem;
  margin-block: 0 0.5rem;
  margin-inline: 0;
  color: inherit;
  font-size: 1.375rem;
  line-height: inherit;
  white-space: normal;
}

/*
 * Add the correct display in Legacy Edge and IE, and correct the vertical
 * alignment in Chrome, Firefox, and Opera.
 */

progress {
  display: inline-block;
  vertical-align: baseline;
}

/*
 * Suppress the focus outline on elements that cannot be accessed via keyboard.
 * This prevents an unwanted focus outline from appearing around elements that
 * might still respond to pointer events.
 */

[tabindex='-1']:focus {
  outline: 0 !important;
}

/* Correct the text style of placeholders. */

::placeholder {
  color: inherit;
  opacity: 0.54;
}

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

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

:invalid {
  box-shadow: 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 {
  font: inherit;
  -webkit-appearance: button;
}

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

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

/* Correct appearance in Chrome and Safari and outline style in Safari. */

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

/*
 * Remove the inner padding on search cancel buttons and search decorations in
 * Chrome and Safari on macOS.
 */

::-webkit-search-decoration,
::-webkit-search-cancel-button {
  -webkit-appearance: none;
}


/* --------------------------------------------------------------------------- /
/* --------------------------------------------------------------------------- /
/* #EMBEDDED MEDIA AND OTHER CONTENT ----------------------------------------- /
/* --------------------------------------------------------------------------- /
/* -------------------------------------------------------------------------- */


/* Make maintaining media aspect-ratios simple. */

audio,
canvas,
embed,
iframe,
img,
input,
object,
select,
textarea,
video {
  max-width: 100%;
  height: auto;
}

/* Change the alignment on media elements in all browsers. */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * The styles necessary for the most optimized <img> defaults.
 * The other styles associated with img are grouped with other selectors.
 */

img {
  border-style: none;
  background-size: cover;
  background-repeat: no-repeat;
  font-style: italic;
  shape-margin: 1rem;
}

/*
 * Render .svg, .bmp, .png, and .svg <img> elements
 * optimizing for quality over speed.
 */

img[src$='.bmp'],
img[src$='.gif'],
img[src$='.png'],
img[src$='.svg'] {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimizeQuality;
  image-rendering: crisp-edges;
}

/* If supported, apply smooth rendering to images likely to be photos. */

img[src$='.avif'],
img[src$='.jp2'],
img[src$='.jpeg'],
img[src$='.jpg'],
img[src$='.jxr'],
img[src$='.webp'] {
  image-rendering: smooth;
}

iframe {
  border: 0;
}

summary {
  cursor: pointer;
}

/*
 * https://html.spec.whatwg.org/C/#the-details-and-summary-elements
 * The specification doesn't have details > summary:first-of-type but
 * it is added because modern Chrome, Safari, and Firefox use
 * `summary { display: block }` as there are sites using `<summary>`
 * without `<details>`, and they expect that `<summary>` will not display
 * as a list-item when doing so. This will add the correct display back
 * for those browsers when `<summary>` is used with `<details>`.
 */

details > summary:first-of-type {
  display: list-item;
  list-style: disclosure-closed inside;
  counter-increment: list-item 0;
}

details[open] > summary:first-of-type {
  list-style: disclosure-open inside;
}

svg:not([fill]) {
  fill: currentColor;
}


/* --------------------------------------------------------------------------- /
/* --------------------------------------------------------------------------- /
/* #ACCESSIBILITY ------------------------------------------------------------ /
/* --------------------------------------------------------------------------- /
/* -------------------------------------------------------------------------- */


/*
 * Change the cursor on busy elements in all browsers.
 * The `i` makes the selector case-insensitive.
 */

[aria-busy='true'] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers.
 */

[aria-disabled='true'],
[disabled] {
  cursor: not-allowed;
}

/* Change the display on visually hidden accessible elements. */

[aria-hidden='false'][hidden] {
  display: initial;
}

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

/*
 * Respect prefers-reduced-motion being set by the user in their OS or browser.
 * 1. Remove fixed background attachments when prefers-reduced-motion is on.
 * 2. Remove transitions when prefers-reduced-motion is on.
 * 3. Remove animations when prefers-reduced-motion is on.
 * 4. Remove timed scrolling behaviors when prefers-reduced-motion is on.
 */

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    background-attachment: initial !important; /* 1 */
    transition-duration: 0s !important; /* 2 */
    transition-delay: 0s !important; /* 2 */
    animation-duration: 1ms !important; /* 3 */
    animation-delay: -1ms !important; /* 3 */
    animation-iteration-count: 1 !important; /* 3 */
    scroll-behavior: auto !important; /* 4 */
  }
}


/* --------------------------------------------------------------------------- /
/* --------------------------------------------------------------------------- /
/* #UTILITIES ---------------------------------------------------------------- /
/* --------------------------------------------------------------------------- /
/* -------------------------------------------------------------------------- */


/*
 * Hide visually and from screen readers. It is recommended that you use the
 * HTML attribute [hidden] rather than a .hidden class for accessibility.
 */

[hidden] {
  display: none !important;
}

/*
 * For Screen Readers Only - Hide visually but not from screen readers.
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.sr-only,
.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  white-space: nowrap;
}

/*
 * Extends the `.visually-hidden` and `.sr-only` classes to allow
 * the element to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.sr-only.focusable:active,
.sr-only.focusable:focus,
.sr-only--focusable:active,
.sr-only--focusable:focus,
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus,
.visually-hidden--focusable:active,
.visually-hidden--focusable:focus {
  position: static;
  overflow: visible;
  clip: auto;
  clip-path: none;
  width: auto;
  height: auto;
  margin: 0;
  white-space: inherit;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/* Contain floats with classic clearfix. */

.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}

.clearfix::after {
  clear: both;
}

/*
 * Modern float clearing without clearfix hack.
 * Chrome 58+, Safari 13+, Firefox 53+
 */

.group {
  display: flow-root;
  overflow: clip;
}

/* Apply flex-based centering to an element directly from markup. */

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Toggle off an active animation by applying this class with JavaScript */

.anim-off {
  animation: none !important;
}

/*
 * The last rule is only needed if your project uses a JS framework or library
 * like React. You want the selector of this rule to select the top level
 * element that your application is rendered within. It ensures that
 * high-priority elements will show up above all others and prevents stacking
 * context bugs and common z-index issues.
 *
 * TODO: If not using React or something similar, delete this rule and comment.
 * If you are going to use the rule, just delete this comment.
 */

#root,
#__next {
  isolation: isolate;
}