@charset "UTF-8";

/**
 * @preserve NOTICE
 * ------------------------------------------
 * Copyright © Zoshe 2024-present. All Rights Reserved.
 * More info at: https://zoshe.com
 *
 * WARNING: This is all experimental. Expect many breaking changes,
 * things not working, and sketchy performance.
 *
 * PLEASE NOTE: I'll be making tools available soon with better resources.
 * In the meantime, contact me at Zoshe.com and request to be
 * added to Zoshe's mailing list for updates when they are available,
 * or to volunteer to help.
 *
 * Things to do here until the development site is ready for production:
 * 1. Polyfills still needs to be added. Open Anchor polyfills are problematic;
 * I'll try to create something better.
 * 2. Basic animation effects are needed. Adding values to CSS variables
 * for classes should help.
 * 3. Optimization needs to be done, but should be done last.
 * 4. Start improving tooling for auditory, cognitive, low-bandwidth,
 * neurological, physical, speech, and visual accessibility.
 * 5. Implement `inert` attribute management to improve accessibility.
 * 6. Implement skip links/skip sections to improve accessibility.
 * 7. A color scheme is needed for the tooling.
 * 8. Finish the CSS for all HTML elements so they can be themed.
 * 9. Reading Order
 * 10. `svw` needs to be changed to use the smallest viewport dimension (svmin).
 * - `svmin`: Unit `svmin` picks the smallest value between units `svh` and `svw`.
 * - `lvmin`: Unit `lvmin` picks the smallest value between units `lvh` and `lvw`.
 * - `dvmin`: Unit `dvmin` picks the smallest value between units `dvh` and `dvw`.
 * - `svmax`: Unit `svmax` picks the largest value between units `svh` and `svw`.
 * 11. More use of `place-items: center;`, `place-content: center;`, and various
 * other alignment properties. Also, `aspect-ratio: 1;` for common elements.
 * I've already built tools that do this, but I will temporarily implement
 * some use of it here until the main development server is ready for production.
 * 12. (done) A screen background color is needed.
 * 13. Styling SVG in img containers is still a mess. Inlining is still the only
 * svg icon solution. For our site, a custom font set can be created, but for tooling
 * a CSS standard needs to be created and based lined into browsers.   
 * 14. border for body needs to be added and work with full width. Default will 
 * be to remove the body border where sections are set to a full width setting, as
 * that will be the overwhelming uses. In rare cases where it's need, designers
 * designers and developers can easily override it. Also does using negative
 * margins to achieve full-width have drawbacks. Maybe, experiment using more 
 :has and if to solve it would be better. Using spacers, could be a solution too.
 * 15. dvh needs to replace some of the 100% and vh stuff. Particularly when I get
 * to block slides.
 * 16. consider changing clickable area on some tiles to .card {
  position: relative;
}
​ .card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

 * ------------------------------------------------------------
 */


/* === PRINT === */
@media print {
  :where(body) {
    font-size: 14pt;
  }
}

/* === COLOR CHOICES === */
/* mix-ins still need to be done 
--color-gum: hsl(329, 70%, 69%);
  --color-lavender: hsl(278, 54%, 65%);
  --color-RebeccaPurple: hsl(270, 50%, 40%);
*/

:root {
  --bg: black;
  --primary-dark-bgColor: black;
  --primary-dark-color: #f0f0f0;
  --primary-light-bgColor: black;
  --primary-light-color: #f0f0f0;


  /* decrease brightness to improve text contrast on background images tooling needed for element level */

  --background-img-brightness: 0.45;
  --background-img-saturate: 1.25;
  /* for Example
  img{
   filter: 
    brightness(var(--background-img-brightness)) 
    saturate(var(--background-img-saturate));
} 
    */

/* === FONT default CHOICES === */
  --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* --monospace-fonts: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace; */
}


