/*

          _(_)_
         (_)@(_)  dead.garden
         – (_)  
         \ /
          |–
       ,~~i~~.
      /  _    )      _____
    ( ) ( )  /    __/ _)_ \____
      /\    (    (o__/   \__)__)
      ' ' '
 Welcome to the source code <3          



*/




/* linja-pona /*/

@font-face {
  font-family: linja-pona;
  src: url('fonts/linja-pona-4.2.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
.linja-pona {
  font-family: linja-pona!important;text-decoration:none!important;
  font-feature-settings: "liga" 1, "clig" 1, "calt" 1, "kern" 1, "mark" 1;
  text-rendering: optimizeLegibility;
}
.icon { font-size:2em;
   }

@media screen and (max-width:1200px) { .icon {padding-left:.5em}}
/* FONTS */

@font-face {
 font-family:Jost;
 src: url('fonts/Jost-400-Book.ttf');

}
@font-face {
 font-family:Jost;
 src: url('fonts/Jost-500-Medium.ttf');
font-weight:bold; }
@font-face {
 font-family:Jost;
 src: url('fonts/Jost-400-BookItalic.ttf');
font-style: italic;}

@font-face {
 font-family:Ubuntu;
 src: url('fonts/Ubuntu-R.ttf');

}
@font-face {
 font-family:Ubuntu;
 src: url('fonts/Ubuntu-B.ttf');
font-weight:bold; }
@font-face {
 font-family:Ubuntu;
 src: url('fonts/Ubuntu-RI.ttf');
font-style: italic;}
/*
@font-face {
 font-family:Montserrat;
 src: url('fonts/Montserrat-Regular.ttf');
font-weight:bold;
}*/


@font-face {
 font-family:UbuntuMono;
 src: url('fonts/UbuntuMono-R.ttf');

}
@font-face {
 font-family:UbuntuMono;
 src: url('fonts/UbuntuMono-B.ttf');
font-weight:bold; }


@font-face {
 font-family:Montserrat;
 src: url('fonts/Montserrat_Light.otf');
 }


@font-face {
 font-family:OpenDyslexic;
 src: url('fonts/OpenDyslexic-Bold.woff2');
font-weight:bold;
}
@font-face {
 font-family:OpenDyslexic;
 src: url('fonts/OpenDyslexic-Regular.woff2');
 }
@font-face {
 font-family:OpenDyselxic;
 src: url('fonts/OpenDyslexic-Italic.woff2');
font-style: italic;}



@font-face {
 font-family:Redaction;
 src: url('fonts/Redaction-Regular.woff2');

}
@font-face {
 font-family:Redactionpx;
 src: url('fonts/Redaction_20-Regular.woff2');

}
@font-face {
 font-family:Redaction;
 src: url('fonts/Redaction-Bold.woff2');
font-weight:bold
}

@font-face {
 font-family:Redaction-Italic;
 src: url("fonts/Redaction-Italic.woff2");
}
@font-face {
 font-family:Bricolage;
 src: url('/fonts/BricolageGrotesque-Regular.woff2');

}
@font-face {
 font-family:Bricolage;
 src: url('/fonts/BricolageGrotesque-Medium.woff2');
font-weight:500
}

@font-face {
 font-family:Bricolage;
 src: url('/fonts/BricolageGrotesque-Bold.woff2');
font-weight:Bold
}

@font-face {
 font-family:Bricolage;
 src: url('/fonts/BricolageGrotesque-ExtraBold.woff2');
font-weight:800
}


@font-face {
 font-family:Bricolage;
 src: url('/fonts/BricolageGrotesque-Light.woff2');
font-weight:100
}
*/


@font-face {
 font-family:Twobit;
 src: url('/fonts/Twobit.otf');}


@font-face {
 font-family:Checkbook;
 src: url('/fonts/checkbook.ttf');}





/* VARS */
:root, ::backdrop {
--sans: Ubuntu, Montserrat, Jost, DejaVu, Arial, Helvetica,  sans-serif;
--mono: UbuntuMono, JetBrainsMono, JetBrainsMobile, monospace;
--serif:  Bricolage, Redaction, Arial, Helvetica, Ubuntu, sans-serif;
--serifb:  Bricolage, Twobit, Redaction-Bold, Arial, Helvetica, Ubuntu, sans-serif;
  --grad:linear-gradient(to left, var(--darkpink), var(--darkyellow), var(--darkblue));  
  --grad2:linear-gradient(to left, var(--darkblue), var(--darkpink), var(--darkyellow));  
  --grad3:linear-gradient(to left, var(--darkyellow), var(--darkblue), var(--darkpink));  

  --svg:initial;
  --text:#101010;
  --link:#101010;   
  --linkbg:#97ce9e;
  --darkgrey:#efefef;
  --lightgrey:#fbfbfb;
  --pink: #ffcff9;
  --yellow: #f9ffcf;
  --blue: #cff9ff;
  --darkpink:#C23DB0;
  --darkyellow: #bdcb5b;
  --darkblue: #5bbdcb;
  --linkshadow:1px -1px}
@media (prefers-color-scheme: dark) {
:root, ::backdrop {
--serifb:Bricolage, Twobit, Redaction, Arial, Helvetica, Ubuntu, sans-serif;
--letterspacing:.01em;
--wordspacing:.02em;
  --svg:invert(100%);
  --text:#eee;
 --antitext:#101010;
  --link:#eee;   
  --darkgrey:#2a2a2a;
  --lightgrey:#141414;
  --pink:#BE3CAD;
  --yellow: #bdcb5b;
  --blue: #5bbdcb;
  --darkpink:#3e1c3a;
  --darkblue: #1c3a3e;
  --darkyellow: #3a3e1c;
  --grad:linear-gradient(to left, var(--pink), var(--yellow), var(--blue));  
  --linkshadow:-1px -1px}


}

::selection {background:var(--darkblue);}
* {margin:unset;scrollbar-color:var(--darkpink) var(--lightgrey);}
body {background:var(--lightgrey);color:var(--text);letter-spacing:var(--letterspacing);word-spacing:var(--wordspacing);font-family:var(--sans);
hyphenate-character:'⹝';hyphens:manual;
  font-size:1.075rem;
  line-height: 1.3;
display:flex;flex-direction:column;min-height:100vh;box-sizing:border-box ; overflow-x:clip;
/*
  background-image: linear-gradient(var(--darkpink) 1px, transparent 1px);  background-size: 100% .666rem;*/

}
header, footer {/*background:var(--lightgrey)*/; margin:auto;
padding:3vh;color:var(--link);width:100vw;box-sizing:border-box; }
header, footer {max-width:60vw;padding:0;position:relative}
main {width:60vw; margin:2rem auto ;flex:1; }

footer {padding-top:1rem;margin-bottom:12px}

@media screen and (max-width:1200px) {
main, footer {width:90vw;}
/*main {margin:2rem auto}*/
}
/* ------------------ */
/* TAGS */h2 a {padding:0!important}
h1, h2, h3, h4 {
font-family:var(--serif);
/*letter-spacing:.1rem;
 */}
/*h1 {line-height:3.6rem; font-size:3rem; margin-bottom:1rem}
h2 {font-size: 1.75rem; margin-top:.75rem}
h3 {margin-top:1.25rem}

*/ h2 {
  line-height:1;
padding-top:.7rem;
font-size:2.5rem;
margin:1rem 0
}

h3 {
  line-height: 1.25;
  padding-top: 1rem;
  margin-bottom: .2rem;
font-size:1.5rem;
 }

/* Aligns to 36px */
h4 {
  line-height: .9;
  padding-top: 12px;
  margin-bottom: 8px;
font-size:1.2rem; 
/*letter-spacing:.2rem;word-spacing:.3rem ; font-variant: small-caps;*/}

/* Aligns to 36px */
h5 {
  font-size: 1rem;
  line-height: 1.5;
}
/* Aligns to 36px */
h6 {
  font-size: 16px;
  line-height: 1.5;
  padding-top: 9px;
  margin-bottom: 3px; }

.text, blockquote, p {
  margin:.33rem 0 1.6rem 0;
line-height:1.6 ;
font-feature-settings:"zero" 1, "clig" 1;
}

h4,  h5, blockquote {margin:12px 0.1rem 12px 0.1rem;}
ul, blockquote, table, .blogpost,  p, details, ol {max-width:60vw;;}
.index ul, .index blockquote, .index .blogpost, .index  p {max-width:40vw;}
/*p {line-height:2rem;margin:2rem 0.1rem 0.125rem 0.1rem}*/
table {width:60vw}
@media screen and (max-width:1200px) {
ul, blockquote, p, .blogpost {max-width:unset}
.index ul, .index blockquote, details, ol, .index p, .index .blogpost, header, footer, table {max-width:unset;}
table {width:unset;}
}
ol {list-style-type: decimal; list-style-position:inside;padding:1.5rem 0}
ol li::marker {font-weight:bold}
ul {padding-left:20px; margin:1.5rem 0}
ul li {all:revert;list-style-type:"> ";line-height:1.5rem}
.noli li, footer li {list-style-type:none}
img {max-width:100%} 
hr {border:none;}
iframe {border:none; margin: 0em 1em 1em 1em}
blockquote {max-width:52vw;border-left:3px groove var(--text);padding: 12px 1.5rem;background:var(--darkgrey)}
blockquote p {margin:unset}
@media screen and (max-width:1200px) {
blockquote {max-width:unset }
}

.folder table {margin-left:-2rem}
table {border:3px solid var(--text)}
table th {border-bottom:3px solid var(--text);}
tr:nth-child(even) {background:var(--darkgrey)}
table td {width:33%;text-align:center;line-height:2rem}
details {padding-top: 1em; }
summary {font-weight:bold;}
/*details pre {padding-right:1.1em; font-size: 1rem;}*/
@media only screen and (max-width: 900px) {
details {width:unset}
}
/*details::last-child {border-bottom:2px groove !important}
*/


/* NAV */


.hamburger img, .hamburger input {display:none}
nav {margin:auto}
nav ul {;padding-left:unset;margin-top:12px}
nav ul li {all:unset;display:table-cell;list-style-type:none;
border-right:1em transparent solid;}
#menu {position:absolute; right:0;bottom: .8rem;
margin: 21px 0; }
.collapse li {display:table-cell!important;list-style-type:none;
border-right:1em transparent solid;line-height:auto}



@media screen and (max-width: 900px) {
.collapsing {transition:0.3s;bottom:0;} 
.collapse {visibility: collapse;}
.collapsing, .show  {visibility: visible; background:var(--darkgrey);} 

#menu {margin-top:0;top:0;position:fixed;width:100vw;height:100vh;z-index:1;padding-top:2em;font-size:2em;}
#menu li {display:list-item!important;width:80vw;margin:auto}
nav {margin-bottom:2em;}


.hamburger img, .hamburger input {
visibility:visible; position: absolute;
  display: block; 
  height: 2.5em;
  width: 2.5em;
top:3.5em;
  right: 1.5em;
margin:0;
z-index:2;
  cursor: pointer;
}



.hamburger input {  opacity:0;z-index: 200;}
.hamburger img {position:fixed;}
  /**/
/*  	nav ul:last-child::before {position:unset!important; content:'\2630'; font-size:2em}
	nav ul:last-child{height:2.5em; overflow:hidden;text-align:right;right:9vw;}	
	nav ul:last-child:hover {height:auto;background:var(--lightgrey);}*/
}




/* INDEX */


/*.starthead {display:flex; gap:0}*/
.starthead h1 {/*max-width:70%;margin:auto;*/;white-space:nowrap;}
@media screen and (max-width:1200px) {
.starthead h1 {max-width:unset}
}


.starthead h1 img {height:.8em; filter:var(--svg)}
li img {margin-bottom:-5px}
.funkyli {position:relative; /*font-family:var(--mono)*/}
.funkyli li,  .feed .feed-item-title  {padding-left:1em;padding-bottom:.5rem;/*font-size:0.9em*/}
.funkyli li::before{
  content: "";
  height: 2rem; filter:var(--svg);
  width: 2rem;
  display: block;
  position:absolute; left:1vw;
  margin-left: -1em;
  margin-right: 1em;
  margin-top:-2px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
}

.yesul li::before {
  background-image: url('img/smiley.svg');
}

.noul li::before {
  background-image: url('img/frowney.svg');
}



@media screen and (max-width:1200px) { .funkyli 
li::before {left:1.1em} footer {border-top:3px 
solid;} /*footer .flex {display:;}*/
h1 {white-space:pre-wrap; word-wrap:break-word;font-weight:800}
}
footer div {flex:50%;margin:0}
.legal {text-align:right}
footer ul {padding-left:0px;list-style-type:none ;}
/*footer div div:nth-child(2) {padding-left:1vw; border-left: 1.5px solid var(--text);}*/
footer div {width:60vw;margin:auto;}
@media screen and (max-width:1200px) {

footer div {padding-left:0!important}
footer div:first-child {width:95vw}
footer p {max-width:50vw;} footer p:first-child {max-width:unset}
}

header a, footer a {color:var(--link);padding:5px 1px}
header a:hover, footer a:hover {text-decoration:none}
input {border:none;font-size:inherit;font-family:var(--sans)}
main a, input, main a:visited, .h-card a {text-decoration:none;    -webkit-background-clip: text;-moz-background-clip: text; background-clip: text; padding-right:1px;
color: transparent; ;background-image:var(--grad);
font-weight:bold;   text-shadow: var(--linkshadow) var(--text)}
main a:hover, .h-card a:hover {text-decoration:underline}
input:hover {text-decoration:underline}
main a:visited {font-weight:normal!important;text-decoration:line-through!important}
 /*pre {font-family:var(--funkymono); font-size:1.7rem; letter-spacing: .1rem;}
*/code, pre {white-space:pre-wrap; word-wrap:break-word; margin-bottom:2rem;/*}
code {*/font-family:var(--mono);font-size:1.2rem}
/* CLASSES */ 
.feed div { width:0px; height:0px; visibility:hidden} 
.feed .feed-item-title::before {
  content: "";
  height: 1.4em; filter:var(--svg);
  width: 1.8em;
  display: block;
 float:left;
  margin-left: -1em;
  margin-right: 0.2em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  transition: background-size 0.3s;
  -webkit-transition: background-size 0.3s;
background-image:url('/img/book.svg')
}
.feed-title {height:0px;overflow:hidden}
.feed .feed-item-title a
{display:list-item;margin:unset;position:relative;list-style:none}
/*list-style-position:inside; list-style-type:"📚  "} */


.righty {position:fixed;bottom:200px;z-index:0;}

@media screen and (max-height:700px) {.righty {position:absolute;bottom:unset;margin-top:-4em}}


dfn, abbr {font-style:normal;text-decoration: underline;text-decoration-style: wavy;}

/* HCARD*/
.h-card::before {content: "";
width:25vw;height:74px;
margin-top:-70px; 
  display: block; position:absolute;
background-image: url('/img/hcard.svg');
/* background-position: center;
*/  background-repeat: no-repeat;
  background-size: 100%;
  -webkit-transition: background-size 0.3s;
filter:var(--svg);

}

.h-card {
font-kerning: none; padding-bottom:20px;z-index:1; flex:25vw; padding: 0 2rem; border:3px solid;/*margin-bottom:-5vh;/*background:*/}


.u-url img {padding:.3rem .1rem .1rem .5rem}
.h-card .u-photo
{width:1.9rem;height:1.9rem; } .h-card ul 
{list-style:none;} 
.h-card .p-note {padding-top:1em}


.h-entry .h-card {all:unset}
.h-entry .h-card::before {all:unset}


@media screen and (max-width:1200px) {
.h-card {margin-bottom:0; border:inherit}
.righty {text-align:unset}
.h-card {flex:100vw; width:revert;}
footer p {width:unset;max-width:unset;/*margin:unset auto*/}
.h-card::before {all:unset}
#about {height:unset} 
}
.heading, h1 {
font-family:var(--serifb);
 line-height:5rem;
font-size:5rem;
font-weight:800;
margin-bottom:4rem;margin-top:2rem; 
}

.rel, .feed .feed-item-title  {position:relative}
.flex {display:flex;gap:3em; }
.flex .half {flex:50%}
@media screen and (max-width:950px) {
.heading, h1 {font-size:3rem;line-height:2.3rem}
.flex {display:block}
h2 {font-size:2rem}}
.blogposts .blogpost{border-left:3px solid var(--text);padding:2rem;
margin:2em 0; background: var(--darkgrey); 
}
.blogposts .blogpost::after {content:""!important}
.blogposts .bcat {margin-right:1em}
/*.blogposts .blogpost {background:var(--grad);color:var(--antitext)}
.blogpost a {text-decoration:none!important;padding:0;width:100px;height:400px;}*/


/* BLOG SECTION 
.blogpost h3 + p, h4 + p, h5 + p, h2 +p, blockquote + p {text-indent:0}
.blogpost p {text-indent:1rem}

.reply + p:nth-of-type(1)::first-letter{vertical-align:baseline;font-family:var(--serif);font-size:2rem}
.blogpost  p:nth-of-type(2)::first-letter{vertical-align:baseline;font-family:var(--serif);font-size:2rem}
*/.blogposts .hatnote {height:0px !important;margin:0!important;padding:0!important; visibility:hidden;}
.hatnote p {font-style:italic;font-size:1rem;margin:unset;vertical-align:center;flex:5vw;}
.hatnote, .hintbox  {border:3px solid;max-width:60vw;  align-items: center;gap:3rem;background:var(--darkgrey);padding:1.5rem;margin-bottom:2rem;display:flex}
.hatnote img {filter:var(--svg);height:6rem}
@media screen and (max-width:1200px) {
.hatnote {max-width:100%}}


.subtitle {line-height:2.3;margin-top:0;}
.subtitle img {vertical-align:text-bottom}
.subtitle .p-author {display:inline-flex;height:2.5rem; background:var(--darkgrey);border:3px solid var(--darkgrey)}
.bcat {position:sticky;float:right;width:5em;text-align:center;border: 1px solid transparent;padding:.075rem;border-radius:50px;right:5vw;margin:1.6rem 0 .5rem 0}
li .bcat {float:none;margin-left:1em;padding:2px 5px;line-height:2em}
.tech {border-color:var(--blue);background:var(--darkblue)}
.personal {border-color:var(--pink);background:var(--darkpink)}
.other {border-color:var(--yellow);background:var(--darkyellow)}
.bookmark::before {content:'🔖️';padding-right:.66rem;}
.like::before {content:'❤️';padding-right:.66rem;}
.reply::before {content:'🗨️';padding-right:.66rem;}

#webmentions::before {content:"❤";text-align:center;display:block;}

#webmentions ul{margin-left:0px;padding-left:0}
#webmentions li{list-style-type:none;padding-bottom:1.6rem;}
a.source::after { content: '\A\A';     white-space: pre;}
#webmentions img 
{border-radius:90px;height:2rem;object-fit:cover} 

/* ANIMATIONS */



/* Typing animation */
/* displayig */

.typingbox {display:inline-block; height:3em; overflow:hidden;
padding:0px}
.typing {overflow:hidden;width:0;white-space:nowrap; ; animation: 3s typing
steps(40,end) forwards, 1s blinking infinite;margin-top:-40px;border-right:4px solid; border-right-color:transparent}
.typing:nth-child(2) {animation-delay:3s;}
.typing:nth-child(3) {animation-delay:6s;}
.typing:nth-child(4) {animation-delay:9s;}
.typing:last-child { animation:unset; animation: 3s typing-last steps(40,end) forwards, 1s blinking infinite;margin-top:unset;animation-delay:12s; }

/* animation */
@keyframes typing {0% {width:0;margin:0; } 20% {width:100%;margin:0; } 60% {width:100%;margin:0; }
99.99%{visibility:hidden;margin:0}}
@keyframes typing-last {0% {width:0;margin:0; } 50% {width:100%;margin:0; }
100%{visibility:visible;margin:0;width:100%}}

@keyframes blinking {0% {border-right-color:transparent}
50% {border-right-color:var(--text)}
100% {border-right-color:transparent}
}


/* NOW*/
.spotifyinnit {width:300px; overflow-x:scroll}
feed-title {visibility:hidden;margin-top:0;width:0px;height:0} .flexo img {max-width:80%;} .flexo div, .righty div {width:0px;height:0px;visibility:hidden} .flexo {display:grid;grid-template-columns: 0fr  1fr
0.2fr 0.8fr 1fr;}

@media screen and (min-width:1000px) {.flexo {grid-template-columns: 0 13vw 
0vw 10vw 15vw}
.spotifyinnit {width:450px}

}



/* Advent */
.flexy {display:flex; flex-wrap: wrap;}
.flexy img, .flexy div {max-width:30%}
.flexy div {padding:1rem}
.hl h3 {max-width:60%}
.hl {gap:1rem!important}
@media screen and (max-width:800px) { 
.flexy a {max-width:100%}
.flexy img, .flexy div {max-width:100%}
.hl h3 {max-width:unset}
}


/* Footer*/
.links img {height:2em;filter:var(--svg)}
.links img:hover { filter: invert(20%) sepia(50%) saturate(2476%) hue-rotate(880deg) brightness(140%) contrast(100%); 
}


/* image log*/
.imglog  {
display: flex;
margin-top: 5%;
gap: 0.5em;
flex-wrap: wrap;
}

.polaroid {padding:1rem 2rem; border:3px solid
 var(--text); ;box-shadow: 0px 3px 5px var(--darkgrey); max-height:630px ;width:45%;overflow-y:scroll;overflow-x:show }

.polaroid img {background:#fff;  box-shadow: 0px
0px 9px #abababee; margin-top:1em;width:100%;
  object-fit: cover;}

.polaroid .feed-item-title {margin-top:-1em}
.polaroid div a {height:0;visibility:hidden;}
.imglog .polaroid {max-height:250px; padding: 1rem 1rem 5rem 1rem; border:3px solid var(--text);width:200px;float:none;
  object-fit: cover;box-shadow: 0px 3px 5px var(--darkgrey);position:relative;overflow:hidden}
.imglog .polaroid img {height:200px; width:200px;background:#fff;  box-shadow: 0px 0px 9px #abababee; margin-top:unset;
  object-fit: cover;}
.imglog .polaroid img:hover {filter:sepia(80%)}
.imglog .polaroid  .timestamp {text-align:right;position:absolute;z-index:-1;right:1.5em; z-index:0}
.imglog .polaroid details {left:1.5em;position:absolute;padding-right:40px;margin-left:-20px;padding-left:20px;height:210px;width:70%;
}
.imglog .polaroid details[open] {top:0;padding-top:2rem;background:var(--lightgrey);z-index:2;height:calc(300px - 2rem);width:80%;overflow-y:scroll}
.imglog .polaroid details[open] summary::before {}
.imglog .polaroid summary {list-style-type:none}
.imglog .polaroid summary::marker  {color:var(--lightgrey)}
.imglog .polaroid summary::before {content: "";
  height: 1.8em; 
  width: 1.8em;
  display: block;
  margin-left:-0.5rem;
  margin-top:-15px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  transition: background-size 0.3s;
  -webkit-transition: background-size 0.3s;
  background:url(/img/comment.svg);

}
.imglog .polaroid ul {padding:0px;} 
.imglog .polaroid ul li {padding:.2rem 0px;} 
@media screen and (max-width:700px) {
.polaroid {width:unset}
.imglog {display:block;  margin:auto}
.imglog .polaroid {margin:2em 0;width:70vw;height:calc(50vw + 5em)}
.imglog .polaroid img { width:100%; height: calc(50vw + 3em)}
.imglog .polaroid details {height: calc(50vw + 3em + 10px);width:70vw;}
}


/* ARCHIVE */
#timeline {border-left:2px solid var(--darkpink);}




/*.bloglist {border-left:2px solid;}*/
.bloglist li {margin-bottom:1em}


.time {font-size:0.8em}


/* ART */

.file {width:8rem;padding:1rem}
.file a {all:unset;}
.file p {text-align:center}
.file:hover {background:var(--pink)}
/*.dateinnit a {text-shadow:unset;color:var(--text);background-image:none;font-weight:normal;}
 .dateinnit {margin-bottom:1rem; font-family:var(--sans); font-size:1.2rem;padding:.5rem 1em; border:2px solid var(--text);width:fit-content}*/

/* RADIO */
.folder {padding-left:2.25rem}
.folder summary {list-style-type:none;position:relative}
.folder summary::before { content: "";
  height: 2rem; filter:var(--svg);
  width: 2rem;
  display: block;
  position:absolute; left:0;
  margin-left: -2.5rem;
	margin-top:-.25rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
background-image:url(/img/folderc.svg);
}
.folder[open] summary::before {background-image:url(/img/foldero.svg); trasition: background-image 2s}
.folder[open] .folder summary::before {background-image:url(/img/folderc.svg)}
.folder[open] .folder[open] summary::before {background-image:url(/img/foldero.svg)}
.folder[open] .folder[open] .folder summary::before {background-image:url(/img/folderc.svg)}
.folder[open] .folder[open] .folder[open] summary::before {background-image:url(/img/foldero.svg)}
.folder:last-of-type {margin-bottom:1rem}
@media screen and (max-width:900px) { .folder .folder {margin-left:-1.75rem}}

.fav {font-size:0;}
.fav img {height:100%;vertical-align:bottom}



/***************radio*/
.news {padding:3rem; border:3px solid var(--text); box-shadow:5px 3px 10px black;margin:2rem 0;}
.news h2,  .news h4 {font-family:Redaction}
.news h2 {text-transform:uppercase; font-size:3rem; }
.news h2, .news #date, .news div:last-child { text-align:center!important;width:auto!important}
.news #date {border:3px double var(--text);border-left:none;border-right:none}
.news div:last-of-type {border-top:3px double var(--text)}
.news p {text-align:justify;width:45%;}
.news .story  {display:flex;  flex-wrap: wrap; gap:10%}
.news .story h4 {width:100%;margin-top:2rem}
.radiosvg {float:right;text-align:center; width:45%;margin-top:2rem;margin-bottom:-5rem; border:3px solid;padding:.8rem;box-sizing:border-box}
.news .feed-item-title a, .news div:last-child a  {background-image:none!important; color:var(--text)!important;text-shadow:none}
.news audio {max-width:100%}

@media screen and (max-width:900px)
{
h1, .starhead {margin:0 auto}
.news {padding: 1.8rem;}
.news p {width:90%}
.news .story {display:block}
.radiosvg {float:none;border:none;width:auto;margin:auto}
.news .story h4 {margin-bottom:0}

}

#88x31 img { image-rendering: pixelated;}