:is(h1, h2, h3){
  color: var(--theme_000);
  font-family: custom; }


h4 {
  text-transform: uppercase;
  font-family: 'custom'; }


:is(p, i, small, li, td):not([none]) {
  word-break: break-word;
  color: light-dark(#222, #aaa);}


h1, h2, h3, h4, p { margin-block: 0; }


svg:not(:hover) {
  filter: drop-shadow( 0 0 2px light-dark(transparent, #000));
}




pre {
  overflow: auto;
  margin: 0; }


ul {
  margin: 0;
}

:is(header, footer) span {
  color: var(--span_c, var(--brand));
  background: var(--span_bg, #000);
  font-family: monospace;
  padding: 0 5px;
  border: 1px solid var(--span_c, var(--brand));
  border-radius: 3px;
  text-transform: uppercase;
}




center[css] {
  width: min(100% - var(--center_padding, 1em), var(--center_width, 1000px));
  min-width: 0;
  box-sizing: border-box;
  text-align: start !important;
  margin-inline: auto; 

  &:is([css="800"], ._800){--center_width: 800px} }
  
  center[css="padding"]{
    padding: 2em 10px 3em; }



svg[css] {
  filter: drop-shadow(0 0 3px #333);
  height: var(--svg-size);
  min-height: var(--svg-size);
  width: var(--svg-size);
  min-width: var(--svg-size); }



a[css] {
  font-weight: bold;
  color: unset;
  text-decoration: none; }
  a[css]:hover {
    color: var(--theme); }



span[css] {
  text-decoration: none;
  border-radius: 3px;
  font-size: 12px;
  line-height: 10px;
  padding: 3px 4px;
  background: var(--s_b_override, var(--theme_transparent_333));
  color: var(--s_c_override, var(--theme_fff));
  white-space: nowrap;
  font-family: monospace;
  height: min-content;
  width: max-content;}
  span[css="black"]{
    --s_b_override: #000 ;
    --s_c_override: #fff; }


section[css]{
  &:nth-of-type(even){ background: #00000030;}
  &[css="padding"]{ padding: 2em 10px;}
}


img:not([none]) {
  width: 100%;
  max-height: 350px;
  object-fit: contain;
  border-radius: 3px;}

@media (max-width: 800px){
  img[css] { max-width: none !important; }
  img[pc] { display: none;}
}



  hr[css]{
    margin: var(--hr_margin, 1em) 0;
    border: 0 dashed;
    border-width: 2px 0 0;
    width: -webkit-fill-available; }
  hr[transparent]{
    border-color: transparent; }



ul[grid]{
  position: relative;
  display: grid;
  gap:10px;
  grid: min-content / repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-flow: row dense;
  padding: 0;
  list-style: none;
}