/* ==== FONTS ==== */
/* Note: font-face seem to not work when put in a layer, Why? 
seems foolish, need to test if they can be imported into a layer*/
@font-face {
  font-family: "zoMon";
  src:
    url("/fonts/zomon.woff2") format("woff2 supports variations"),
    url("/fonts/zomon.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

@font-face {
  font-family: "zoHub";
  src:
    url("/fonts/zohub.woff2") format("woff2 supports variations"),
    url("/fonts/zohub.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}

/* === LAYER ORDER === */
@layer zoshe.settings, zoshe.properties, zoshe.elements, zoshe.sections, zoshe.blocks, zoshe.classes, zoshe.pseudos, zoshe.animation, zoshe.accessibility;


/* ==== SETTINGS LAYER ==== */
@layer zoshe.settings {

  /* note:
  1. maybe add menu settings */

  /* --- root settings --- */

  :where(:root) {
    /* auto is only temporary, will be using newer baseline stuff, with auto as a fallback */
    --align-hort-left: 0px auto;
    --align-hort-center: auto auto;
    --align-hort-right: auto 0px;
    --align-vert-top: 0px auto;
    --align-vert-center: auto auto;
    --align-vert-bottom: auto 0px;

    --body-flex-direction: column;
    --body-font-family: zoMon, var(--font-sans), sans-serif;
    --body-font-size: 1rem;
    --body-font-stretch: 95;
    --body-font-style: normal;
    --body-font-weight: 350;
    --body-gap-size: 5px;


    --body-letter-spacing: auto;
    --body-line-height: 1.5;

    /* 0= no, -1=yes */
    /* --body-fullWidth-header: 0;
    --body-fullWidth-main: 0;
    --body-fullWidth-footer: 0; */

    --body-margin-size-left: 8;
    --body-margin-size-right: 8;
    --body-margin-size-top: 0;
    --body-margin-size-bottom: 0;

    --body-padding-size-left: 8;
    --body-padding-size-right: 8;
    --body-padding-size-top: 0;
    --body-padding-size-bottom: 0;

    --body-padding-left: min(calc(1svw * var(--body-padding-size-left)), calc(1px * var(--body-padding-size-left)));
    --body-padding-right: min(calc(1svw * var(--body-padding-size-right)), calc(1px * var(--body-padding-size-right)));
    --body-padding-top: min(calc(1svw * var(--body-padding-size-top)), calc(1px * var(--body-padding-size-top)));
    --body-padding-bottom: min(calc(1svw * var(--body-padding-size-bottom)), calc(1px * var(--body-padding-size-bottom)));

    /* --body-fullHeight-top: calc(var(--body-padding-top) * -1);
    --body-fullHeight-bottom: calc(var(--body-padding-bottom) * -1);
    --body-fullWidth-left: calc(var(--body-padding-left) * -1);
    --body-fullWidth-right: calc(var(--body-padding-right) * -1); 
    */



    --body-word-spacing: .03em;
    --body-writing-mode: lr;

    --button-border-radius: .1rem;
    --button-border-style: solid;
    --button-border-width: default;
    --button-line-height: 1.3;
    /* --button-margin-size: 10px; */
    --button-padding-size: min(4vw, 5px);
    /* --button-padding-size: min(3lvw, 3px); */

    --inputElm-border-radius: .1rem;
    --inputElm-border-style: solid;
    --inputElm-border-width: 1px;
    --inputElm-line-height: 1.3;
    /* --inputElm-margin-size: 10px; */
    --inputElm-padding-size: min(4vw, 5px);
    /* --inputElm-padding-size: min(3lvw, 3px); */

    --header-font-family: zoHub, var(--font-sans), sans-serif;
    --header-font-stretch: 100;
    --header-font-style: normal;
    --header-font-weight: 550;
    --header-font-size-scale: .75;
    --header-font-size-diff: .03;
    --header-letter-spacing: auto;
    --header-line-height: 1.3;
    --header-margin-block: .25em;
    --header-word-spacing: .02em;
    /* this should be --readable-max-width: */
    --max-readable-width: 80ch;

    --popover-border-radius: 3px;
    --popover-border-size: Default;
    --popover-border-style: solid;
    --popover-padding-size: 5px 2px 2px 2px;

    --section-max-width: 1200px;

    /* --screen-max-height: 100dvw; */
    --screen-max-width: 100dvw;

  }

  /* --- root settings end --- */

  /* --- dark mode settings (default) --- */
  html[modeVal=dark] {
    --backdrop-background-color: hsl(0, 0%, 0%, 50%);
    --background-neutral-color: hsl(0, 0%, 10%);

    --body-background-color: hsl(0, 0%, 9%, 100%);
    --body-font-color: white;

    --button-background-color: hsl(0, 0%, 9%, 100%);
    --button-border-color: hsla(0, 0%, 50%, 1);
    --button-font-color: hsl(0, 0%, 100%, 100%);

    --filter-emojis: invert(110%) sepia(100%) saturate(3576%) hue-rotate(-21deg) brightness(137%) contrast(100%);
    --filter-svg-character: brightness(100%);
    --filter-svg-tx-logo: brightness(300%);

    --focus-border-color: auto;
    --focus-border-width: 1px;
    --focus-border-style: solid;

    --footer-background-color: black;
    --footer-font-color: white;

    --formElm-accent-color: white;
    --formElm-background-color: white;
    --formElm-font-color: black;

    --header-background-color: none;
    --header-font-color: white;

    --hero-background-color: rgba(39, 40, 40, 1);
    --hero-font-color: rgba(213, 218, 222, 1);

    --hyperLink-active-color: red;
    --hyperLink-hover-color: red;
    --hyperLink-decoration: underline;
    --hyperLink-decoration-hover: underline;

    --inputElm-background-color: white;
    --inputElm-border-color: hsla(0, 0%, 50%, 1);
    --inputElm-font-color: black;
/* Does the browser select a better color */
    /* --inputElm-placeHolder-color: 
    --inputElm-placeHolder-background-color:   */


    --media-color-scheme: light;

    --navbar-background-color: white;
    --navbar-font-color: black;

    --popover-background-color: hsl(0, 0%, 0%, 100%);
    --popover-border-color: hsl(0, 0%, 50%, 100%);
    --popover-box-shadow: 0px 0px 10px hsl(0, 0%, 100%, 50%);
    --popover-font-color: hsl(0, 0%, 100%, 100%);

    --screen-background-color: hsl(0, 0%, 100%, 100%);


    --tile-background-color: black;
    --tile-font-color: white;

    --line-color: white;
  }

  /* --- dark mode settings (default) end --- */

  /* --- light mode settings --- */
  html[modeVal=light] {

    --backdrop-background-color: hsl(0, 0%, 1%, 50%);
    --background-neutral-color: hsl(0, 0%, 98%);

    --body-background-color: hsl(0, 0%, 100%, 100%);
    --body-font-color: black;

    --button-background-color: hsl(0, 0%, 100%, 100%);
    --button-border-color: hsla(0, 0%, 50%, 1);
    --button-font-color: hsl(0, 0%, 0%, 100%);

    --filter-emojis: invert(110%) sepia(100%) saturate(3576%) hue-rotate(-21deg) brightness(137%) contrast(100%);
    --filter-svg-character: brightness(100%);
    --filter-svg-tx-logo: brightness(70%);

    --footer-background-color: hsl(0, 0%, 100%, 98%);
    --footer-font-color: hsl(0, 0%, 1%, 100%);

    --focus-border-color: auto;
    --focus-border-width: 1px;
    --focus-border-style: solid;

    --formElm-accent-color: black;
    --formElm-background-color: black;
    --formElm-font-color: white;

    --header-background-color: none;
    --header-font-color: black;

    --hero-background-color: rgba(39, 40, 40, 1);
    --hero-font-color: rgba(213, 218, 222, 1);

    --hyperLink-active-color: red;
    --hyperLink-hover-color: red;
    --hyperLink-decoration: underline;

    --inputElm-background-color: hsl(0, 0%, 100%, 100%);
    --inputElm-border-color: hsla(0, 0%, 50%, 1);
    --inputElm-font-color: hsl(0, 0%, 0%, 100%);
    /* Does the browser select a better color */
    /* --inputElm-placeHolder-color: 
    --inputElm-placeHolder-background-color:   */


    --media-color-scheme: dark;

    --navbar-background-color: black;
    --navbar-font-color: white;

    --popover-background-color: hsl(0, 0%, 100%, 100%);
    --popover-border-color: hsl(0, 0%, 0%, 100%);
    --popover-box-shadow: 0px 0px 10px hsl(0, 0%, 0%, 50%);
    --popover-font-color: hsl(0, 0%, 0%, 100%);

    --screen-background-color: hsl(0, 0%, 0%, 100%);

    --tile-background-color: rgba(0, 0, 0, .1);
    --tile-font-color: white;

    --line-color: #000;

  }

  /* --- light mode settings end --- */

}

/* ==== SETTINGS LAYER ENDS ==== */

/* === PROPERTIES LAYER === */

@layer zoshe.properties {

  /* Crucial for Safari to remove its default styling on some elements */
  :where(input:is([type="search"])) {
    -webkit-appearance: none;
    appearance: none;
  }

  /* --- safari and firefox */
  :where(table) {
    border-color: currentcolor;
  }

  :where(*, *::after, *::before) {
    box-sizing: border-box;
  }

  :where(a, button) {
    color: currentColor;
  }

  :where(body) {
    container-type: inline-size;
    /* overflow-x: clip; */
  }


  /* invokes a cursor pointer */
  :where(.btn, button, input:is([type="button"], [type="reset"], [type="submit"]), [invoketarget], [popovertarget], summary),
  :where(input[type="file"])::file-selector-button,
  :where(input[type="file"])::-webkit-file-upload-button {
    cursor: pointer;
  }

  :where([disabled]) {
    cursor: default;
  }

  :where(canvas, iframe, img, picture, svg, video) {
    display: block;
  }

  /* not needed yet
  :where(p:empty) {
  display: none;
}
*/
  :where(body) {
    display: flex;
  }

  :where(textarea) {
    field-sizing: content;
  }

  :where(svg) {
    fill: currentColor;
  }

  /* removes built-in typography styles */
  :where(button, input, select, textarea) {
    font: inherit;

  }
  /* Font Family defaults*/
:where(body) {
    font-family: var(--font-sans), sans-serif;
  }
    /* Font Family mono defaults*/
  :where(code, kbd, samp, var) {
    font-family: var(--font-mono), monospace;
  }

  /* always inheriting the user’s preferred font size */
  :where(html) {
    font-size: 100%;
  }

  :where(img, picture) {
    font-style: italic;
  }

  /* corrects the font weight in Edge and Safari */
  :where(b, dt, strong, th) {
    font-weight: bolder;
  }

  /* Spec, claims a 700 weight */
  :where(summary) {
    font-weight: bold;
  }

  /* font-smoothing */
  :where(body) {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
  }

  /* status: not baseline */
  /* supports: Safari  */
  :where(blockquote, p) {
    hanging-punctuation: first;
  }

  /* not sure if this should be set to vw, dvh, or keep at 100%
what's the benefits. Need to test */
  :where(html) {
    height: 100%;
  }

  :where(body) {
    height: dvh;
  }

  :where(img, video) {
    height: auto;
  }

 /*
 * Hyphens are not supported in all languages; I added `word-break` for unsupported ones.
 * Note: `word-break` may need additions to support different languages.
 *
 * `<h1>` to `<h6>` elements are inconsistent in Safari, so I decided not to include them.
 */
  :where(li, p, rich-text, text-) {
    word-break: break-word;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }

  @media (prefers-reduced-motion: no-preference) {
    :where(:root) {
      interpolate-size: allow-keywords;
    }
  }

  /* testing needed as I may need to add lang conditions, as it may effect other langs hyphens & word-breaks settings. */
  :where(h1, h2, h3, h4, h5, h6, li, p) {
    line-break: loose;
  }

  /* make sure Safari and others do not wipe out the correct accessible role. */
  /* :where(ul, ol)[role="list"] {
    list-style: none;
  } */

  

  /* Remove default margins on the following elements */
  :where(body, h1, h2, h3, h4, h5, h6) {
    margin: unset;
  }

  dd {
    margin-inline-start: min(3svw, 3px);
  }

  /* % do not work in min */
  :where(p) {
    margin-block-start: min(8svw, 8px);
    margin-block-end: min(8svw, 8px);
  }


  /* first ol an ul */
  :where(ol, ul) {
    margin-inline-start: min(8svw, 8px);
    margin-inline-end: min(8svw, 8px);
  }

  /* To many issues, Should be done on a block to block level, when needed
  @supports (margin-trim: block) {
    :where(content-, footer, div, grid-, grid-bx, h1, h2, h3, h4, h5, h6, main, li, media-, nav, ol, p, rich-text, section, text-, ul) {
      margin-trim: block;
    }
  } */

  /* Not to be able to exceed their container. */
  :where(img) {
    max-inline-size: 100%;
    max-block-size: 100%;
  }

  :where(canvas, img, picture, svg, video) {
    max-height: 100%;
  }

  /* to broad to work right now */
  /*
  :where(*:not(body)) {
    max-width: 100% !important;
  }
*/
  :where(audio, canvas, img, picture, [popover], svg, table, video) {
    max-width: 100%;
  }

  /* makes sure any textarea without a rows attribute are not tiny. */
  :where(textarea:not([rows])) {
    min-height: 8ch;
  }

  :where(body) {
    min-height: min(100vw, 100dvh);
  }
 
  /*  display scrollbar to stop page jumping */
  :where(html) {
    overflow-y: scroll;
  }

  /*  Reserves space for scrollbar to prevent content page jumping. */
:where(html) {
	scrollbar-gutter: stable;
}

  /* --- paddings --- */
  /* Note: % does not work in min :( */

  :where(.btn, button, input:is([type="button"], [type="reset"], [type="submit"])) {
    padding-inline: min(4svw, 4px);
    padding-block: min(4svw, 4px);
  }

  :where(h1, h2, h3, h4, h5, h6) {
    padding-inline: min(4svw, 4px);
  }

  :where(p) {
    padding-inline: min(4svw, 4px);
  }

  :where(summary) {
    padding-inline: min(8svw, 8px);
    padding-block: min(8svw, 8px);
  }

  /* first ol an ul */
  :where(ol, ul) {
    padding-inline-start: min(20px, 3ch);
  }

  :where(ol ul, ol ol, ul ul, ul ol) {
    /* Styling for nested lists */
    /* margin-block-start: 0; */
    /*  No extra vertical space between nested lists */
    /* margin-block-end: 0; */
    /* Further reduced indentation for nested lists */
    padding-inline-start: min(10px, 3ch);
  }

  :where(html) {
    scroll-behavior: smooth;
  }

  /* anything that has been anchored to should have extra scroll margin */
  :where(:target) {
    scroll-margin-block-start: 2rem;
  }

  /* give focused elements space below to ensure it's in view */
  :where(:focus) {
    scroll-margin-block-end: 8vh;
  }

  :where(html) {
    tab-size: 4;
  }

  /* buggy, and no need for my work  
  @supports (text-box-trim: both) {
    :where(.text-box-trim) {
      text-box: trim-both ex alphabetic;
    }
  }
  @supports not (text-box: both) {
    :where(.text-box-trim) {
      line-height: 1;
    }
  }
*/

  :where(a) {
    text-decoration-line: underline;
  }

  :where(a) {
    text-decoration-skip-ink: auto;
  }

  :where(table) {
    text-indent: 0;
  }


  /* default is auto, but I'm leaving it as an option to change.  */
  :where(h1, h2, h3, h4, h5, h6) {
    text-rendering: auto;
  }

  /* • prevents font size inflation, particularly when iphone|ipad| and possible other devices are rotated into landscape */
  :where(html) {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  /* helps even out words per line gets weird, so leaving it off for now
  :where(h1, h2, h3, h4, h5, h6) {
    text-wrap: balance;
  }
*/
  /* helps even out words */
  :where:not(h1, h2, h3, h4, h5, h6) {
    text-wrap: pretty;
  }

  /* Removes 300ms tap delay on clickable mobile form elements.*/
  :where(button, input, label, select, textarea) {
    touch-action: manipulation;
  }

  /* Prevents selection or highlighting of elms text and content. */
  :where(.btn, button, input:is([type="button"], [type="reset"], [type="submit"]), summary),
  :where(input[type="file"])::file-selector-button,
  :where(input[type="file"])::-webkit-file-upload-button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  /* maybe triggers this with a class added to the head with the tooling */
  :where(.btn, button, input:is([type="button"], [type="reset"], [type="submit"])) {
    transition: background-color 0.3s ease;
  }

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

}

/* === PROPERTIES LAYER END === */





/* 
=== ELEMENTS LAYER === 
*/

@layer zoshe.elements {

  /* --- a elms --- */

  /* :where(p a):not([class]):hover {
    color: var(--hyperLink-hover-color);
  } */

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

  /* --- audio elms --- */
  /*
 * fixes: improved style/accessibility for audio elements
 * fixes by: zoshe
 *
 * 1. Corrects Chrome's border-radius to match other browsers.
 * Chrome needs border-radius on controls-enclosure.
 * 2. Fixes Chrome's height to match other browsers.
 * 3. Safari lacks height support; others set to Safari's height.
 * 4. Color-scheme var(--media-color-scheme) only works in Chrome.
 * Safari/Firefox poorly support it.
 * 5. Audio default display is inline; it can exceed line-height.
 * Small margin fix added.
 * 6. Safari lacks border-radius; matched other browsers radius.
*/
/* ---possible fixes for temporal inputs -- */
/*
 * the following needs to be considered and incorporative down below
 * This is caused by safari and it's inconsistent sizes
 [type="date"] and [type="time"]

* Maybe give all input, textarea, and select a width of 100% for it's inconsistent width.
input:not(
	[type="date"],
	[type="time"],
	[type="datetime-local"],
	[type="month"],
	[type="week"]
),
textarea,
select {
	display: block;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-meridiem-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field  {
	padding: 0;
}

input::-webkit-inner-spin-button {
	height: auto;
}

*/

  :where(audio)::-webkit-media-controls-enclosure {
    border-radius: 5px;
  }

  :where(audio) {
    border-radius: 5px;
    color-scheme: var(--media-color-scheme);
    height: 34px;
    margin: 2.5px 0px;
  }

  /* --- body elms --- */
  :where(body) {
    background-color: var(--body-background-color);
    color: var(--body-font-color);
    flex-direction: var(--body-flex-direction);
    font-family: var(--body-font-family);
    font-size: var(--body-font-size);
    font-stretch: var(--body-font-stretch);
    font-style: var(--body-font-style);
    font-weight: var(--body-font-weight);
    gap: var(--body-gap-size);
    letter-spacing: var(--body-letter-spacing);
    line-height: var(--body-line-height);
    padding-left: var(--body-padding-left);
    padding-right: var(--body-padding-right);
    padding-top: var(--body-padding-top);
    padding-bottom: var(--body-padding-bottom);
    word-spacing: var(--body-word-spacing);
  }


  :where(details) {
    --margin-inline: min(5svw, 8px);
    border: 1px solid var(--line-color);
    border-radius: 4px;
    margin-bottom: min(8svw, 10px);
    margin-inline: var(--margin-inline);
    max-width: calc(100% - var(--margin-inline) * 2);
    overflow: hidden;
  }

  :where(summary) {
    background-color: var(--body-font-color);
    color: var(--body-background-color);
    /* Hide default arrow for most browsers */
    list-style: none;
    display: flex;
    gap: min(4px, 4svw);
    /* Pushes content and arrow apart */
    justify-content: space-between;
    align-items: center;
    /* Needed for absolute positioning of custom arrow */
    position: relative;
  }

  /* 1. Hide default arrow for Firefox
     2. ::marker is for standard-compliant browsers 
     3. I do not believe content: none is need it
     */
  :where(summary)::-webkit-details-marker,
  :where(summary)::marker {
    content: "";
    display: none;
  }

  /* Custom arrow styling */
  :where(summary)::after {
    /* Right-pointing triangle */
    content: '\25B6';
    font-size: 0.8em;
    transition: transform 0.2s;
    /* Space between text and arrow */
    margin-left: 10px;
  }

  /* Rotate when details is open */
  :where(details[open] summary)::after {
    transform: rotate(90deg);
  }

  /* create some basic needed open & close animation. */

  :where(details)::details-content {
    block-size: 0;
    content-visibility: hidden;
    opacity: 0;
    overflow: hidden;
    transition:
      block-size .5s,
      content-visibility .5s,
      opacity .5s;
    transition-behavior: allow-discrete;
  }

  :where(details[open])::details-content {
    block-size: auto;
    content-visibility: visible;
    opacity: 1;
  }


  /* --- hr elms --- */

  /* corrects the hr to match the var line color setting */
  :where(hr) {
    height: 2px;
    background-color: var(--line-color);
    border: none;
  }

  /* --- HTML Element Styles --- */
  /*
 * WHY overflow-y: Reduces flickering between pages and element animations, which
 * can trigger harmful health effects.
 *
 * Regarding spacing on the <html> element:
 * - Using margin-bottom on the <html> element is problematic and often fails to work in browsers.
 * - Padding on the <html> element works, but is its spec compliance and reliability questionable?
 * - What about a border on the <html> element?
 *
 * The primary benefit of using padding on <html> is that it achieves the same visual effect
 * as applying margin to the <body> element.
 * We are sticking with using margin on <body> over padding on <html> to make tooling
 * much easier for everyone.
 */

  :where(html) {
    background: var(--screen-background-color);
    overflow-y: scroll;
  }

  /* --- img elms --- */
  /* a progressive way to show the image as it waits to load the full image */
  :where(img) {
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 1rem;
  }

  /* --- button elms --- */
  :where(.btn, button, input:is([type="button"], [type="reset"], [type="submit"])) {
    background: var(--button-background-color);
    /* border: var(--button-border-color) var(--button-border-style) var(--button-border-width); */
    border-color: var(--button-border-color);
    border-style: var(--button-border-style);
    border-width: var(--button-border-width);
    border-radius: var(--button-border-radius);
    color: var(--button-font-color);
    line-height: var(--button-line-height);
    /* padding-block: var(--button-padding-size);
    padding-inline: var(--button-padding-size); */
  }

  /* --- input text based elms --- */
  /* <search></search> is now baseline info here:
  https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/search
  <search>
  <form action="/search" method="get">
    <label for="site-search">Search the site:</label>
    <input type="search" id="site-search" name="q" />
    <button type="submit">Search</button>
  </form>
</search>
  */

  :where(input:is([type="email"], [type="name"], [type="number"], [type="password"], [type="search"], [type="sec"], [type="tel"], [type="text"], [type="url"])) {
    color: var(--inputElm-font-color);
    background: var(--inputElm-background-color);
    border: var(--inputElm-border-color) var(--inputElm-border-style) var(--inputElm-border-width);
    border-radius: var(--inputElm-border-radius);
    line-height: var(--inputElm-line-height);
    /* margin-bottom: var(--button-padding-size); */
    /* padding-inline: var(--button-padding-size); */
  }

  /* --- input color elms --- */
  input[type="color"] {
    /* 1. Remove default browser styling */
    -webkit-appearance: none;
    /* For Chrome, Safari, Edge */
    -moz-appearance: none;
    /* For Firefox */
    appearance: none;
    /* Standard property */

    /* 2. Set basic dimensions and background */
    width: 50px;
    /* Or whatever width you need */
    height: 30px;
    /* Or whatever height you need */
    border: 1px solid #ccc;
    /* Add a border to define its clickable area */
    background-color: #fff;
    /* A white background for the swatch */
    padding: 0;
    /* Remove default padding */
  }

  /* Output Elements */
  :where(output) {
    color: var(--inputElm-font-color);
    background: var(--inputElm-background-color);
  }


  /* Range Input Elements */

  /* work only on checkbox, radio, and range inputs, and progress elements */
  /* Note older safari seems to not support range types yet */
  :where(input:is([type="checkbox"], [type="range"]), progress) {
    accent-color: var(--formElm-accent-color);
  }

  /* not really need it. but can revisit later
  :where(input:is([type="range"])) {
    margin: 0;
    padding-inline: min(4svw, 4px);
    padding-block: min(4svw, 4px);
  } */

  /* --- label elms --- */
  :where(label) {
    font-size: .9rem;
    /* text-transform: uppercase; */

  }

  :where(main) {
    padding-bottom: min(10lvw, 10px);
  }

  /* 
  Do not use, terribly buggy and horrible deprecated 
 meter::-webkit-meter-bar,meter::-moz-meter-bar{
    background-color: black;
  } 
    */

  /* --- select elms --- */
  :where(select) {
    border-radius: 0px;
    color: var(--formElm-font-color);
    background: var(--formElm-background-color);
  }

  /* --- textarea elms --- */

  :where(textarea) {
    color: var(--formElm-font-color);
    background: var(--formElm-background-color);
    color: var(--inputElm-font-color);
    background: var(--inputElm-background-color);
    border: var(--inputElm-border-color) var(--inputElm-border-style) var(--inputElm-border-width);
    border-radius: var(--inputElm-border-radius);
  }

  /* --- Heading elms --- */
  :where(h1, h2, h3, h4, h5, h6) {
    color: var(--header-font-color);
    font-family: var(--header-font-family);
    font-stretch: var(--header-font-stretch);
    font-style: var(--header-font-style);
    font-weight: var(--header-font-weight);
    letter-spacing: var(--header-letter-spacing);
    line-height: var(--header-line-height);
    margin-top: var(--header-margin-block);
    margin-bottom: calc(var(--header-margin-block) / 2);
    word-spacing: var(--header-word-spacing);
  }


  /* I created to ways to size header elms, both have pros and cons */

  /* first way */
  /* h1{
    font-size: clamp(1.8rem, calc(7vw + 1rem), 5em);
  } */

  /* start sizing the header element font size 
 Note: 1. maybe change the class name to say .h1-font-size or
 .fontSize-small and so on.
 
 */

  :root {

    /* clamp font size scaling thanks to Stephanie Eckles. */

    --font-size-diff: .75;

    /* Perfect Fourth */
    --type-ratio: 1.45;

    /*  Body font size  */
    --body-font-size: 1rem;

    /* Compounded headlines sizes */
    --font-size-4: calc(var(--body-font-size) * var(--type-ratio));
    --font-size-3: calc(var(--font-size-4) * var(--type-ratio));
    --font-size-2: calc(var(--font-size-3) * var(--type-ratio));
    --font-size-1: calc(var(--font-size-2) * var(--type-ratio));
  }

  :where(h1, .h1) {
    --font-size: var(--font-size-1);
    font-size: var(--font-size);
  }

  :where(h2, .h2) {
    --font-size: var(--font-size-2);
    font-size: var(--font-size);
  }

  :where(h3, .h3) {
    --font-size: var(--font-size-3);
    font-size: var(--font-size);
  }

  :where(h4, .h4) {
    --font-size: var(--font-size-4);
    font-size: var(--font-size);
  }

  @supports (font-size: 1cqi) {
    :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4) {
      --_font-min: var(--font-size) - var(--font-size) * var(--font-size-diff, 0.3);

      font-size: clamp(max(var(--body-font-size), var(--_font-min)),
          var(--_font-min) + 1cqi,
          var(--font-size));
    }
  }

  /* heading classes font weight */
  :where(.h1, .h2, .h3, .h4, .h5, .h6) {
    font-weight: calc(var(--body-font-weight) * 1.25);
  }


  /* The over use of OL and UL element has led to some wild
  Accessibility issues. For example apple for one removes the role="list" with
  removing markers and placed in a nav element. */

  /* --- list(ol,ul and li) elms --- */
  /* :where(ol,ul) {
    padding-inline: 2.5ch;
    margin-left: 9px;
  } */

  /* Basic styling for all lists on small screens (mobile first approach) 
  should be for them all as most defaults R way to large for most needs */
  /* @media (max-width: 767px) { */

  /* ul,
  ol {
    margin-block-start: 1em; */
  /* Default browser spacing for top/bottom */
  /* margin-block-end: 1em;
    padding-inline-start: 20px; */
  /* Reduced indentation for mobile */
  /* padding-inline-end: 15px; */
  /* Reduced end indentation for mobile */
  /* } */

  /* Styling for first lists */
  /* * > ol,
    * > ul {
      padding-inline-start: 15px;
    } */

  /* Styling for nested lists */
  /* ul ul,
    ul ol,
    ol ul,
    ol ol {
      margin-block-start: 0; */
  /*  No extra vertical space between nested lists */
  /* margin-block-end: 0; */
  /* Further reduced indentation for nested lists */
  /* padding-inline-start: 15px;
    } */

  /* Style for list items within nested lists */
  /* Change bullet type for visual distinction */
  /* ul li li {
        list-style-type: square;
    } */
  /* Change numbering for nested ordered lists */

  ol li ol li {
    list-style-type: lower-alpha;
  }

  /* } */

  /* --- p elms --- */
  :where(p) {
    margin-block: 7.5px;
    /* padding-inline: 6px; */
    /* padding-inline: clamp(3px, 2vw, 6px); */
  }


  /* --- table elms --- */

  table {
    --margin-inline: min(5svw, 8px);
    border: 1px solid var(--body-font-color);
    border-collapse: collapse;
    border-radius: 3px;
    margin-block-end: min(5svw, 5px);
    margin-inline: var(--margin-inline);
    max-width: calc(100% - var(--margin-inline) * 2);
  }

  caption {
    text-align: left;
    font-style: italic;
    padding: 0.25em 0.5em 0.5em 0.5em;
  }

  th,
  td {
    padding: 0.25em 0.5em 0.25em 1em;
    vertical-align: text-top;
    text-align: left;
    text-indent: -0.5em;
  }

  th {
    vertical-align: bottom;
    background-color: var(--body-font-color);
    color: var(--body-background-color);
  }

  tr:nth-child(even) th[scope="row"] {
    background-color: #f2f2f2;
  }

  tr:nth-child(odd) th[scope="row"] {
    background-color: #fff;
  }

  tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.05);
  }

  tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.05);
  }

  tr td:nth-child(1) {
    min-width: 50%;
    max-width: 50%;
  }

  tr td:nth-child(2) {
    font-style: italic;
    min-width: 50%;
    max-width: 50%;
  }

  tr *:nth-child(3) {
    text-align: right;
  }

}

