.grid     { display: grid !important; /* width: fit-content;*/ }
.flex     { display: flex !important; grid-gap: 1em; align-items: baseline; width: fit-content; }
.hidden   { display: none !important; }
.conts    { display: contents !important; }
.auto     { width: fit-content !important; height: fit-content !important; min-height: unset !important; min-width: unset !important; margin: auto !important; }
.end      { place-items: end; }

.onAuto             { display: none; }
.auto > div         { display: none !important; }
.auto > div.onAuto  { display: block !important; }


.flex.abs           { width: auto; }


/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////////// ------   TOOLS   ------  ////////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */



.flex > *       { margin: auto; }
.flex .btn      { border: none; padding: unset; margin: unset; top: 0.2em; }
.flex .btn svg  { background-color: var(--textaction); padding: 0.35em; width: 2em; margin: auto; border-radius: 50%; }


svg:first-child:last-child { margin: 0; }

svg.reddot, svg.rednew       
                { position: absolute; right: 0 !important; opacity: 1 !important; z-index: 10; color: var(--notif); }
svg.reddot      { color: var(--notif) !important; padding: 0 0 0.7em 0.7em !important; -webkit-filter: drop-shadow(0px 0px 1px currentColor) !important; }
svg.rednew      { bottom: 0 !important; padding: 0 !important; width: 0.8em !important; background-color: transparent !important; margin: auto 0 0 auto !important; }

div.rednew                  { display: block; margin: auto; aspect-ratio: 1 / 1; width: fit-content; position: relative; min-width: unset !important; }
.rednew svg:first-of-type   { width: 2em; padding: 0.5em; border-radius: 50%; position: static; margin: auto; background-color: var(--white); color: var(--brown); }
.rednew svg:last-of-type    { position: absolute; bottom: 0 !important; top: auto; left: auto; right: 0; padding: 0 !important; width: 0.8em !important; background-color: transparent !important; color: var(--notif); -webkit-filter: drop-shadow(0px 0px 1px currentColor) !important; }

svg[nn=yes].rednew    { color: var(--turquoise); }


.trash          { margin: 3em auto 0; -webkit-filter: drop-shadow(1px 1px 4px var(--oops) ); }


.float            { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.3); display: grid; place-content: center; background-color: rgba(0,0,0,0.5); aspect-ratio: 1 / 1; border-radius: 50%; place-content: center; padding: 3em; width: 35em; margin: auto; }
.float .checks    { position: absolute; bottom: 3em; left: 0; right: 0; margin: auto; grid-column: 1 / -1; width: 12em; }
.float .close     { position: absolute; bottom: 45%; left: auto; right: 1rem; margin: 0; font-size: 2em; color: var(--action); }
.float input, .float select   { width: 4em; padding: 0.2em }
.float .time input            { width: 1.75em; font-size: 1.5em; }


.linkback       { position: absolute; top: 5em; left: 4em; z-index: 2; }
.linkback > *   { font-size: 0.7em; position: relative; }
.linkback > a   { color: var(--backlay) !important; }



/* /////////////////////////////////////////////////////// */
/*                                                         */
/* ///////////    ------     FLEX    ------     ////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */


.flex .oneline    { margin: auto !important; }
h1 + .flex        { margin-top: 1.5em; }


/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////// ------   ABSOLUTE / FIX   ------ ////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */


.central        { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: grid; place-content: center; aspect-ratio: 1 / 1; width: 10em; max-width: 10em; }
.central > *    { max-width: inherit; }


.cnr        { position: fixed; bottom: 0; left: 0; top: 0; right: 0; margin: auto; }
.cnr.mgn    { margin: 1rem; }
.cnr .close { position: absolute; z-index: 2; color: var(--action); top: inherit; bottom: inherit; left: inherit; right: inherit; width: 3em; padding: 1em; }

.br     { left: auto; right: 0; top: auto; bottom: 0; text-align: right; }
.bm     { left: auto; right:auto; top: auto; bottom: 0; text-align: center; }
.bl     { left: 0; right: auto; top: auto; bottom: 0; text-align: left; }
.tr     { left: auto; right: 0; bottom: auto; top: 0; text-align: right; }
.tm     { left: auto; right:auto; top: 0; bottom: auto; text-align: center; }
.tl     { left: 0; right: auto; bottom: auto; top: 0; text-align: left; }


.flex.abs.tr           { top: -0.5em; font-size: 0.8em; }

