@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
:root {
  --nav-symbol-size: 34px;
  --nav-symbol-strength: 4px; }

/*
$mq-breakpoints: (
    mobile:  320px,
    tablet:  740px,
    desktop: 980px,
    wide:    1300px,

    // Tweakpoints
    desktopAd: 810px,
    mobileLandscape: 480px
);
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  color: inherit; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

div {
  box-sizing: border-box; }

p {
  -webkit-hyphens: auto;
          hyphens: auto; }

.hidden {
  display: none; }

:root {
  interpolate-size: allow-keywords; }

:root,
div[data-theme="cs_default"],
html[data-theme="cs_default"] {
  --c-fg-mid: #8f714c;
  --c-fg-bright:rgb(241, 229, 200);
  --c-bg-light-default: rgb(252, 252, 252);
  --c-bg-light-darker: #f6f4ef;
  --c-bg-mid: rgb(193, 179, 144);
  --c-bg-dark-lighter: rgb(100, 100, 94);
  --c-bg-dark-default: rgb(12, 12, 12);
  --c-fg-highlight: #f9f1db;
  --c-fg-highlight-alt: rgb(196, 89, 13);
  --c-fg-item: var(--c-bg-dark-lighter);
  --c-fg-item-hover: var(--c-bg-dark-default);
  --c-fg-item-selected: var(--c-fg-item-hover);
  --c-bg-section-odd: var(--c-bg-light-default);
  --c-bg-section-even: var(--c-bg-light-darker);
  --c-bg-menu: var(--c-bg-mid);
  --c-default-bg: var(--c-bg-light-default);
  --c-default-fg: var(--c-bg-dark-default);
  --c-bg-sepia: var(--c-bg-mid); }

/* ----------------------------------------------------------------------------------- 
Set the default font-family for caption, 2nd Level caption and texts
----------------------------------------------------------------------------------- */
:root {
  --font-default: 'Poppins', sans-serif; }

/*
h1 
{
//    font-family: var(--font-default-header);
    font-weight:600;
    letter-spacing: .15ch;

}

h2 
{
//    font-family: var(--font-default-subheader);
    font-weight:400;
    letter-spacing: .20ch;
    font-style: italic;
}
*/
div, span, applet, object, iframe,
h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  font-family: var(--font-default-text); }

/*
p {
    font-weight:300;
    letter-spacing: .15ch;
    line-height: 115%;
}
    */
a {
  text-decoration: none; }

/*




*/
html {
  font: 18px var(--font-default);
  font: 110% var(--font-default); }

html,
body {
  font-size: 16px; }
  @media (min-width: 90em) {
    html,
    body {
      font-size: 18px; } }
  @media (min-width: 120em) {
    html,
    body {
      font-size: 20px; } }
  @media (min-width: 136em) {
    html,
    body {
      font-size: 22px; } }
  @media (min-width: 152em) {
    html,
    body {
      font-size: 24px; } }
/* ----------------------------------------------------------------------------------- 
Example of using rem with fallback
body { font-size: 12px; margin: 0; padding: 0;}
.one, .two {
  border: solid #666;
  border-width: 10px; border-width: 0.01rem;   // 1vw 
  border-radius: 30px; border-radius: 0.03rem; // 3vw 
  font-size: 20px; font-size: 0.02rem;         // 2vw 
  padding: 20px; padding: 0.02rem;             // 2vw 
}
Here, the <body> element font-size rule insulates content from changes in <html> font-size. 
Browsers that don’t understand rem are given a pixel-based fallback; browsers that do know 
rem derive the proper dimension from <html> font size.
----------------------------------------------------------------------------------- */
div.color {
  --c-a-0: rgb(255, 255, 255);
  --c-a-1: rgb(232, 174, 58);
  --c-a-2: rgb(205, 142, 16);
  --c-a-3: rgb(170, 113, 0);
  --c-a-4: rgb(135, 90, 0);
  --c-a-5: rgb(92, 61, 0);
  --c-a-6: rgb(0, 0, 0);
  display: inline-block;
  margin: 0;
  padding: 0;
  width: 40px;
  height: 16px;
  content: ''; }
  div.color.c0 {
    background-color: var(--c-a-0); }
  div.color.c1 {
    background-color: var(--c-a-1); }
  div.color.c2 {
    background-color: var(--c-a-2); }
  div.color.c3 {
    background-color: var(--c-a-3); }
  div.color.c4 {
    background-color: var(--c-a-4); }
  div.color.c5 {
    background-color: var(--c-a-5); }
  div.color.c6 {
    background-color: var(--c-a-6); }