/* === ELEMENTS LAYER END === */


/* === SECTION LAYERS === */

@layer zoshe.sections {

  /*===== TOP SECTION=====*/
  /* #header-section name should be change to #header-section or body-header-section */
  #header-section {
    --fullWidth: -1;
    height: auto;
    margin-left: calc(var(--body-padding-left) * var(--fullWidth));
    margin-right: calc(var(--body-padding-right) * var(--fullWidth));
    min-height: 1rem;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
  }


  /* --- top navbar --- */

  .topnav-wrapper {
    background-color: var(--navbar-background-color);
    color: var(--navbar-font-color);
    display: flex;
    justify-content: center;
    max-width: 100%;
  }

  .topnav {
    align-content: center;
    align-items: stretch;
    background: inherit;
    border-radius: 5px;
    color: inherit;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 5px 2px 2px 2px;
    max-width: 100%;
    position: relative;
    gap: 5px;
    width: var(--max-readable-width);
  }

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

  .topnav-home-anchor {
    align-content: center;
    display: flex;
    gap: 0px;
    padding: 5px;
    vertical-align: bottom;
  }

  @media(hover: hover) {

    .topnav-home-anchor:hover {
      color: var(--hyperLink-hover-color);
    }
  }

  .topnav-home-icon {
    height: 16;
    min-height: 16px;
  }

  .topnav-openBtn {
    align-items: center;
    background: none;
    border: 1px solid currentColor;
    color: inherit;
    display: flex;
    gap: 2px;
    justify-content: center;
  }

  @media(hover: hover) {
    .topnav-openBtn:hover {
      color: var(--hyperLink-hover-color);
    }
  }

  .topnav-openBtn-icon {
    height: 18px;
    min-height: 18px;
    padding-inline: 1px;
  }

  .topnav-menu {
    background-color: var(--popover-font-color);
    border: var(--popover-border-size) var(--popover-border-style) var(--popover-border-color);
    border-radius: var(--popover-border-radius);
    box-shadow: var(--popover-box-shadow);
    color: var(--popover-font-color);
    flex-direction: column;
    gap: 1px;
    max-width: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
  }

  .topnav-closeBtn-wrapper {
    background-color: var(--popover-font-color);
    display: flex;
    justify-content: end;
    padding: 2px;
  }

  .topnav-closeBtn {
    align-items: center;
    background: none;
    border: none !important;
    color: var(--popover-background-color);
    display: flex;
    flex-direction: row;
    /* justify-content: end; */
  }

  @media(hover: hover) {
    .topnav-closeBtn:hover {
      color: var(--hyperLink-hover-color);
    }
  }

  .topnav-closeBtn-text {
    font-size: 1rem;
  }

  .topnav-closeBtn-icon {
    display: flex;
    justify-content: center;
    justify-items: center;
    text-align: right;
    width: 2ch;
  }

  .topnav-closeBtn svg {
    height: 18px;
    min-height: 18px;
    min-width: 20px;
    padding-block: 1px;
    padding-inline: 1px;
  }

  .topnav-menu-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3px;
    max-height: 80vh;
    max-width: 80vw;
    overflow-y: auto;
  }

  .topnav-menu-grid section {
    background: var(--popover-background-color);
    color: var(--popover-font-color);
    gap: 0px;
    flex: 1 0 auto;
    max-width: 100%;
  }

  .topnav-menu h2 {
    background: var(--popover-font-color);
    color: var(--popover-background-color);
    display: flex;
    font-size: .8rem;
    font-weight: 700;
    justify-content: space-between;
    letter-spacing: unset;
    line-height: unset;
    margin-inline: 0px;
    margin-block: 0px;
    /* padding-inline: 5px 0px; */
    text-align: left;
    text-transform: uppercase;
  }

  /* .topnav-menu-heading-text:after {
    content: ":";
  } */

  .topnav-menu-heading-icon {
    display: inline-flex;
    min-width: 2ch;
    justify-content: center;

  }

  /* .topnav-menu h2::after {
    content: ":";
  } */

  .topnav-menu-items {
    display: flex;
    flex-direction: column;
    gap: 2.5px;
    padding-bottom: 5px;
  }

  /* .topnav-menu-items a::before{
    display: inline-flex;
    justify-content: center;
    min-width: 12px;
    content: "•";
  } */

  .topnav-menu-item {
    align-items: center;
    color: inherit;
    display: flex;
    justify-content: space-between;
    padding-left: 5px;
    text-decoration: none;
  }

  @media(hover: hover) {
    .topnav-menu-item:where(:hover) {
      background: var(--popover-font-color);
      color: var(--popover-background-color);
      text-decoration-line: underline;
      -webkit-text-decoration: underline;
      text-decoration: underline;
    }
  }

  .topnav-menu-item:where(:active) {
    background: var(--popover-font-color);
    color: var(--popover-background-color);
    /* color: var(--hyperLink-hover-color); */
    text-decoration-line: underline;
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }

  .topnav-menu-item-icon {
    display: flex;
    justify-content: center;
    justify-items: center;
    min-width: 36px;
  }

  .topnav-modeBtn {
    align-items: center;
    background: none;
    color: inherit;
    border: none;
    /* XXX cursor: pointer; */
    display: flex;
    justify-content: space-between;
  }

  @media(hover: hover) {
    .topnav-modeBtn:hover {
      color: var(--hyperLink-hover-color);
    }
  }

  .topnav-modeBtn[aria-label="dark"]::after {
    content: "⏾";
    min-width: 2ch;
  }

  .topnav-modeBtn[aria-label="light"]::after {
    content: "☀";
    min-width: 16px;
  }

  .topnav-modeBtn svg {
    min-height: 16px;
    min-width: 16px;
    height: 20px;
  }

  /* #site-menu 
 Note popover animation needs a not open, otherwise it gets weird
  */
  #site-menu:popover-open,
  #site-menu:not(:popover-open) {
    position: fixed;
    margin-top: 0;
    /* inset: unset; */
    top: 0px;
    top: anchor(top);
    right: anchor(right);
  }

  #myButton {
    color: black;
  }

  #myPopover:popover-open,
  #myPopover:not(:popover-open) {
    margin: 0;
    position: absolute;
    /* default is fixed but polyfill needs*/
    /* inset: unset; */
    top: anchor(top);
    right: anchor(right);
  }



  /* Main Section */
  #main-section main {
    /* container-type: inline-size; */
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0px auto 0px auto;
    max-width: 100%;
  }


  /* Article Section */

  .article-section {
    margin-inline: auto auto;
    max-width: 100%;
    --padding-inline: 5px;
    width: var(--max-readable-width);

    & sub-text {
      display: block;
      text-align: center;
    }

    & media- {
      display: block;
      background-color: var(--body-background-color);
    }

    & media- img {
      margin-inline: auto auto;
      max-height: 100px;
    }

    & h1 {
      text-align: center;
      /* padding-inline: calc(var(--padding-inline) / 2); */

    }

    & rich-text {
      padding-inline: var(--padding-inline);

    }

    @media(hover: hover) {
      & a:where(:hover) {
        -webkit-text-decoration: underline;
        text-decoration: underline;
        text-decoration-color: var(--hyperLink-hover-color);
      }
    }

    & a:where(:active) {
      -webkit-text-decoration: underline;
      text-decoration: underline;
      text-decoration-color: var(--hyperLink-hover-color);
    }
  }


  /* Basic Section */

  .basic-section {
    margin-inline: auto auto;
    max-width: 100%;
    width: var(--max-readable-width);
    --padding-inline: 5px;
    --grid-items-background: var(--body-background-color);
    --grid-gap-color: var(--background-neutral-color);

    & grid- {
      background: var(--grid-gap-color);
      container-type: inline-size;
      display: grid;
      grid-gap: 10px;
    }

    & grid-bx {
      background: var(--grid-items-background);
      border-radius: 3px;
      display: block;
    }

    & media- {
      display: block;
      background-color: var(--grid-items-background);
    }

    & media- img {
      margin-inline: auto auto;
      max-height: 100px;
    }

    & h1 {
      text-align: center;
      /* padding-inline: calc(var(--padding-inline) / 2); */
      margin-top: 0px;
    }

    & img-float-text {
      display: block;
    }

    & img-float-text img {
      display: inline;
    }

    & rich-text {
      display: block;
      /* padding-inline: var(--padding-inline); */
      background: var(--body-background-color);

    }
  }


  /* Tile Grid Section */

  :where(.tile-section) {
    margin-inline: auto auto;
    max-width: 100%;
    width: var(--max-readable-width);
    --grid-items-background: var(--body-background-color);
    --grid-gap-color: var(--background-neutral-color);
    --padding-inline: 4px;

    & h2 {
      max-width: 100%;
      /* padding-inline: calc(var(--padding-inline) / 2); */
      text-align: left;
    }

    & grid- {
      /* auto-fill works but using 100% may work better
            however container-type: inline-size; does not work with 100%,
            also if you only have one item it will take up the whole width */
      --col-min: calc(9% + 10ch);
      container-type: inline-size;
      display: grid;
      /* grid-column: auto auto; */
      grid-gap: 10px;
      grid-template-columns: repeat(auto-fill, minmax(var(--col-min), 1fr));
      /* grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--col-min)), 1fr)); */

      /* grid-template-rows: auto auto auto; */
      margin-inline: 2.5px;
      padding: 5px;

    }

    & article {
      display: contents;
    }

    & a {
      background-color: var(--background-neutral-color);
      border: 2px solid transparent;
      border-radius: 2px;
      display: grid;
      grid-gap: 0px;
      grid-row: span 3;
      grid-template-rows: subgrid;
      max-height: 100%;
      max-width: 100%;
      --padding-inline: 5px;
      text-decoration-line: none;
    }

    @media(hover: hover) {
      & a:hover {
        border: 2px solid red;
      }
    }

    & a:active {
      border: 2px solid red;
    }


    & h3 {
      color: inherit;
      margin-block-end: 0px;
      max-width: 60vh;
      /* padding-inline: calc(var(--padding-inline) / 2); */
      text-align: center;
      width: 100%;
    }

    & media- {
      display: block;
      max-width: 100%;
    }

    & img,
    svg {
      aspect-ratio: 16/10;
      /* max-width: 100%; it's in the property later*/
      object-fit: contain;
      padding: calc(var(--padding-inline) / 2);
      width: 100%;
    }

    text- {
      font-size: .9rem;
      display: block;
      padding-inline: calc(var(--padding-inline) / 2);
    }
  }

  /* List Section */

  .list-section {
    container-type: inline-size;
    margin-inline: auto auto;
    max-width: 100%;
    width: var(--max-readable-width);
    --content-gap: 5px;
    --padding-inline: 4px;
    --grid-items-background: var(--body-background-color);
    --grid-gap-color: var(--background-neutral-color);

    & h2 {
      /* padding-inline: calc(var(--padding-inline) / 2); */
    }

    & grid- {
      background-color: var(--grid-gap-color);
      container-type: inline-size;
      display: grid;
    }

    & article {
      background-color: var(--grid-items-background);
      border-radius: 3px;
      container-type: inline-size;
    }

    & h3 {
      /* padding-inline: var(--padding-inline); */
    }

    & content- {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--content-gap);
    }

    & media- {
      display: block;
      flex: 1 1 calc(20% - var(--content-gap));
      max-width: 100%;
      min-width: 15ch;
    }

    & media- img {
      aspect-ratio: 16/9;
      /* height: auto; it's in the property later */
      /* max-height: 100%; it's in the property later*/
      object-fit: contain;
    }

    & text- {
      display: block;
      flex: 1 0 calc(62.5% - var(--content-gap));
      min-width: min(20ch, 100%);
      max-width: 100%;
      padding-inline: var(--padding-inline);

    }

    @media(hover: hover) {
      & a:where(:hover) {
        -webkit-text-decoration: underline;
        text-decoration: underline;
        text-decoration-color: var(--hyperLink-hover-color);
      }
    }

    & a:where(:active) {
      -webkit-text-decoration: underline;
      text-decoration: underline;
      text-decoration-color: var(--hyperLink-hover-color);
    }
  }

  /*===== FOOTER SECTION =====*/

  #footer-section {
    background: var(--footer-background-color);
    color: var(--footer-font-color);
    margin-top: auto;
    max-width: 100%;
    padding: 3px;


    & footer {
      align-content: flex-start;
      display: flex;
      flex-direction: column;
      max-width: 100%;
      padding: 10px 0px;
    }

    & .footer-nav {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      gap: 2px;
      justify-content: space-between;
      margin-inline: auto;
      max-width: 100%;
      width: var(--max-readable-width);

      &>section {
        flex: 1 1 auto;
        min-width: 15ch;
      }

      &>section>h3 {
        margin-bottom: 0px;

      }

      & ol {
        display: flex;
        flex-direction: column;
        gap: 4px;
        list-style: none;
        padding: 5px;
        margin: 0px;
      }

      & header {
        font-weight: 600;
        font-style: italic;
      }

      & a {
        color: inherit;
        display: flex;
        text-decoration-line: none;
      }

      @media(hover: hover) {
        & a:where(:hover) {
          -webkit-text-decoration: underline;
          text-decoration: underline;
          text-decoration-color: var(--hyperLink-hover-color);
        }
      }

      & a:where(:active) {
        -webkit-text-decoration: underline;
        text-decoration: underline;
        text-decoration-color: var(--hyperLink-hover-color);
      }

      /* footer-nav end */
    }

    .footer-rights-section {
      display: flex;
      justify-content: space-between;
      margin: 10px auto;
      max-width: 100%;
      width: var(--max-readable-width);
    }

    .footer-copyright-notice {
      font-size: .8rem;
    }

    /* .footer-section end */
  }


  /* media blocks */

  media-full-center {
    background-color: var(--body-background-color);
    display: block;
    margin-inline: auto;
    max-width: 100%;
    padding-inline: 1em;

    & img {
      aspect-ratio: 16/9;
      /* height: auto; it's in the property Layer*/
      /* max-height: 100%; it's in the property layer*/
      object-fit: contain;
    }
  }

  /* hero h1 */

  .hero1 {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: var(--max-readable-width);

    &>h1 {
      align-items: center;
      display: flex;
      flex-direction: column;
      gap: .2em;
      max-width: 100%;
      max-height: 100%;

      &>.r1 {
        font-family: var(--font-family-body);
        letter-spacing: normal;
        text-align: left;
      }

      &>.r2 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: .2em;
      }

      &>.r2>.c1 {
        /* background: orange; */
        flex: 1 0 auto;
        min-width: 5ch;
        padding-inline: .01em;
        text-align: center;
      }

      &>.r2>.c1>img {
        aspect-ratio: 16/9;
        /* height: auto; it's in the property layer*/
        filter: var(--filter-svg-character);
        margin-inline: auto;
        /* max-width: 100%; it's in the property later*/
        width: 6em;
        object-fit: contain;
      }

      /* clamp(2em, 4em, 6em) */
      &>.r2>.c2 {
        flex: 1 1 auto;
      }

      &>.r2>.c2>.r1 {
        /* background: green; */
        font-family: var(--font-family-body);
        font-size: clamp(.3em, .5em, .7em);
        letter-spacing: normal;
        padding-inline: 2px;
        text-align: left;
      }

      &>.r2>.c2>.r1>img {
        height: clamp(.75em, 1.5em, 3em);
        filter: var(--filter-svg-tx-logo);
        margin-inline: 0px auto;
        max-width: 60vw;
      }

      &>.r2>.c2>.r2 {
        /* background: yellow; */
        padding-inline: 2px;
        text-align: left;
      }

      &>.r2>.c2>.r3 {
        /* background: pink; */
        font-family: var(--font-family-body);
        font-size: clamp(.3em, .5em, .7em);
        letter-spacing: normal;
        padding-inline: 2px;
        text-align: left;
      }
    }

    @media(hover: hover) {
      & a:where(:hover) {
        -webkit-text-decoration: underline;
        text-decoration: underline;
        text-decoration-color: var(--hyperLink-hover-color);
      }
    }

    & a:where(:active) {
      -webkit-text-decoration: underline;
      text-decoration: underline;
      text-decoration-color: var(--hyperLink-hover-color);
    }
  }
}