.card, .command  
            { display: block; position: absolute; bottom: auto; left: auto; top: auto; right: auto; color: var(--textaction); }

.card       { bottom: 5em; left: 5em; text-align: left; max-width: 30em; }
.card > *   { margin: 0;  }
.card [contenteditable]:empty { min-width: 12rem; }

.command    { bottom: 2em; right: 2em; text-align: right; max-width: 12em;  }

.command input[type] + label        { display: inline-block; background-color: rgba(0, 0, 0, 0.7); border-radius: 2em; padding: 0.5em; line-height: 0.8em; color:  var(--white); opacity: 1; margin: 0 0.5em; }
.command input[type] + label svg    { width: 1.3em; top: 0; }

#eggBox          {  }
.egg             { display: flex; width: fit-content; grid-gap: 1em; padding: 2em; }
.egg button      { display: contents; }
.egg svg         { opacity: 1 !important; }
.egg *:hover     { color: var(--lowlink) !important; }


.command #qrBox { max-width: 18em; }



.veil.bl  { background-image: linear-gradient(30deg, rgba(0, 0, 0, 0.9) 1.5em, rgba(0, 0, 0, 0.1) 33%); background-color: transparent; }

.fs .cnr  { padding: 5em 0 0 3em; max-width: 20vw; }



@media only screen and (max-width: 609px) {
  
  .card       { bottom: 0; left: 0; padding: 2rem; }
  .command    { bottom: 0; right: 0; padding: 2rem; }
  .fs .cnr    { padding: 5em 1.5em 0; max-width: unset; }

}


/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////////// ------   ANIMATE   ------ ///////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */


.blink          { animation: blink 3s linear infinite; -webkit-filter: drop-shadow(0px 0px 4px currentColor); }
 