/*
white       255 255 255 0   0   100            255   
            232 174 58  40  75  90             
            205 142 16  40  92  80
            170 113 0   39  100 66
            135 90  0   40  100 52
            92  61  0   39  100 36
black       0   0   0   0   0   0
*/
div.ecolor {
  /*
    --c-a-0: hsl(from rgb(232, 174, 58) h s l);   
    --c-a-1: hsl(from rgb(232, 174, 58) calc(h - 10) s l);   
    --c-a-2: hsl(from rgb(232, 174, 58) calc(h - 15) s l);   
    --c-a-3: hsl(from rgb(232, 174, 58) calc(h - 20) s l);   
    --c-a-4: hsl(from rgb(232, 174, 58) calc(h - 25) s l);   
    --c-a-5: hsl(from rgb(232, 174, 58) calc(h - 30) s l);   
    --c-a-6: hsl(from rgb(232, 174, 58) calc(h - 35) s l);   
*/
  /*
    --c-center: rgb(230,200, 60);
    --c-alt-1: rgb(230, 175, 60);
    --c-alt-2: rgb(230, 230, 10);

    --c-a--5: hsl(from var(--c-center) h s calc(l + 50));   
    --c-a--4: hsl(from var(--c-center) h s calc(l + 40));   
    --c-a--3: hsl(from var(--c-center) h s calc(l + 30));   
    --c-a--2: hsl(from var(--c-center) h s calc(l + 20));   
    --c-a--1: hsl(from var(--c-center) h s calc(l + 10));   
    --c-a-0: hsl(from var(--c-center) h s l);   
    --c-a-1: hsl(from var(--c-center) h s calc(l - 10));   
    --c-a-2: hsl(from var(--c-center) h s calc(l - 20));   
    --c-a-3: hsl(from var(--c-center) h s calc(l - 30));   
    --c-a-4: hsl(from var(--c-center) h s calc(l - 40));   
    --c-a-5: hsl(from var(--c-center) h s calc(l - 50));   


    --c-alt-1: hsl(from rgb(232, 202, 60) h s l);   
    --c-alt-2: hsl(from rgb(200, 100, 16) h s l);   

    @include gen_colorHSL(rgb(230,200, 60), TESTCOLOR);
*/
  --c-main: #c8aa0f;
  --c-main-3-darker: hsl(from #c8aa0f h s calc(l + -33));
  --c-main-2-darker: hsl(from #c8aa0f h s calc(l + -22));
  --c-main-1-darker: hsl(from #c8aa0f h s calc(l + -11));
  --c-main-1-lighter: hsl(from #c8aa0f h s calc(l + 15));
  --c-main-2-lighter: hsl(from #c8aa0f h s calc(l + 30));
  --c-main-3-lighter: hsl(from #c8aa0f h s calc(l + 45));
  display: inline-block;
  margin: 30px;
  width: auto;
  height: auto;
  color: black;
  font-size: 10px;
  border: 1px solid lightgray; }
  div.ecolor > span {
    display: inline-block;
    width: 80px;
    height: 30px;
    padding: 2px;
    margin: -2px; }
    div.ecolor > span:nth-of-type(9) {
      background-color: white; }
    div.ecolor > span:nth-of-type(1) {
      background-color: black;
      color: white; }
    div.ecolor > span:nth-of-type(2) {
      background-color: var(--c-main-3-lighter); }
    div.ecolor > span:nth-of-type(3) {
      background-color: var(--c-main-2-lighter); }
    div.ecolor > span:nth-of-type(4) {
      background-color: var(--c-main-1-lighter); }
    div.ecolor > span:nth-of-type(5) {
      background-color: var(--c-main); }
    div.ecolor > span:nth-of-type(6) {
      background-color: var(--c-main-1-darker); }
    div.ecolor > span:nth-of-type(7) {
      background-color: var(--c-main-2-darker); }
    div.ecolor > span:nth-of-type(8) {
      background-color: var(--c-main-3-darker); }
    div.ecolor > span:nth-of-type(10) {
      background-color: color-mix(in srgb, var(--c-main) 50%, transparent); }

div.ecolor-alt-1 {
  --c-alt-1: #e66414;
  --c-alt-1-3-darker: hsl(from #e66414 h s calc(l + -39));
  --c-alt-1-2-darker: hsl(from #e66414 h s calc(l + -26));
  --c-alt-1-1-darker: hsl(from #e66414 h s calc(l + -13));
  --c-alt-1-1-lighter: hsl(from #e66414 h s calc(l + 15));
  --c-alt-1-2-lighter: hsl(from #e66414 h s calc(l + 30));
  --c-alt-1-3-lighter: hsl(from #e66414 h s calc(l + 45));
  display: inline-block;
  margin: 30px;
  width: auto;
  height: auto;
  color: black;
  font-size: 10px;
  border: 1px solid lightgray; }
  div.ecolor-alt-1 > span {
    display: inline-block;
    width: 80px;
    height: 30px;
    padding: 2px;
    margin: -2px; }
    div.ecolor-alt-1 > span:nth-of-type(9) {
      background-color: white; }
    div.ecolor-alt-1 > span:nth-of-type(1) {
      background-color: black;
      color: white; }
    div.ecolor-alt-1 > span:nth-of-type(2) {
      background-color: var(--c-alt-1-3-lighter); }
    div.ecolor-alt-1 > span:nth-of-type(3) {
      background-color: var(--c-alt-1-2-lighter); }
    div.ecolor-alt-1 > span:nth-of-type(4) {
      background-color: var(--c-alt-1-1-lighter); }
    div.ecolor-alt-1 > span:nth-of-type(5) {
      background-color: var(--c-alt-1); }
    div.ecolor-alt-1 > span:nth-of-type(6) {
      background-color: var(--c-alt-1-1-darker); }
    div.ecolor-alt-1 > span:nth-of-type(7) {
      background-color: var(--c-alt-1-2-darker); }
    div.ecolor-alt-1 > span:nth-of-type(8) {
      background-color: var(--c-alt-1-3-darker); }
    div.ecolor-alt-1 > span:nth-of-type(10) {
      background-color: color-mix(in srgb, var(--c-alt-1) 50%, transparent); }

div.ecolor-alt-2 {
  --c-alt-2: #cd8e10;
  --c-alt-2-3-darker: hsl(from #cd8e10 h s calc(l + -33));
  --c-alt-2-2-darker: hsl(from #cd8e10 h s calc(l + -22));
  --c-alt-2-1-darker: hsl(from #cd8e10 h s calc(l + -11));
  --c-alt-2-1-lighter: hsl(from #cd8e10 h s calc(l + 15));
  --c-alt-2-2-lighter: hsl(from #cd8e10 h s calc(l + 30));
  --c-alt-2-3-lighter: hsl(from #cd8e10 h s calc(l + 45));
  display: inline-block;
  margin: 30px;
  width: auto;
  height: auto;
  color: black;
  font-size: 10px;
  border: 1px solid lightgray; }
  div.ecolor-alt-2 > span {
    display: inline-block;
    width: 80px;
    height: 30px;
    padding: 2px;
    margin: -2px; }
    div.ecolor-alt-2 > span:nth-of-type(9) {
      background-color: white; }
    div.ecolor-alt-2 > span:nth-of-type(1) {
      background-color: black;
      color: white; }
    div.ecolor-alt-2 > span:nth-of-type(2) {
      background-color: var(--c-alt-2-3-lighter); }
    div.ecolor-alt-2 > span:nth-of-type(3) {
      background-color: var(--c-alt-2-2-lighter); }
    div.ecolor-alt-2 > span:nth-of-type(4) {
      background-color: var(--c-alt-2-1-lighter); }
    div.ecolor-alt-2 > span:nth-of-type(5) {
      background-color: var(--c-alt-2); }
    div.ecolor-alt-2 > span:nth-of-type(6) {
      background-color: var(--c-alt-2-1-darker); }
    div.ecolor-alt-2 > span:nth-of-type(7) {
      background-color: var(--c-alt-2-2-darker); }
    div.ecolor-alt-2 > span:nth-of-type(8) {
      background-color: var(--c-alt-2-3-darker); }
    div.ecolor-alt-2 > span:nth-of-type(10) {
      background-color: color-mix(in srgb, var(--c-alt-2) 50%, transparent); }

:root,
div[data-theme="cs_default"],
html[data-theme="cs_default"] {
  --c-main: #c8aa0f;
  --c-main-3-darker: hsl(from #c8aa0f h s calc(l + -33));
  --c-main-2-darker: hsl(from #c8aa0f h s calc(l + -22));
  --c-main-1-darker: hsl(from #c8aa0f h s calc(l + -11));
  --c-main-1-lighter: hsl(from #c8aa0f h s calc(l + 15));
  --c-main-2-lighter: hsl(from #c8aa0f h s calc(l + 30));
  --c-main-3-lighter: hsl(from #c8aa0f h s calc(l + 45));
  --c-alt-1: #e66414;
  --c-alt-1-3-darker: hsl(from #e66414 h s calc(l + -39));
  --c-alt-1-2-darker: hsl(from #e66414 h s calc(l + -26));
  --c-alt-1-1-darker: hsl(from #e66414 h s calc(l + -13));
  --c-alt-1-1-lighter: hsl(from #e66414 h s calc(l + 15));
  --c-alt-1-2-lighter: hsl(from #e66414 h s calc(l + 30));
  --c-alt-1-3-lighter: hsl(from #e66414 h s calc(l + 45));
  --c-alt-2: #cd8e10;
  --c-alt-2-3-darker: hsl(from #cd8e10 h s calc(l + -33));
  --c-alt-2-2-darker: hsl(from #cd8e10 h s calc(l + -22));
  --c-alt-2-1-darker: hsl(from #cd8e10 h s calc(l + -11));
  --c-alt-2-1-lighter: hsl(from #cd8e10 h s calc(l + 15));
  --c-alt-2-2-lighter: hsl(from #cd8e10 h s calc(l + 30));
  --c-alt-2-3-lighter: hsl(from #cd8e10 h s calc(l + 45));
  --c-go-green: #22cc3f; }

div[data-theme="cs_alt_1"],
html[data-theme="cs_alt_1"] {
  --c-main: #0faad7;
  --c-main-3-darker: hsl(from #0faad7 h s calc(l + -33));
  --c-main-2-darker: hsl(from #0faad7 h s calc(l + -22));
  --c-main-1-darker: hsl(from #0faad7 h s calc(l + -11));
  --c-main-1-lighter: hsl(from #0faad7 h s calc(l + 15));
  --c-main-2-lighter: hsl(from #0faad7 h s calc(l + 30));
  --c-main-3-lighter: hsl(from #0faad7 h s calc(l + 45));
  --c-alt-1: #1464dc;
  --c-alt-1-3-darker: hsl(from #1464dc h s calc(l + -39));
  --c-alt-1-2-darker: hsl(from #1464dc h s calc(l + -26));
  --c-alt-1-1-darker: hsl(from #1464dc h s calc(l + -13));
  --c-alt-1-1-lighter: hsl(from #1464dc h s calc(l + 15));
  --c-alt-1-2-lighter: hsl(from #1464dc h s calc(l + 30));
  --c-alt-1-3-lighter: hsl(from #1464dc h s calc(l + 45));
  --c-alt-2: #148ed8;
  --c-alt-2-3-darker: hsl(from #148ed8 h s calc(l + -33));
  --c-alt-2-2-darker: hsl(from #148ed8 h s calc(l + -22));
  --c-alt-2-1-darker: hsl(from #148ed8 h s calc(l + -11));
  --c-alt-2-1-lighter: hsl(from #148ed8 h s calc(l + 15));
  --c-alt-2-2-lighter: hsl(from #148ed8 h s calc(l + 30));
  --c-alt-2-3-lighter: hsl(from #148ed8 h s calc(l + 45));
  --c-go-green: #22cc3f; }

div[data-theme="cs_alt_2"],
html[data-theme="cs_alt_2"] {
  --c-main: #d7140f;
  --c-main-3-darker: hsl(from #d7140f h s calc(l + -33));
  --c-main-2-darker: hsl(from #d7140f h s calc(l + -22));
  --c-main-1-darker: hsl(from #d7140f h s calc(l + -11));
  --c-main-1-lighter: hsl(from #d7140f h s calc(l + 15));
  --c-main-2-lighter: hsl(from #d7140f h s calc(l + 30));
  --c-main-3-lighter: hsl(from #d7140f h s calc(l + 45));
  --c-alt-1: #c86414;
  --c-alt-1-3-darker: hsl(from #c86414 h s calc(l + -39));
  --c-alt-1-2-darker: hsl(from #c86414 h s calc(l + -26));
  --c-alt-1-1-darker: hsl(from #c86414 h s calc(l + -13));
  --c-alt-1-1-lighter: hsl(from #c86414 h s calc(l + 15));
  --c-alt-1-2-lighter: hsl(from #c86414 h s calc(l + 30));
  --c-alt-1-3-lighter: hsl(from #c86414 h s calc(l + 45));
  --c-alt-2: #c88e06;
  --c-alt-2-3-darker: hsl(from #c88e06 h s calc(l + -33));
  --c-alt-2-2-darker: hsl(from #c88e06 h s calc(l + -22));
  --c-alt-2-1-darker: hsl(from #c88e06 h s calc(l + -11));
  --c-alt-2-1-lighter: hsl(from #c88e06 h s calc(l + 15));
  --c-alt-2-2-lighter: hsl(from #c88e06 h s calc(l + 30));
  --c-alt-2-3-lighter: hsl(from #c88e06 h s calc(l + 45));
  --c-go-green: #22cc3f; }

:root {
  color-scheme: light dark;
  --light-bg: white;
  --light-color: black;
  --dark-bg: black;
  --dark-color: white;
  --default-border-radius: 4px;
  --default-glass-opacity: .3;
  --default-glass-blur: 6px; }
  @media (max-width: 47.99em) {
    :root {
      --fnt-sz-h1: 1.1rem; } }
  @media (min-width: 48em) {
    :root {
      --fnt-sz-h1: 1.3rem; } }
:root {
  --c-bg-white: white;
  --c-bg-black: black;
  --c-bg-default: transparent;
  --c-dark-initial: light-dark(var(--light-color), var(--dark-color));
  --c-light-initial: light-dark(var(--light-bg), var(--dark-bg));
  --c-colorized-background: light-dark(var(--light-bg), var(--dark-bg));
  --c-shadow: light-dark(color-mix(in srgb, var(--light-color) 25%, transparent),
                        color-mix(in srgb, var(--c-main-1-darker) 55%, transparent));
  --c-border: light-dark(var(--c-main-1-darker), var(--c-main-2-darker));
  --c-nav-fg: light-dark(var(--c-main-2-darker), var(--c-main-3-lighter));
  --c-nav-fg-disabled: light-dark(var(--c-main-1-darker), var(--c-main-1-lighter));
  --c-nav-fg-hover: light-dark(var(--c-main-3-darker), var(--c-main-2-lighter));
  --c-nav-bg: red;
  --c-nav-alt-bg: light-dark(var(--c-main-1-lighter), var(--c-main-1-darker));
  --c-cntr-bg: light-dark(var(--c-main-2-darker), var(--c-main-3-lighter));
  --c-cntr-disabled: light-dark(var(--c-main-1-darker), var(--c-main-2-lighter));
  --c-cntr-unchecked: light-dark(#cccccc, #404040);
  --c-cntr-checked: light-dark( #404040, #e3e3e3);
  --c-cntr-surface: light-dark(#e3e3e3, #aeaeae);
  --nav-symbol-bg-color: light-dark( color-mix(in srgb,/*var(--c-main-3-lighter)*/ white 70%, transparent 30%),
                color-mix(in srgb,var(--c-main-3-darker) 70%, transparent 30%) );
  --nav-fg-color: color-mix(
                in srgb, light-dark(var(--c-main-3-darker), var(--c-main-3-lighter)) 70%, transparent 30%);
  --nav-fg-link-color:var(--c-alt-2-1-lighter);
  --text-color: light-dark(var(--c-main-2-darker), var(--c-main-3-lighter)); }

body {
  background-color: var(--c-bg-default);
  color: var(--text-color); }

summary::marker {
  color: var(--text-color); }

svg.svg-icon {
  --c-user-stroke: var(--text-color);
  --c-user-fill: var(--text-color); }

.ldAni {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100vH;
  min-width: 100%;
  min-height: 100vH;
  overflow: hidden;
  background: rgba(50, 50, 50, 0.9);
  z-Index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.9s, opacity 0.8s linear; }

@keyframes ldSpin {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(180deg); }
  100% {
    transform: rotate(360deg); } }

.ldAni > div div {
  position: relative;
  animation: ldSpin 1s linear infinite;
  width: 68px;
  height: 68px;
  top: 66px;
  left: 66px;
  border-radius: 50%;
  box-shadow: 0 4px 0 0 #e15b64;
  transform-origin: 34px 36px;
  box-sizing: content-box; }

.ldAni > div {
  width: 100%;
  height: 100%;
  position: relative;
  top: 40%;
  left: 40%;
  transform: translateZ(0) scale(1);
  backface-visibility: hidden;
  transform-origin: 0 0; }

.ldAni > div:after {
  position: relative;
  top: 120px;
  left: 40px;
  font-size: 0.8em;
  font-weight: 900;
  font-style: italic;
  content: attr(data-content); }

nav.breadcrumbs {
  position: fixed;
  height: 4rem;
  width: 80%;
  min-width: 10rem;
  padding: 0;
  margin: 0;
  margin-left: -2rem;
  left: 2.1rem;
  top: -.5rem;
  z-index: 9999;
  /*
    @include mq($from: xs-view) {
        top: 2.4rem;
    }
    @include mq($from: s-view) {
        top: 2rem;
    }
    @include mq($from: m-view) {
        top: 1.7rem;
    }
*/ }
  nav.breadcrumbs > ul {
    display: flex;
    list-style: none;
    margin: auto;
    text-align: left;
    top: 3.2rem;
    width: 100%;
    height: 1.2rem;
    transform: translateY(30%);
    z-index: 1;
    gap: 0rem;
    justify-content: start; }
    nav.breadcrumbs > ul > li {
      list-style: none;
      height: 100%;
      background-color: var(--nav-symbol-bg-color);
      font-family: var(--font-default);
      border-radius: 4px;
      border: 1px solid var(--c-border);
      letter-spacing: 1px;
      transition: all ease-in-out 0.4s;
      transition-delay: 0s;
      text-transform: uppercase;
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      transform: skew(-21deg);
      box-shadow: 0 2px 5px var(--c-shadow);
      margin: 2px;
      padding: 0 .8rem;
      cursor: pointer;
      text-overflow: ellipsis;
      overflow: hidden; }
      @media (max-width: 47.99em) {
        nav.breadcrumbs > ul > li {
          width: 7rem; } }
      nav.breadcrumbs > ul > li > a {
        font-size: 70%;
        font-weight: 500;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        color: var(--c-nav-fg);
        transition: all ease-in-out 0.4s;
        transition-delay: 0s; }
        nav.breadcrumbs > ul > li > a:hover {
          transition: all ease-in-out 0.4s;
          transition-delay: 0s;
          color: var(--c-nav-fg-hover); }
      nav.breadcrumbs > ul > li:last-of-type {
        cursor: default; }

input[type=checkbox]#burger-check ~ nav.nav-main > nav.breadcrumbs {
  transition: all ease-in-out 0.4s;
  transition-delay: 0s; }

input[type=checkbox]#burger-check:checked ~ nav.nav-main > nav.breadcrumbs {
  left: -100vW; }

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

@property --progress {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 0%; }

@property --angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: -90deg; }

@keyframes progress {
  0% {
    --progress: 0%;
    --angle: 0deg; }
  4% {
    --angle: -90deg; }
  100% {
    --progress: 100%; } }

.side-nav {
  position: fixed;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  top: 10px;
  z-index: 9999;
  right: 8px;
  width: -moz-fit-content;
  width: fit-content;
  height: 80vH;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /*
    b-menu,
    b-lang,
    b-social-share {
                @include add-all-transition();
    }
    */ }
  @media (min-width: 650px) {
    .side-nav {
      height: calc(98vH - 20px); } }
  .side-nav > div.b-bgroup {
    display: flex;
    flex-flow: column;
    row-gap: 16px; }
  .side-nav svg {
    transition: all ease-in-out 0.4s;
    transition-delay: 0s;
    --c-user-stroke:color-mix(in srgb, var(--nav-fg-color) 60%, transparent 40%);
    --c-user-fill: var(--c-user-stroke); }
  .side-nav .nav-button, .side-nav .nav-popout > .b-spec a {
    transition: all ease-in-out 0.2s;
    transition-delay: 0s; }
    .side-nav .nav-button:hover svg, .side-nav .nav-popout > .b-spec a:hover svg {
      --c-user-stroke: var(--nav-fg-color);
      --c-user-fill: var(--c-user-stroke); }
  .side-nav .nav-button {
    transition: all ease-in-out 0.4s;
    transition-delay: 0s; }
    .side-nav .nav-button svg {
      margin: 2px 0 0 2px; }

.side-nav .nav-button {
  position: relative;
  width: var(--nav-symbol-size);
  height: var(--nav-symbol-size);
  background-color: var(--nav-symbol-bg-color);
  border-radius: var(--default-border-radius);
  --c-glassborder-color: color-mix(in srgb, light-dark(var(--c-bg-white), var(--c-bg-black)) 75%, transparent 5%);
  --c-glassedge-color: color-mix(in srgb, gray 30%, transparent 70%);
  --c-glasssurface-color: color-mix(in srgb, black 80%, transparent 20%);
  border-left: 1px solid var(--c-glassborder-color);
  border-top: 1px solid var(--c-glassborder-color);
  box-shadow: 1px 1px 1px var(--c-glassedge-color), 1px 1px 2px var(--c-glasssurface-color);
  -webkit-backdrop-filter: blur(var(--default-glass-blur));
          backdrop-filter: blur(var(--default-glass-blur)); }
  .side-nav .nav-button > label {
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    pointer-events: all; }
  .side-nav .nav-button.burger {
    --nav-color: color-mix(in srgb, var(--nav-fg-color) 80%, transparent 20%);
    --nav-color-hover: var(--nav-fg-color); }
    .side-nav .nav-button.burger > label > span.ico > div {
      position: relative;
      opacity: 0;
      transition: transform 0.4s, background-color 0.4s; }
    .side-nav .nav-button.burger > label:hover > span.ico > div, .side-nav .nav-button.burger > label:focus-within > span.ico > div {
      background-color: var(--nav-color-hover); }
    .side-nav .nav-button.burger > label > span.ico.hl3 > div {
      background-color: var(--nav-color);
      border-color: transparent; }
    .side-nav .nav-button.burger > label:hover > span.ico.hl3 > div, .side-nav .nav-button.burger > label:focus-within > span.ico.hl3 > div, .side-nav .nav-button.burger > label > span.ico.hl3 > div {
      border: 0;
      margin-left: calc(1.2 * var(--nav-symbol-strength));
      margin-top: calc(1 * var(--nav-symbol-strength));
      width: calc(var(--nav-symbol-size) - 3.5 * var(--nav-symbol-strength));
      height: var(--nav-symbol-strength);
      left: 0;
      opacity: 1;
      transition: all ease-in-out 0.4s;
      transition-delay: 0s; }
    .side-nav .nav-button.burger > label:hover > span.ico.hl3 > div:nth-of-type(1), .side-nav .nav-button.burger > label:focus-within > span.ico.hl3 > div:nth-of-type(1), .side-nav .nav-button.burger > label > span.ico.hl3 > div:nth-of-type(1) {
      margin-top: calc(1.8 * var(--nav-symbol-strength)); }
    .side-nav .nav-button.burger > label:hover > span.ico.hl3 > div, .side-nav .nav-button.burger > label:focus-within > span.ico.hl3 > div {
      background-color: var(--nav-color-hover); }
    .side-nav .nav-button.burger > label > span {
      pointer-events: all;
      display: block;
      position: relative;
      top: 0px;
      width: var(--nav-symbol-size);
      height: var(--nav-symbol-size);
      margin-left: 3px; }
  .side-nav .nav-button.langsel > label, .side-nav .nav-button.ldmode > label {
    position: relative;
    top: 1px;
    left: 1px; }
    .side-nav .nav-button.langsel > label > svg:nth-of-type(2), .side-nav .nav-button.ldmode > label > svg:nth-of-type(2) {
      position: relative;
      opacity: 0;
      top: calc(var(--nav-symbol-size) * -1); }
  .side-nav .nav-button.gotop {
    --top-of-pg: var(--c-nav-alt-bg);
    background-image: linear-gradient(var(--top-of-pg) 0% var(--progress), transparent var(--progress) 100%);
    display: inline-block;
    overflow: hidden;
    animation: progress linear;
    animation-timeline: scroll();
    transition: all ease-in-out 0.4s;
    transition-delay: 0s; }
    @supports not (animation-timeline: scroll()) {
      .side-nav .nav-button.gotop {
        background: var(--nav-symbol-bg-color); } }
    .side-nav .nav-button.gotop > a > span {
      display: none; }
    .side-nav .nav-button.gotop > a svg {
      transform: rotate(var(--angle)); }
    .side-nav .nav-button.gotop:is(:link, :visited) {
      color: currentColor;
      text-decoration: none; }

.side-nav .nav-popout {
  position: absolute;
  display: flex;
  flex-flow: column;
  opacity: .5;
  right: calc(var(--nav-symbol-size) * -3);
  margin-top: calc(var(--nav-symbol-size) * -1 + 6px);
  width: 0px;
  height: 0px;
  overflow: hidden;
  transition: width ease-in-out 0.4s, height ease-in-out 0.4s, right ease-in-out 0.4s, padding ease-in-out 0.4s, opacity ease-in-out 0.2s;
  border-radius: var(--default-border-radius);
  --c-glassborder-color: color-mix(in srgb, light-dark(var(--c-bg-white), var(--c-bg-black)) 75%, transparent 5%);
  --c-glassedge-color: color-mix(in srgb, gray 30%, transparent 70%);
  --c-glasssurface-color: color-mix(in srgb, black 80%, transparent 20%);
  border-left: 1px solid var(--c-glassborder-color);
  border-top: 1px solid var(--c-glassborder-color);
  box-shadow: 1px 1px 1px var(--c-glassedge-color), 1px 1px 2px var(--c-glasssurface-color);
  -webkit-backdrop-filter: blur(var(--default-glass-blur));
          backdrop-filter: blur(var(--default-glass-blur));
  background-color: transparent;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7));
  background-repeat: no-repeat;
  background-size: cover; }
  .side-nav .nav-popout p {
    color: var(--nav-fg-link-color); }
  .side-nav .nav-popout > div.b-spec {
    display: flex;
    flex-flow: column;
    row-gap: 10px; }
    .side-nav .nav-popout > div.b-spec > a svg {
      --c-user-stroke:var(--nav-fg-link-color);
      --c-user-fill: var(--nav-fg-link-color); }
    .side-nav .nav-popout > div.b-spec > a.level-0 > div, .side-nav .nav-popout > div.b-spec > a.level-1 > div {
      width: 100%;
      min-height: 20px;
      height: 20px;
      overflow-x: clip;
      text-overflow: ellipsis; }
      .side-nav .nav-popout > div.b-spec > a.level-0 > div > span, .side-nav .nav-popout > div.b-spec > a.level-1 > div > span {
        position: relative;
        top: -4px;
        color: var(--nav-fg-link-color);
        font-weight: 500;
        letter-spacing: .2ch;
        line-height: 4ch;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-right: 1rem;
        transition: all ease-in-out 0.2s;
        transition-delay: 0s; }
      .side-nav .nav-popout > div.b-spec > a.level-0 > div:hover > span, .side-nav .nav-popout > div.b-spec > a.level-1 > div:hover > span {
        font-weight: 700; }
      .side-nav .nav-popout > div.b-spec > a.level-0 > div:hover svg, .side-nav .nav-popout > div.b-spec > a.level-1 > div:hover svg {
        --c-user-stroke:var(--nav-fg-link-color);
        --c-user-fill: var(--nav-fg-link-color); }
    .side-nav .nav-popout > div.b-spec > a.level-0 {
      white-space: nowrap; }
      .side-nav .nav-popout > div.b-spec > a.level-0 > div {
        min-height: 30px;
        height: 30px;
        padding-left: .5rem;
        width: 100%; }
        .side-nav .nav-popout > div.b-spec > a.level-0 > div > span {
          font-weight: 300; }
        .side-nav .nav-popout > div.b-spec > a.level-0 > div:hover > span {
          font-weight: 700; }
        .side-nav .nav-popout > div.b-spec > a.level-0 > div > span > i > b {
          color: var(--nav-fg-link-color);
          font-weight: 700;
          text-transform: uppercase;
          font-style: italic; }
    .side-nav .nav-popout > div.b-spec > a.level-1 > div {
      height: -moz-fit-content;
      height: fit-content; }
      .side-nav .nav-popout > div.b-spec > a.level-1 > div > span {
        padding-left: 2.9rem;
        padding-right: 1.5rem; }
        .side-nav .nav-popout > div.b-spec > a.level-1 > div > span > svg, .side-nav .nav-popout > div.b-spec > a.level-1 > div > span > img {
          position: relative;
          top: 6px; }
        .side-nav .nav-popout > div.b-spec > a.level-1 > div > span > label {
          position: relative;
          top: 4px;
          color: var(--nav-fg-link-color);
          padding: 4px; }
      .side-nav .nav-popout > div.b-spec > a.level-1 > div > img {
        position: relative;
        top: 4px;
        padding: 8px; }

input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.burger > label > span.ico.hl3 > div {
  background-color: var(--nav-color);
  border-color: transparent; }

input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.burger > label:hover > span.ico.hl3 > div, input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.burger > label:focus-within > span.ico.hl3 > div, input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.burger > label > span.ico.hl3 > div {
  border: 0;
  width: calc(var(--nav-symbol-size) - 3.5 * var(--nav-symbol-strength));
  height: var(--nav-symbol-strength);
  left: 0;
  opacity: 1;
  transition: all ease-in-out 0.4s;
  transition-delay: 0s; }

input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.burger > label:hover > span.ico.hl3 > div:first-of-type, input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.burger > label:focus-within > span.ico.hl3 > div:first-of-type, input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.burger > label > span.ico.hl3 > div:first-of-type {
  transform: translateY(calc(var(--nav-symbol-strength) * 2)) rotateZ(45deg); }

input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.burger > label:hover > span.ico.hl3 > div:nth-of-type(3), input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.burger > label:focus-within > span.ico.hl3 > div:nth-of-type(3), input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.burger > label > span.ico.hl3 > div:nth-of-type(3) {
  transform: translateY(calc(var(--nav-symbol-strength) * -2)) rotateZ(-45deg); }

input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.burger > label:hover > span.ico.hl3 > div:nth-of-type(2), input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.burger > label:focus-within > span.ico.hl3 > div:nth-of-type(2), input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.burger > label > span.ico.hl3 > div:nth-of-type(2) {
  width: 0;
  left: calc(var(--nav-symbol-size) / 2 - var(--nav-symbol-strength)); }

input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.burger > label:hover > span.ico.hl3 > div, input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.burger > label:focus-within > span.ico.hl3 > div {
  background-color: var(--nav-color-hover); }

input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.nav-popout,
input[type=checkbox]#b-langsel:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-lang > div.nav-popout {
  opacity: 1;
  width: 92vW;
  font-size: 90%;
  z-Index: 9999;
  overflow-x: hidden;
  top: 70px;
  right: 0;
  padding: 1rem;
  height: -moz-fit-content;
  height: fit-content; }
  @media (min-width: 620px) {
    input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.nav-popout,
    input[type=checkbox]#b-langsel:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-lang > div.nav-popout {
      font-size: 100%; } }
  @media (min-width: 620px) {
    input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.nav-popout,
    input[type=checkbox]#b-langsel:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-lang > div.nav-popout {
      width: -moz-fit-content;
      width: fit-content;
      right: calc(var(--nav-symbol-size) + 10px); } }
  input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu > div.nav-popout span,
  input[type=checkbox]#b-langsel:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-lang > div.nav-popout span {
    display: inline;
    text-overflow: ellipsis;
    width: 200px;
    max-width: 200px; }

input[type=checkbox]#b-contact-me:checked ~ nav.nav-main > div.side-nav > div.b-social div.nav-popout#contact,
input[type=checkbox]#b-social-share:checked ~ nav.nav-main > div.side-nav > div.b-social > div.nav-popout#social-share {
  opacity: 1;
  width: 92vW;
  font-size: 65%;
  right: calc(var(--nav-symbol-size) + 10px);
  padding: 1rem;
  height: -moz-fit-content;
  height: fit-content; }
  @media (min-width: 400px) {
    input[type=checkbox]#b-contact-me:checked ~ nav.nav-main > div.side-nav > div.b-social div.nav-popout#contact,
    input[type=checkbox]#b-social-share:checked ~ nav.nav-main > div.side-nav > div.b-social > div.nav-popout#social-share {
      font-size: 80%; } }
  @media (min-width: 620px) {
    input[type=checkbox]#b-contact-me:checked ~ nav.nav-main > div.side-nav > div.b-social div.nav-popout#contact,
    input[type=checkbox]#b-social-share:checked ~ nav.nav-main > div.side-nav > div.b-social > div.nav-popout#social-share {
      font-size: 100%;
      width: -moz-fit-content;
      width: fit-content; } }
input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-lang .nav-button, input[type=checkbox]#b-burger:checked ~ nav.nav-main > div.side-nav > div.b-social .nav-button {
  transition: all ease-in-out 0.4s;
  transition-delay: 0s;
  transform: rotateY(90deg) rotateX(-90deg); }

input[type=checkbox]#b-langsel:checked ~ nav.nav-main > div.side-nav > div.b-bgroup > div.b-menu .nav-button, input[type=checkbox]#b-langsel:checked ~ nav.nav-main > div.side-nav > div.b-social .nav-button {
  transition: all ease-in-out 0.4s;
  transition-delay: 0s;
  transform: rotateY(90deg) rotateX(-90deg); }

input[type=checkbox]#b-contact-me:checked ~ nav.nav-main > div.side-nav > div.b-bgroup .nav-button,
input[type=checkbox]#b-social-share:checked ~ nav.nav-main > div.side-nav > div.b-bgroup .nav-button {
  transition: all ease-in-out 0.4s;
  transition-delay: 0s;
  transform: rotateY(90deg) rotateX(-90deg); }

input[type=checkbox]#b-contact-me:checked ~ nav.nav-main > div.side-nav .nav-button.social-share,
input[type=checkbox]#b-social-share:checked ~ nav.nav-main > div.side-nav .nav-button.contact {
  transition: all ease-in-out 0.4s;
  transition-delay: 0s;
  transform: rotateY(90deg) rotateX(-90deg); }

input[type=checkbox]#b-ldmode ~ nav.nav-main > div.side-nav div.b-bgroup .nav-button.ldmode > label > svg:nth-of-type(1) {
  opacity: 1; }

input[type=checkbox]#b-ldmode ~ nav.nav-main > div.side-nav div.b-bgroup .nav-button.ldmode > label > svg:nth-of-type(2) {
  opacity: 0; }

input[type=checkbox]#b-ldmode:checked ~ nav.nav-main > div.side-nav div.b-bgroup .nav-button.ldmode > label > svg:nth-of-type(1) {
  opacity: 0; }

input[type=checkbox]#b-ldmode:checked ~ nav.nav-main > div.side-nav div.b-bgroup .nav-button.ldmode > label > svg:nth-of-type(2) {
  opacity: 1; }

input.hidden_pseudo {
  display: none; }

label.lightdark {
  --main-color: light-dark(var(--light-color), var(--dark-color));
  --bg-color: light-dark(var(--dark-color), var(--light-color));
  --shd-color: var(--c-shadow);
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  cursor: pointer;
  background-color: var(--bg-color);
  border-radius: 50%;
  border: 1px solid var(--main-color);
  box-shadow: 2px 2px var(--shd-color);
  transition: all ease-in-out 0.4s;
  transition-delay: 0s; }
  label.lightdark:active {
    box-shadow: 0px 0px var(--shd-color);
    transform: translate(3px, 3px); }
  label.lightdark > input {
    z-index: 10;
    opacity: 0; }
    label.lightdark > input ~ svg {
      position: relative;
      top: -16px;
      left: 2px; }
      label.lightdark > input ~ svg:first-of-type {
        display: none; }
      label.lightdark > input ~ svg:last-of-type {
        display: block; }
    label.lightdark > input:checked ~ svg:first-of-type {
      display: block; }
    label.lightdark > input:checked ~ svg:last-of-type {
      display: none; }

.pgcontent h1,
.panel_gallery h1,
.panel-scroll h1,
.pg_box h1 {
  padding-top: 1em;
  font-size: 1.6rem;
  font-weight: 600; }

.pgcontent h2,
.panel_gallery h2,
.panel-scroll h2,
.pg_box h2 {
  padding-top: .6em;
  font-size: 1.2rem;
  font-weight: 400;
  font-style: italic; }

.pgcontent h3,
.panel_gallery h3,
.panel-scroll h3,
.pg_box h3 {
  padding-top: .4em;
  padding-bottom: .4em; }

.pgcontent p,
.panel_gallery p,
.panel-scroll p,
.pg_box p {
  font-weight: 400;
  padding-bottom: .5em;
  letter-spacing: .10ch;
  line-height: 1.4em; }

.a_default {
  color: inherit;
  padding-left: .1rem;
  text-decoration: none;
  transition: all ease-in-out 0.4s;
  transition-delay: 0s; }
  .a_default:before {
    cursor: pointer;
    padding-right: .5rem;
    content: "▶ "; }
  .a_default:hover {
    font-weight: 600; }

svg {
  --w-icn-svg: 16px;
  --h-icn-svg: 16px; }
  svg.template {
    display: none; }
  svg.svg-icon {
    --stroke-color: light-dark(var(--light-color), var(--dark-color));
    --fill-color: light-dark(var(--light-color), var(--dark-color));
    stroke: transparent;
    fill: transparent;
    width: var(--w-icn-svg);
    height: var(--h-icn-svg);
    /*
        &.bold {
            stroke-width: 4.5;
        }
        // PIK TODO icon alle auf stroke umbauen !
        &.fill {
            fill: light-dark(var(--light-color), var(--dark-color));
        }
        &.only-fill {
            fill: light-dark(var(--light-color), var(--dark-color));
            //fill: light-dark(var(--dark-color), var(--light-color));
            stroke: light-dark(var(--light-color), var(--dark-color));
            //fill: red;
            //stroke:pink;
            stroke-width: 0;
        }
        &.stroke-fill {
            fill: light-dark(var(--dark-color), var(--light-color));
            stroke: light-dark(var(--light-color), var(--dark-color));
            //fill: red;
            //stroke:pink;
            //stroke-width: 0;
        }
        */ }
  svg.sz-20 {
    --w-icn-svg: 20px;
    --h-icn-svg: 20px; }
  svg.sz-24 {
    --w-icn-svg: 24px;
    --h-icn-svg: 24px; }
  svg.sz-28 {
    --w-icn-svg: 28px;
    --h-icn-svg: 28px; }
  svg.sz-32 {
    --w-icn-svg: 32px;
    --h-icn-svg: 32px; }
  svg.sf, svg.f {
    fill: var(--fill-color); }
  svg.sf, svg.s {
    stroke: var(--stroke-color);
    stroke-width: 1; }
  svg.s-halfstroke {
    stroke-width: .5; }
  svg.s-quarterstroke {
    stroke-width: .25; }
  svg.s-2 {
    stroke-width: 2; }
  svg.s-3 {
    stroke-width: 3; }
  svg.s-4 {
    stroke-width: 4; }
  svg.s-6 {
    stroke-width: 6; }
  svg.ts-07 {
    stroke: color-mix(in srgb, var(--stroke-color) 70%, transparent 30%); }
  svg.tf-07 {
    fill: color-mix(in srgb, var(--stroke-color) 70%, transparent 30%); }
  svg.lendbutt {
    stroke-linecap: butt; }
  svg.lendsquare {
    stroke-linecap: square; }
  svg.r-45 {
    transform: rotate(45deg); }
  svg.r-90 {
    transform: rotate(90deg); }
  svg.r-135 {
    transform: rotate(134deg); }
  svg.r-180 {
    transform: rotate(180deg); }
  svg.r-225 {
    transform: rotate(225deg); }
  svg.r-270 {
    transform: rotate(270deg); }
  svg.sc {
    stroke: var(--c-user-stroke); }
  svg.fc {
    fill: var(--c-user-fill); }

div.tsvgname {
  padding: 2rem;
  display: flex;
  background-color: white;
  /*
    & > * {
        display: inline;
    }
    & > h1 {
        display:inline-block;
    }
        */ }
  div.tsvgname > svg {
    --stroke-color: green;
    --fill-color: magenta;
    --stroke-width: 1.0;
    padding-left: 2rem;
    stroke: transparent;
    fill: transparent;
    stroke-linecap: round;
    stroke-linejoin: round; }
    div.tsvgname > svg.sf, div.tsvgname > svg.f {
      fill: var(--fill-color); }
    div.tsvgname > svg.sf, div.tsvgname > svg.s {
      stroke: var(--stroke-color); }
    div.tsvgname > svg.s-halfstroke {
      stroke-width: .5; }
    div.tsvgname > svg.s-quarterstroke {
      stroke-width: .25;
      stroke: magenta; }
    div.tsvgname > svg.s-2 {
      stroke-width: 2; }
    div.tsvgname > svg.s-3 {
      stroke-width: 3; }
    div.tsvgname > svg.s-4 {
      stroke-width: 4; }
    div.tsvgname > svg.s-6 {
      stroke-width: 6; }
    div.tsvgname > svg.lendbutt {
      stroke-linecap: butt; }
    div.tsvgname > svg.lendsquare {
      stroke-linecap: square; }
    div.tsvgname > svg.r-45 {
      transform: rotate(45deg); }
    div.tsvgname > svg.r-90 {
      transform: rotate(90deg); }
    div.tsvgname > svg.r-135 {
      transform: rotate(134deg); }
    div.tsvgname > svg.r-180 {
      transform: rotate(180deg); }
    div.tsvgname > svg.r-225 {
      transform: rotate(225deg); }
    div.tsvgname > svg.r-270 {
      transform: rotate(270deg); }