/* === SECTION LAYERS END === */


/* === BLOCKS LAYER === */

@layer zoshe.blocks {}

/* === BLOCKS LAYER END === */

/* ==== PSEUDOS LAYER === */

@layer zoshe.pseudos {

  :where(dialog, [popover], video)::backdrop {
    background-color: var(--backdrop-background-color);
  }

  :where(a):focus {
    outline-color: auto;
    outline-style: solid;
    outline-width: 2px;
  }

  :where(button):focus {
    outline-offset: -1px;
    outline-style: solid;
    outline-width: 2px;
  }

}

/* ==== PSEUDOS LAYER END === */





/* === CLASSES LAYER === */

@layer zoshe.classes {

  /* Can help when you want max-content to be the size */
  .fit-content-width {
    width: fit-content;
  }

  /* icons buttons */
  /* :where(.topnav .icon-btn) {
    color: inherit;
  } */

  /* info mark */
  :where(.info::before,
    .info::after) {
    content: "ⓘ" / "Info:";
  }

  /* no wrap eclipse */
  .noWrapLine-eclipse {
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .skip-to-content-link {
    position: absolute;
    overflow: hidden;
    height: 1px;
    left: -99999px;
    word-wrap: normal !important;
  }

  .skip-to-content-link:focus {
    z-index: 9999;
    overflow: auto;
    width: auto;
    height: auto;
    margin: 4px;
    padding: 8px 4px;
    left: 4px;
    top: var4px;
    box-shadow: var(--popover-box-shadow);
  }

  /* SVG Special filters */

  .svg-txlogo {
    filter: var(--filter-svg-tx-logo);
  }

  svg[class^="svg-character"] {
    filter: var(--filter-svg-character);
  }

  /* .svg-character-foxbat{
    filter: var(--filter-svg-character);
  } */

  .visuallyhidden {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
    clip-path: inset(0px 0px 99.9% 99.9%);
    overflow: hidden;
    height: 1px;
    width: 1px;
    padding: 0;
    border: 0;
  }

  /* width stuff */
  .readable-width {
    width: var(--max-readable-width);
    margin-inline: auto auto;
  }

  .section-width {
    width: var(--section-max-width);
    margin-inline: auto auto;
  }

  .zosheErrorMessage {
    background: black;
    color: white;
    margin: 5px;
    padding: 5px;
  }

  .zosheErrorMessage::before {
    content: "\26A0";
    color: yellow;
  }
}

/* === CLASSES LAYER END === */


/* === ANIMATION LAYER === */

@layer zoshe.animation {

  /* page to page animation */
  @media screen and (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }
  }

  /* --- popovers --- */
  :root {
    --popover-animation-duration: .75s;
    --popover-animation-sectionsDropInRange: 100%;
  }

  /* --- 1. Goes First --- */

  /* --- Popover Fade In --- */
  :where([popover].popover-fade-in,
    [popover].popover-fade-in::backdrop) {
    transition: all var(--popover-animation-duration) allow-discrete;
    opacity: 0;
  }

  :where([popover].popover-fade-in:popover-open,
    [popover].popover-fade-in:popover-open::backdrop) {
    opacity: 1;
  }

  /* --- Popover Fade In w/Section DropIn --- */
  :where([popover].popover-fade-in section) {
    transition: var(--popover-animation-duration) transform;
    transform: translateY(-100%);
  }

  :where([popover].popover-fade-in:popover-open section) {
    transform: translateY(0px);
  }


  /* --- 2. Goes second --- */
  /* These rules define the *initial* state for the transition when the popover opens. */

  @starting-style {

    /* --- Popover Fade In --- */
    :where([popover].popover-fade-in:popover-open,
      [popover].popover-fade-in:popover-open::backdrop) {
      opacity: 0;
    }

    /* --- Popover Fade In w/Section DropIn --- */
    :where([popover].popover-fade-in:popover-open section) {
      transform: translateY(-100%);
    }



    /* Popover Slide Up */
    [popover].popover-slide-up {
      opacity: 0;
      transform: translateY(20px);
      visibility: hidden;
    }

    /* Popover Scale In */
    [popover].popover-scale-in {
      opacity: 0;
      transform: scale(0.95);
      visibility: hidden;
    }

    /* Popover Fade & Blur In */
    [popover].popover-fade-blur-in {
      opacity: 0;
      filter: blur(5px);
      transform: translateY(10px);
      visibility: hidden;
    }
  }
}