.close.rot      { animation: spin 5s linear infinite; -webkit-filter: drop-shadow(0px 0px 4px #222); }

/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////// ----   RESPONSIVE OVER DOC_ CLS   ----  /////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */


@media only screen and (max-width: 609px) {
  
  p, h1, h2, h3, h4, blockquote, ul, ol, table, form, .ctn, .wiki { max-width: calc(100vw - 2rem); }
   
}





/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////// -------     LOGIN      -------  /////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */




/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////// -------      MENU      -------  /////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */


.heads                          { }
.heads .alt.menu                { padding: 1em; display: contents; }
.heads .alt.menu > *            { position: fixed; padding: 1em; grid-gap: 1.4em; }
.heads .alt.menu :first-child                           { z-index: 10;  }
.heads .alt.menu :first-child input[type] + label       { border: none; padding: 0; position: relative; opacity: 1; color: var(--lowlink); -webkit-filter: drop-shadow(1px 1px 0px #222); }
.heads .alt.menu :first-child input[type] + label svg   { padding: 0; left: unset; opacity: 0.8; }
.heads .alt.menu .stack         { z-index: 9; margin: 0 auto 0 0; width: fit-content; height: 0; }
.heads .alt.menu .ctn           { font-size: 1em; color: var(--light); font-family: Raleway; font-variation-settings: "wght" 250; max-width: 30em; }


.menubox            { position: fixed !important; top: 0 ; left: 0; bottom: 0; width: max-content; max-width: 60vw; min-width: 20em; padding: 6rem 2rem;  z-index: 9; background-color: var(--menu); color: var(--cream); overflow: scroll; }
.menubox > div      { display: grid; grid-template-columns: 100%; grid-gap: 0.5em; margin: 0 auto 0 0; font-size: 0.85em; }
.menubox > div > *  { width: 100%; text-align: left; }
.menubox ul         { display: grid; }
.menubox a          { color: var(--cream); }       
.menubox a svg      { display: inline-block; opacity: 1; margin: 0 1em 0 0; }  
.menubox > div > p  { opacity: 0.5; font-family: monospace; padding: 0.5em 0 0; }      
.menubox h2         { font-size: 2em; font-variation-settings: "wght" 180; padding: 0.3em 0 0; font-family: Oswald; }
.menubox h2 svg     { margin: 0; top: 0; padding: 0.2em 0 0; }
.menubox h4         { font-size: 0.85em; font-family: Oswald; padding: 0; color: var(--dark-gre); }
.menubox .icons a   { display: contents; }
.menubox .icons li  { opacity: 0.7; }
.menubox .icons span{ font-size: 0.5em; opacity: 1; }
.menubox .icons li:hover    { opacity: 0.85; }
.menubox .icons li:active   { opacity: 1; }
.menubox input[type=checkbox] + label              { display: block; position: relative; width: 100%; }
.menubox input[type=checkbox] + label svg          { display: inline-block; position: absolute; right: 0; top: -0.3em; }
.menubox input[type=checkbox] + label + div        { text-align: left; font-size: 0.9em; padding: 0 2em; }
.menubox input[type=checkbox] + label + div a      { display: block; width: 100%; }

.menubox .ctn h4        { color: currentColor; font-size: 1em; font-variation-settings: "wght" 330; padding: 0.5em 0 0.2em; }
.menubox .ctn > *       { color: var(--cream); }
.menubox .ctn .styler   { opacity: 0.5; font-size: 0.85em; }



.notifs                         { display: grid; grid-template-columns: repeat(auto-fit, 5em); grid-gap: 0.2em; }
.notifs h3, .notifs h4, 
.notifs div                     { grid-column: 1 / -1; text-align: left; width: 100%; }
.notifs div > *                 { width: 100%; text-align: left; max-width: 18em; margin: 0; }
.notifs h3                      { opacity: 0.3; padding: 1em 0 0; }
.notifs svg.back                { opacity: 0.3; width: 80%; bottom: auto; top: 0.3em; left: auto; right: 0.3em; margin: 0 0 auto auto; }
.notifs > a                     { display: grid; grid-template: 2fr 1fr / 1fr; aspect-ratio: 1 / 1; border: none; position: relative; width: 100%; font-variation-settings: "wght" 400; text-align: left; }
.notifs a > span                { display: block; font-size: 0.8em; width: 100%; padding-top: 0.5em; } 
.notifs a > span:nth-child(2)   { font-size: 1.5em; align-self: end; } 
.notifs span span               { font-size: 0.5em; }

.VP .notifs         { max-width: 100%; grid-gap: 1em; }


@media screen and (max-width: 609px) {
  .menubox          { padding: 5rem 1.3rem; font-size: 0.85em; }
  .menubox a        { font-weight: 400; }
  .menubox .vspacer { margin: 0.5em auto 1em auto; }
  .notifs           { max-width: calc(100vw - 1rem); }
}

input:checked + label + .mini   { display: inline-block !important; }
.mini                           { display: block; position: relative !important; background-color: var(--link); color: var(--textaction); right: 1em; margin: calc(-50% + 1em) 0 0;  width: 10rem; height: auto; padding: 1em !important; }
.mini ul                        { display: block; width: 100%; }
.mini li                        { display: grid; width: 100%; grid-template-columns: 1em auto; grid-gap: 1em; text-transform: capitalize !important;  font-size: 0.9em; }
.mini li span                   { width: 100%; margin: 0; text-align: left !important; display: block;  }
.mini a                         { color: inherit; }
.mini input[type=radio] + label { display: grid; width: 100%; grid-template-columns: auto 1fr; grid-gap: 0.5em; opacity: 1; margin: 0; padding: 0.3em 0; }
.mini input[type] + label svg   { padding: 0.1em; top: 0; border: none; background: unset; }
.mini label span                { width: 100% !important; text-align: left; font-size: 0.8em; }

.mini > svg                     { position: absolute; right: -0.5em; top: 0; bottom: 0; left: auto; margin: auto; color: var(--link); }

.mini input[type=radio]:hover + label    { background-color: var(--action); }
.mini input[type=radio]:checked + label, 
.mini input[type=radio]:active + label   { color: var(--action); }
.mini input[type]:checked + label svg    { color: inherit; }

.itemlist .mini                 { margin: -5em 0 0 -11em; } /* this is hackey... works for 6 items in mini menu */



/* /////////////////////////////////////////////////////// */
/*                                                         */
/* ///////////  -------     ALERT     -------  /////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */


.alert                    { position: fixed; width: 100vw; height: 100vh; z-index: 9; /*background-color: rgba(240,192,20, 0.2);*/ background-color: rgba(0, 0, 0, 0.15); text-align: center; }
.alert > div:first-child  { display: grid; place-items: center; background-color: rgba(0, 0, 0, 0.8); color: var(--yellow); height: auto; min-height: 8rem; padding: 3rem; -webkit-filter: drop-shadow(1px 1px 2px #000); }
.alert *                  { text-align: center; margin: auto; font-variation-settings: "wght" 700; }
.alert p                  { color: white; font-variation-settings: "wght" 270; font-size: 0.85em; }
.alert .btn               { display: grid; place-content: center; padding: 0.5em; margin: 1em auto; border-radius: 2em; border: none; color: black; background-color: var(--oops); font-family: Oswald; min-width: 2.65em; }
.alert .close             { bottom: 0.8em; color: var(--oops); background-color: black; margin: auto; }

.alert p.fineprint        { font-size: 0.6em; }




/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////// -------     POPUP      -------  /////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */



.popup           		 	{ position: fixed; top: 6em; bottom: 0em; right: 0; left: 0; margin: auto; display: block; max-width: calc(100vw - 4rem); height: fit-content;
                              background-color: var(--menu); color: var(--cream); width: 20Em; z-index: 20; padding: 2rem; box-shadow: 3px 3px 36px #000; }
.popup form label         	{ padding: 1em 0 0.5em; font-size: 0.8em; font-weight: 700; display: block; }
.popup input[type=submit] 	{ margin-top: 2.5em; }
.popup input[type=text], .popup input[type=number], .popup input[type=password], .popup textarea, .popup select { color: var(--brown); }
.popup ::placeholder  { color: var(--cafe); }

.popup svg.close      { position: absolute; top: 1em; right: 1em; color: var(--link); padding: 0; margin: 0; width: 1em; background-color: transparent; }
.popup svg.undsp      { position: absolute; top: auto; bottom: 0.7em; right: 0.7em; color: var(--link); padding: 0; margin: 0; width: 1em; background-color: transparent; }
.popup .icons         { display: grid; width: 100%; margin: 0 auto; }
.popup .btn           { padding: 0.8em; }
.popup .fineprint     { margin: 0.7em 0; }

.popup.alt                                                { text-align: left; }
.popup.alt > div:first-child                              { margin-bottom: 2em; }
.popup.alt > div:first-child input[type] + label          { border: none; color: currentColor; opacity: 0.7; padding: 0; margin: auto auto 0 0; font-variation-settings: "wght" 350; }
.popup.alt > div:first-child input[type]:checked + label  { font-size: 2em; opacity: 1; position: relative; bottom: -0.17em; }
.popup.alt [type=submit]                                  { margin-left: 0; }

.popup.small            { aspect-ratio: 1 / 1; border-radius: 50%; }
.popup.small .thumb     { max-width: 8em; }
.popup.small .onpop     { place-content: center; margin: 1em auto; grid-gap: 1em; }
.popup.small .tools svg { opacity: 0.5; }
.popup.small .close     { top: auto; bottom: 1em; left: auto; right: auto; color: var(--action); }

.popper .close        { display: none; }
.popper .popup .close { display: block; }


@media screen and (max-width: 609px) {
	.popup            { font-size: 0.85em; top: 2em; }
}


li.popup              { background-color: var(--creli); color: var(--taupe); width: 36rem; min-height: 36rem; top: 0; box-shadow: 1px 1px 7px var(--taupe); padding: 2em; border-radius: 0.4em; }
li.popup h2           { font-size: 0.7em; color: var(--cafe); text-transform: uppercase; font-variation-settings: "wght" 350; padding: 0 0 0.5em; } 
li.popup h4           { font-size: 2em; }
li.popup form         { padding: 0; }
li.popup input        { background-color: transparent; }
li.popup input:focus  { background-color: var(--cafli); }
li.popup .sidelabel   { grid-gap: 2em 1em; margin: 1em 0; grid-template-columns: 8em 1fr; }
li.popup .block       {  }
li.popup :active      { color: var(--cafe); }
li.popup [contenteditable]  { min-height: 1em; min-width: 8em; }

.creds                { margin: auto 3rem 5rem auto; font-size: 0.9em; padding: 1em; width: fit-content; }
.creds > div          { display: grid; grid-template-columns: 6em 12em; place-content: start; grid-gap: 1em; }
.creds > div > *      { display: block; margin: 0 0 auto; }
.creds > div p        { position: static; font-size: 0.85em; width: 100%; }

.imgPrm               { display: grid; grid-template: 1fr auto / 100%; }
.imgPrm div.img       { aspect-ratio: 1 / 1; object-fit: contain; border: 1px dashed var(--brack); }
.imgPrm div.img img   { object-fit: contain; }

.popup.light          { background-color: var(--creli); color: var(--taupe); width: 36rem; min-height: 36rem; top: 0; box-shadow: 1px 1px 7px var(--taupe); padding: 2em; border-radius: 0.4em; }
.popup.light h2       { font-size: 0.7em; color: var(--cafe); text-transform: uppercase; font-variation-settings: "wght" 350; padding: 0 0 0.5em; } 
.popup.light h3 svg   { padding: 0.1em; }
.popup.light a, 
.popup.light button   { color: var(--editBl); background-color: transparent; }
.popup.light *[type=submit]     { background-color: var(--editBl); color: var(--white); border: none; min-height: 3em; min-width: 3em; margin-bottom: 0; }

.popup.light .inline > svg              { position: relative; top: 0.25em; width: 1.5em; margin-right: 1em; }
.popup.light div[id] > span             { display: inline-block; padding: 0.15em 0.15em 0.15em 0.3em; margin-right: 0.3em; border-radius: 0.2em; background-color: var(--whitey); position: relative; }
.popup.light div[id] > span svg.remove  { width: 1em; margin-left: 0.3em; padding: 0.1em; position: relative; display: inline-block; top: 0.15em; }
.popup.light input + label.btn          { opacity: 1; }
.popup.light input + label.btn svg      { border-radius: 50%; padding: 0.25em; top: 0.15em; }
.popup.light input                      { background-color: transparent; padding: 0; text-align: left; border-bottom: 1px dotted var(--grock); width: 5em; }

.popup.light input[concat]              { border-bottom: none; width: 100%; text-align: center; }
.popup.light input[concat].transparent  { }
.popup.light .oneline input[concat]     { width: 100%; }

.popup.light .inline input[type=text]       { padding: 0; width: 5em; }
.popup.light .addr                          { grid-template-columns: 2fr 1fr; width: 12em; }
.popup.light .inline .addr input[type=text] { width: 100%; }
.popup.light *[type=submit].btn             { position: absolute; right: 1rem; bottom: 1rem; margin: 0; padding: 0.5em; border-radius: 50%; width: fit-content; font-size: 1em; font-variation-settings: "wght" 650; }
.popup.light form *[type=submit]            { position: static; margin: 0; }

.popup.light .oneline                       { width: max-content; }
.popup.light .oneline input                 { width: 7em; }

.popup.light .block                         { justify-content: center; }
.popup.light .block  input + label          { }
.popup.light .block  input:checked + label  { }
.block.hashtag input + label                { display: block; color: inherit; background-color: transparent; font-variation-settings: "wght" 400; font-size: 1.1em; padding: 0.2em 0.4em; }
.block.hashtag input:checked + label        { background-color: var(--whitey); }

.popup.feather          { background-color: transparent; background-image: radial-gradient( #000d 40%, #0005 70%); color: var(--cream); max-width: 100vw; max-height: 100vh; width: 100%; top: 0; padding: 25% 20%; }
.popup.feather > div    { position: relative; display: grid; grid-gap: 1em; }
.popup.feather input    { background-color: var(--browner);  }
.popup.feather .btn     { margin: -1em auto; padding: 0.6em 1.2em; }
.popup.feather .close   { top: 20%; right: 20%; }
.popup.feather button   { color: inherit; border: none;  }
.popup.feather button svg { color: inherit; border: none; color: var(--editBl); }

.popup.feather ::placeholder  { color: var(--beige); }

@media only screen and (max-width: 609px) {
  .popup.light    { min-height: 24rem; }
  .popup.feather  { padding: 25% 1em; grid-gap: 0.3em; background-image: unset; border-radius: 50%; background-color: black; }
}



/* /////////////////////////////////////////////////////// */
/*                                                         */
/* /////////// -------     FOOTER     -------  /////////// */
/*                                                         */
/* /////////////////////////////////////////////////////// */


footer                  { display: grid; grid-gap: 2.5em; background-color: black; color: var(--beige); width: 100%; padding: 3em 2em 1.5em; font-size: 0.8em; text-align: center; z-index: 8; position: relative; }        

footer *                { padding: 0; }
footer h2               { font-variation-settings: "wght" 150; font-size: 2em; width: 100%; padding: 0.8em 0; }
footer h3               { font-variation-settings: "wght" 400; padding-bottom: 0.35em; }
footer h4               { font-variation-settings: "wght" 320; font-family: 'Oswald'; padding: 0.5em 0 1em; letter-spacing: 0.03em; }
footer p                { font-size: 0.9em; font-variation-settings: "wght" 240; }
footer a                { color: var(--weGuid); opacity: 0.9; font-size: 1.1Em; }
footer a:hover          { color: var(--weGuid); opacity: 1; }


footer div[ajf].oops                { background-color: rgba(240,192,20, 0.1); color: var(--white); padding: 2em; margin: 1.5em auto; }
footer div[ajf] *                   { text-align: center; }
footer button                       { background-color: var(--weGuid); border-radius: 0; color: inherit; }
footer *[type=button].inline        { color: var(--weGuid); opacity: 0.9; font-size: 1.1em; border: none; font-style: inherit; }
footer *[type=button].inline:hover  { color: var(--weGuid); opacity: 1; } }
footer form label svg               { color: var(--weGuid); }
footer form label div               { opacity: 1; }
footer .fb > div                    { border: 1px dashed var(--weGuid); padding: 1em; border-radius: 0.5em; }
footer .fb label svg                { color: var(--weGuid); }
footer .fb input[type]:checked + label svg { -webkit-filter: drop-shadow(1px 1px 1px currentColor); }
footer textarea                     { width: 20em; margin: 2em auto; padding: 1em; color: var(--weGuid); background-color: transparent; border: 1px dashed; }
footer *[type=submit]               { background-color: var(--weGuid); color: black; border: none; } 

footer .oops            { width: 100%; }
.oops .fb               { grid-template-columns: repeat(auto-fit, minmax(11em, auto)); }


@media only screen and (max-width: 780px) {
    footer textarea     { width: 80%; }
    footer .fb          { grid-gap: 0.2em; }
    .oops .fb           { grid-template-columns: repeat(auto-fit, minmax(40%, 1fr)); grid-gap: 0.7em; width: 100%; }

}





.footer             { padding: 2em; font-size: 0.8em; background-color: var(--lowbkg); color: var(--cream); position: relative; text-align: center; }
.footer h3          { padding: 0.8em 0 1.5em; font-size: 1.8em; border: none; }
.footer h4          { padding: 1em 0; }
.footer a           { color: var(--turquoise); }
.footer button      { padding: 0.5em 1em; color: var(--lowbkg); background-color: var(--cream); border-radius: 0.3em; font-variation-settings: "wght" 575; width: auto; margin: 1em auto; }
.footer div svg     { /*color: var(--cream); background-color: var(--turquoise); */}

.footer .grid > div  { text-align: center; /*display: grid; grid-template-rows: 2fr 3fr auto; */}
.footer .grid svg    { display: inline-block; top: 0; margin: auto; background-color: var(--cream); opacity: 1; color: #122; width: 2.5em; height: 2.5em; padding: 0.6em; border-radius: 50%; font-size: 1em; }
.footer .grid h4     { padding: 0 0 1em; font-variation-settings: "wght" 600; }
.footer .grid form   { display: contents; }
.footer .grid button { display: contents; font-size: unset; }

.footer.sub          { background-color: transparent; color: var(--text); /*color: #111; */font-size: 0.7em; }
.footer.sub .fb input[type] + label svg { background-color: #bbb; color: #111; }
.footer.sub .fb input[type]:checked + label svg { background-color: #ddd; }
.footer.sub h3       { padding: 0.5em 0 1em; font-size: 1.4em; }
.footer.sub p        { padding: 1em 0; }
.footer.sub svg      { /*color: var(--cream); background-color: var(--turquoise); */}

.footer > div ~ div          { display: none; }
.footer > div.hidden ~ div   { display: block; }

@media only screen and (max-width: 609px) {
    footer            { padding: 2em 1em; font-size: 0.8em; }
    footer h2         { font-size: 1.4em; } 
    footer > *, footer > .conts > *       { max-width: calc(100vw - 3em); width: 100%; }
    .footer           { padding: 2em 1em; }

}

.footer .tip            { background-color: rgba(34,222,51,0.1); color: var(--light); padding: 1em; width: 100%; margin: 2em auto; position: relative; }
.footer .tip::before    { content: 'Tip: '; position: absolute; left: 1em; color: var(--youCan); font-family: Oswald; font-variation-settings: "wght" 600; }
.footer .tip svg        { color: var(--youCan); }



.foots { display: contents !important; }


.debug { background-color: white; color: black; padding: 2em; line-break: anywhere; position: relative; text-align: left; font-size: 1rem; }