/* === ANIMATION LAYER END === */



/* Popover Fade & Blur Out */
/* [popover].popover-fade-blur-out.is-closing {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(10px);
  visibility: hidden;
} */

/* --- Optional: Backdrop Styling (if you enable it on your popover) --- */
/* Note: The popover API does not create a backdrop by default.
   You'd need a separate element or a full-screen popover for this. */
/*
::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}
::backdrop.show {
    opacity: 1;
}
*/

/* --- CSS Anchor Positioning (if you use it) --- */
/* Example: Name your anchor element */
/*
#my-anchor-button {
    anchor-name: --my-custom-anchor;
}
*/

/* Example: Position popover relative to the named anchor */
/*
[popover].my-anchored-popover {
    position-anchor: --my-custom-anchor;
    inset-area: bottom;
    margin-block-start: 10px;
}
*/



/* end Animation layer */


/* === ACCESSIBILITY LAYER === */


@layer zoshe.accessibility {
  /* for all types of disability needs, including vestibular motion disorders. 
 Motion does help Cognitive issues, so tooling at the root level needs looking into. info: https://webaim.org/articles/cognitive/.
Possible useful Media values: 
 @media (prefers-reduced-motion) {
}
 @media not all and (prefers-reduced-motion) {
}
*/

  /* @media (prefers-reduced-motion: no-preference) {} */

  @media (prefers-reduced-motion: reduce) {
    /* maybe break on named Animation. animation-duration: 0s seems to cover it better */
    /* body {
      animation: none;
    } */

    *,
    ::before,
    ::after {
      animation-delay: 0s !important;
      animation-duration: 0s !important;
      animation-iteration-count: 1 !important;
      background-attachment: initial !important;
      scroll-behavior: auto !important;
      transition-duration: 1ms !important;
      transition-delay: 0s !important;
    }

    @media (prefers-contrast: more) {
      ::selection {
        text-shadow: none;
      }
    }
  }
}

/* === ACCESSIBILITY LAYER END === */


/*===== SECTION CONTACT FORM =====*/


.posLoadBarRun {
  background: url(data:image/gif;base64,R0lGODlh3AATALMAAPf39+/v7+bm5t7e3tbW1s7OzsXFxb29vbW1ta2traWlpZycnJSUlP///wAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQJCAANACwGAAMA0wANAAAE/7Adtaq9OOvNu/9gKI5kaYZNKilJOyXv4c5UDLOyDCdKbfxAH01hkwWHh2LCIEQejk0nkMmTTlks67Xa2vWSU2hX+yMbbglVtMBGKJmEuHz+VswJzx92XI/38XQGb4F5VFkuhGdeRIVlB4loOUt3T08wgwRiXY+QSZgGbWozA6SlmqYCqahtQKuqrawHrrOwr7a1sre0uLq8vbHAv77Cw8TDC6JsxsoBzc7PzKzQ09G51MXX1dHZ2tzd3t/g0uLj5NbTyCkVu4EA7u/u2PDxkPP04fbs+fr79f2J/wAGbDeQTr90DdYtOwdP3jyHDbsxfDdxTkGLFzE+lGhOY0SBHdm5IVRILmNFABBLmiy1EV9Llypfgoz5cSbFUOrk/Vi57R5Mnz/5yQzKkafRoT2Rlqs5csEAAQFOSi16tCZRmzexAk2q1ONWZVO1Rn3azB0BAAcKnJ1HKg5CO3IqnfEUFgBYryhT5r2Ldy/fumwKCODUEXDgwXECdDUcGIEBZ/DSUhJkwF1Zy7VysqvMdsAdPwMK2EOplsBhwvZAsTG9+snotp9liX7IOjBfxe8M1LZdAEGKxY+dFQhQQLXtR65TB66N53HV3MZ7/04Y5YT169iza9/OvYOKBhEAACH5BAUIAA0ALAYAAwDQAA0AAAT/sB21qr046827/2AojmRpfsohIQmTHHA8KUltJwoixwp91zmD0AAz9H7Ag1BZPCJTQ+YMiUMMiTDnD3oVam9B4vVrC0q9vq31mk2DlcshGfiC6VILhaHA5xMOCTo7OgSFhn91MUQvh4YGiUWAB42Fjzt2k5SSl4SUljKLmY2bigedjZ+DooepkaeHpDKvjpBMCAgEBXsEFHkFA8ACwgNrumwDwskCA0rGx8rDcM5LyNDMQ9MH1crXe13a0MtwQs7g1uPf28nd5FHq0V3u4ezZ7+Lx1MMDBBbmAgEAyfUpVEAbwIMB9/QpUGkAwoMCB/5x+DBARD8FKT68yHBiRYsK/wdm/MixIcmQfjxWLDlyJUo/Bl0u7BjzoIAKCZA9/EOJwB4AQIEC9NnzZ9CgAwz05HMUQAAASSkZawo0qqcCTYcqvZoV6lZUWI8CtNqIKVWyhnSFDTr2KysDWQMQlbpWaIAKBnQ6DciwY66CANk63VX2wFO2fKUaFss35d/FiC36TQtZqNMDkx8fthwAc65Rm/dKdpzL8OaDnguHhpiZT2Wng1sDPg3g5oK8/4IKPJSRKoDdsAb4Bk4w78GjxAtpixuRlXDGzQ0tp5rcp0bL0XPl7SqEt/LruhWOet60uybydg3g1es1bV8hvtF2NCo4qUSCdWHbF+kT7lm37+VXVeRI+MH3H298GNjUfhIpeBSDftH34EsJ+rfgS9pZOOF6uY3mGGBiXTYTQa891ZlffYEYGYU+vSYUYZ+VthpAmC2kWYgn2igjYx6m+MeMOUqkomUC1CjSkKIZiRGSTxVZQB6F/BOAWh8aF1h49/VGHYYqHQYQlZNtxxiYwXGHkiPgPQVmR1oitiZM6AX15ndmjjhRXG+6FidQ5KSAgE4Q+kFEfBgas5pXMzFExIyBVngoMzr2F1pVSr5nwIw+JWrof5oKgSmXfEyKaKKenqXkZ4sylikMEvRywquwxirrrLTWioIKEQAAIfkEBQgADQAsGAAJALUABgAABH+wtSOrvZXinbnXHgZWQDhK5RduZxOYqxhfxmzVtgekbC7hOaCttfMISb7VEWVMGpY8zBMTpW2qt6sRuqU2fUullmNovVQXrIUIS7ct6s7lzGGjLfSe+47kz6BxOl85RIEtDYFhiWMbYSGKg3CPSYw2gQ1LeVJekZRMnYhJmhsRACH5BAUIAA0ALBkACQC3AAYAAAResLUjq72V4p251x4GhtZISuaZkmvYfoZxXvLc2Sgu1Tiv677ZixM81YokZEhJ/DWYziZwSp0ON1fRL3vhlrZgnfeGG1ug2HBZbUNrxeyZO4qZn+0V/O6nP+ifQH08EQAh+QQFCAANACwLAAkAxwAFAAAEWfC0Saud8mqat+6eBYYceY0mSqoh67kbrBmmRdfUjTfyuU86XE/0awRrR1OSZFh6nMVoCLpp/qw7qvSi5UaHFXDpJ8YUy7yzmrzeodFdWzFeoefmbZwdSIkAACH5BAUIAA0ALAsACQDJAAUAAARTsMlJaz02U6w179YHbmNYXieZSuLZlpixsnMjz3etz+/Y751cSuiyEUeGI3DJtNWSOGVQqoE2QdBfR+upcTNfE89LHptX4Qy1WkZffW9QmjmffCIAIfkEBQgADQAsMQAJAJEABAAABCewyUmrvTjrdrbtXpiBYml+Z6qexuq+cCzPtEaKd5h7+9bbp98oGAEAIfkEBQgADQAsFQAJALYABgAABGKwySCrvZXiXQH/2od5IhaWGXqdKqlK7tuwKC2/8S3neq/aIqDK4CuWADwRidhKfpA3KBPlfFY3HiFHi9VdN9yRVxe+fE3e82psbLFlZUu8835R1B18qk2N6htQO389gXANEQAh+QQFCAANACwXAAoAbwAEAAAEMLA10Iy8OF+ru/9SUIEZxZHYiVIU6r6wCs+yK843nL+7PTc9lKj1q/1QRo8o2SHSIgAh+QQJCAANACwGAAMA0AANAAAEurDJSau9OOvNu/9gKI5kaZ5oqq5s675wLMdDjXzCrIdCvns+nOvgCQRAx1CyuOw0nc+NUTb9RKWZIxG0/RhCX1DYOxvDzB20aCC6atxZpRw5t9aLIcBGvQfjG3wXAXqBGYUYhxeJEwCEf4sSjYB+F10ceh+SkA2alJeOL5KZoJ+THqQbnSdwGKyCd06wHK4WmHZ0uCiYmxObSb4SwKazwZ5Yw8fCvMUmqqWWaT9kp7kwoqeo0trb3N0WEQA7) top left no-repeat;
}

/*===== POLICY PAGE =====*/

#privacyPolicyPg main,
#refundPolicyPg main,
#shippingPolicyPg main,
#termsOfServicePg main {
  width: var(--max-readable-width);
  max-width: 100%;
  margin-inline: auto;
}

#privacyPolicyPg .main-container,
#refundPolicyPg .main-container,
#shippingPolicyPg .main-container,
#termsOfServicePg .main-container {
  width: var(--max-readable-width);
  max-width: 100%;
  margin-inline: auto;
}