html { scroll-behavior: smooth; height: -webkit-fill-available; }
* {
font-family: raleway, century gothic, segoe ui, avenir, roboto, helvetica, sans-serif;
font-size: 1em;
margin: 0 auto;
padding: 0;
background-color: transparent;
color: inherit;
text-align: inherit;
border-color: currentColor;
box-sizing: border-box;
z-index: 1;
scroll-behavior: smooth;
}
:root {
--vh: -webkit-fill-available;
--bkg: var(--light);
--lowbkg: var(--dark-duc);
--backlay: #eee8;
--text: var(--black);
--textaction: var(--white);
--menu: var(--black);
--link: var(--pink);
--lowlink: var(--brack);
--action: var(--red);
--input: var(--beige);
--input-text: var(--brown);
--hover: var(--brred);
--click: var(--black);
--highlight: var(--cafli);
--lowlight: var(--brown);
--inactive: var(--grey);
--oops: var(--yellow);
--shadow: var(--grey);
--placehold: var(--cafe);
--notif: var(--orange);
--edit: var(--orange);
--fs-text: white;
--main: var(--blues);
/* Interaction code */
--youSay: var(--turquoise);
--editBl: var(--pink);
--weGuid: var(--yellow);
--youCan: var(--apple);
--dragBl: var(--turquoise);
/* Status class */
--on: var(--orange);
--off: var(--grey);
--live: var(--apple);
}
::-webkit-scrollbar { height: 0; width: 0; }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
@keyframes sparkle { 0% { color: var(--white) opacity: 0.4;} 60% { color: var(--yellow); opacity: 0.7; } 100% { color: white; opacity: 1; } }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.3; } 100% { opacity: 1; } }
@media screen and (max-width: 609px) {
.zone, .VP, .tuto, .fs { font-size: 0.9em; }
}
.rev { transform: rotate(180deg); }
.rot { transform: rotate(90deg); }
.rot2 { transform: rotate(270deg); }
.flip { transform: scaleX(-1); }
.double { font-size: 2em; }
.rel { position: relative; padding-bottom: 1rem; } /* needed for truncate behaviour */
.abs { position: absolute !important; /*bottom: -5em; where???? */ }
.reveal { opacity: 0; }
.unopaq { opacity: 1; transition: opacity 0.7s 1s; }
.dark { background-color: var(--black); color: var(--cream); }
.opa1 { opacity: 0.8; }
.opa2 { opacity: 0.5; }
.opa3 { opacity: 0.3; }
.opa0 { opacity: 0; }
.inline { display: inline-block; width: auto; }
.inline * { display: inline-block; width: auto; }
.inline svg { width: 1.2em; top: unset; }
.truncate { max-height: 11em; overflow: scroll; position: relative; padding-bottom: 1.3em; height: auto; }
.truncate::after { content: '•••'; color: var(--yellow); position: sticky; bottom: 0; top: auto; display: block; text-align: right; z-index: 3; }
.truncate.expand { max-height: unset !important; }
.truncate.expand::after { content: '> <'; }
ul.truncate { border-bottom: 1px dashed var(--yellow); }
ul.truncateRows li { max-height: 9em; height: max-content; }
ul.truncateRows span { max-height: 8em; overflow: scroll; }
li .truncate { max-height: 5em; }
/* on lucid wisdom my, applies to lis instead of ul
.truncate.cards li { max-height: 11em; overflow: scroll; position: relative; } /* on lucid wisdom my, applies to lis instead of ul
.truncate.cards li::after { content: '•••'; color: var(--yellow); position: sticky; bottom: 0; top: auto; display: block; text-align: right; z-index: 3; width: calc(100% - 2rem); }
.truncate li.expand { max-height: unset !important; padding-bottom: 1.3em; }
.truncate li.expand::after { content: '> <'; }
*/
wbr:after { content: "-" }
.ephemer { max-height: 80vh; overflow: scroll; min-height: 0; height: auto; padding: 0; grid-column: 1 / -1; }
.ephemer svg.close { }
.ephemer svg.close:last-child { display: none; }
.ephemer :first-child { margin: 2em 0 1em auto; }
.ephemer :last-child { margin-bottom: 3em; }
.ephemer p { height: auto; text-align: left; border: 0; min-height: 0; border-left: 2px solid var(--sored); margin: 0.2em 1em; padding: 0; padding-left: 0.8em; }
.ephemer p.ok { border-color: var(--apple); max-width: 70vw; }
.ephemer p.wth { border-color: var(--oops); }
.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 5; }
.override { z-index: 100; background-color: black; color: var(--cream); padding: 2rem; }
.vspacer { width: 8em; margin: 1em auto 1.75em auto !important; border-bottom: 0.025em solid; min-height: 1em; opacity: 0.5; min-width: unset; }
.spacer { min-width: 1.5rem; padding: 0 0.5rem; float: none; color: inherit; }
.altspacer { padding: 2.35em; text-align: center; }
.vspacer + * { padding-top: 0; }
.inkiSay { color: var(--yellow); padding: 1.5em 0; font-weight: 700; font-variation-settings: "wght" 700; }
.inkiSay p { font-variation-settings: "wght" 250; }
.inkiSay a { color: inherit; font-variation-settings: "wght" 500; }
/* /////////////////////////////////////////////////////// */
/* */
/* /////////// ---------- BASIC --------- /////////// */
/* */
/* /////////////////////////////////////////////////////// */
main { min-height: 100vh !important; width: 100vw; }
main:empty { display: block !important; }
main > .VP > div { margin: 0; }
main > .bkg { position: fixed !important; }
main > .veil { position: fixed !important; }
@media screen and (max-width: 609px) {
main { max-height: -webkit-fill-available; }
}
body { background-color: var(--bkg); color: var(--text); width: 100%; }
body > div { width: 100%; }
div, form, fieldset { border-radius: inherit; }
p, h1, h2, h3, h4, blockquote, ul, ol, table, form, fieldset { max-width: 36rem; width: 100%; }
p, h1, h2, h3, h4 { padding: 0 0 0.25em; -webkit-margin-before: 0em; -webkit-margin-after: 0em; }
h1, h2, h3, h4 { position: relative; /* line-height: 1.3em; */padding: 1em 0 0.5em; break-after: avoid; }
h1 { font-size: 1.5em; text-transform: capitalize; font-family: Oswald; font-variation-settings: "wght" 350; line-height: 1.1em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; font-variation-settings: "wght" 250; }
h4 { font-variation-settings: "wght" 550; }
p { line-height: 1.3em; }
span { font-family: inherit; }
/* shape */
.round { display: block; aspect-ratio: 1 / 1; border-radius: 50% !important; margin: auto; }
/* alignment */
.right { text-align: right; margin-right: 0; }
.left { text-align: left; margin-left: 0; }
.center { display: grid; place-content: center; text-align: center; margin: auto; top: 0; bottom: 0; left: 0; right: 0; }
.sideside { max-width: 54em; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1em; }
.sideside > div { position: relative; width: 100%; height: 100%; }
.ctn { font-size: 0.9em; margin: 0 auto; max-width: 36rem; text-align: left; }
.ctn h2 { font-weight: 500; font-variation-settings: "wght" 425;}
.ctn blockquote { text-align: right; margin: 0 0 0 auto; font-size: 2em; background-size: 1.8em; max-width: 33rem; }
.ctn form { margin: 1em auto 0 0; }
.ctn.itemlist li { text-align: left; grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); }
.ctn.grid { grid-template-columns: repeat(auto-fit, minmax(18em, 1fr)); padding: 0 8em; grid-gap: 3em; max-width: unset; }
.ctn.grid h4 { padding: 0.5em 0 0; }
.wiki { text-align: left; width: 48em; }
.wiki h1 { font-size: 3em; text-align: left; }
.wiki h2 { border-bottom: 1px solid; padding-bottom: 0.3em; margin-bottom: 0.3em; }
.wiki h3 { text-decoration: underline dotted; }
.wiki blockquote { font-family: Annie; text-align: left; margin: auto 0; padding: 0.5em 0 1em 3em; background: url(icons/quote.svg) no-repeat 0em 0em; background-size: 2em; }
.ctn.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); }
.ctn.cards > * { aspect-ratio: 1 / 1; display: grid; place-content: center; width: 100%; text-align: center; margin: auto 0; padding: 1em; }
.ctn.cards .styler { display: none; }
/*
.ctn.cards .tools { margin: 0 0 0 auto; font-size: 1em; }
.ctn.cards .tools *:not(svg) { display: contents; }
.ctn.cards .tools .switcher { display: inline-flex; }
.ctn.cards .tools .switcher svg { top: 0; }
.ctn.cards .tools svg { opacity: 0.3; color: var(--text); padding: 0; }
.ctn.cards .tools :checked + label svg { opacity: 1; }
.ctn.cards .tools :checked + label svg[nn=love] { color: var(--bright); }
.ctn.cards .tools :checked + label svg[nn=hate] { color: var(--black); }
.ctn.cards .tools :checked + label svg[nn=star] { color: var(--yellow); background-color: white; padding: 0.1em; border-radius: 1em; }
*/
@media only screen and (max-width: 609px) {
.ctn.cards > * { aspect-ratio: unset; }
}
/*.main, */
p.main { padding: 1em 0 0.5em; color: var(--main); font-size: 1.3em; margin: 0 auto 1em; font-variation-settings: "wght" 400; }
p.main::after { content: '_____________'; display: block; letter-spacing: -3px; }
.sidelabel p.main { -webkit-filter: unset; }
.sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(1em, auto)); grid-gap: 2em; }
.sides > div { margin: 0; padding: 0; }
.sidelabel .main { padding: 1em; background-color: var(--beige); color: var(--cafe); font-weight: 700; margin: 1em auto; font-variation-settings: "wght" 700; }
.fineprint { font-size: 0.75em; font-style: italic; }
div.fineprint { padding: 2em 0; }
.oops { color: var(--oops) !important; -webkit-filter: drop-shadow-color(var(--oops)) !important; }
div.oops { padding: 2em 0; }
.backdrop { position: absolute !important; top:0; bottom: 30%; left:0; right:0; margin: auto; text-align: center; font-size: 7em; color: #543; opacity: 0.2; height: fit-content; padding: 0; line-height: 1em; z-index: -1; max-width: calc(100vw - 2rem); }
.backdrop b { font-size: 1.21em; position: relative;/* top: 0.15em; */line-height: 0.7em; }
.VP .backdrop { top: 25%; bottom: 0; }
.hl { background-color: rgba(0,0,0,0.1); }
.slender { font-size: 4em; font-weight: 100; font-family: Raleway; padding: 0 0 0.5em; font-variation-settings: "wght" 100; }
.quote { padding: 1rem 0; width: 16em; max-width: 100%; color: var(--main); font-family: Love Light; font-size: 1.5em; line-height: 1.1em; }
.quote.abs { position: absolute; bottom: 18%; top: unset; right: 0; left: 0; margin: auto; }
.quote + .quote { padding-top: 0; }
.sign { font-family: Shalimar; font-size: 2em; }
.ph { position: relative; display: grid; place-content: center; border: 1px dashed; padding: 5em 3em; text-align: center; max-width: calc(100vw - 4em); width: 36rem; margin: 3em auto 8em; border-radius: 0.5em; }
.ph > * { }
.descr { min-height: 2.5em; }
.shadow { -webkit-filter: drop-shadow(1px 1px 4px currentColor); }
.oops.hl { padding: 0.3em; background-color: var(--brock); }
.cta { text-transform: uppercase; font-variation-settings: "wght" 650; }
.placeholder { color: #888; border: 0.3px dotted ; padding: 4em; text-align: center; width: 100%; margin: 2em auto; display: block; }
.oneword { }
.oneword b { font-family: Love Light; font-size: 1.8em; padding: 0 0.1em; }
.oneword span { font-variation-settings: "wght" 100; font-size: 2em; line-height: 0.65em; margin-right: -0.05em; }
.neon { background-image: var(--neon); }
.neon.oneword { font-variation-settings: "wght" 900; text-align: right; -webkit-background-clip: text; -webkit-text-fill-color: transparent; width: auto; }
.neon.oneword span { display: block; }
.neon.oneword svg { color: var(--pink); font-size: 0.7em; top: 0.1em; }
.neon.oneword.slender { font-size: 2.5em; }
.glow { background-image: var(--glow); }
.fs .oneword { font-size: 2.5em; margin: 1em auto; }
.fs .oneword b { display: inline-block; }
.fs .VP { height: 100%; width: 100%; min-height: unset; min-width: unset; margin: auto; max-width: 36rem; }
@media only screen and (max-width: 609px) {
.quote, .main { max-width: calc(100vw - 2rem); }
.ctn.grid { padding: 0; }
.fs .oneword { font-size: 2.4em; }
}
.rainbow > *:nth-of-type(11n+1) { background-color: var(--pink); }
.rainbow > *:nth-of-type(11n+2) { background-color: var(--sored); }
.rainbow > *:nth-of-type(11n+3) { background-color: var(--orange); }
.rainbow > *:nth-of-type(11n+4) { background-color: var(--yellow); }
.rainbow > *:nth-of-type(11n+5) { background-color: var(--green); }
.rainbow > *:nth-of-type(11n+6) { background-color: var(--turquoise); }
.rainbow > *:nth-of-type(11n+7) { background-color: var(--purpl); }
.rainbow > *:nth-of-type(11n+8) { background-color: var(--magenta); }
.rainbow > *:nth-of-type(11n+9) { background-color: var(--red); }
.rainbow > *:nth-of-type(11n+10) { background-color: var(--tauli); }
.rainbow > *:nth-of-type(11n+0) { background-color: var(--plum); }
.manager > div { display: grid; place-items: start; padding: 0.5em 0 2em; border-top: 1px solid; position: relative; }
.manager div div { width: 100%; }
.manager svg { margin: 0 0 0 auto; }
.manager button { border: none; margin: 0 0 0 auto; padding: 0.3em 0;}
.manager code { max-width: 100%; }
.grid { display: grid !important; grid-gap: 0.8em; width: 100%; grid-template-columns: repeat(auto-fit, minmax(2em, 1fr)); }
.grid > * { }
div.grid > * { width: 100%; max-width: 36rem; }
.even { display: grid; grid-template-columns: repeat(auto-fit, minmax(25%, 1fr)); }
fieldset { border-width: 0; padding: 0 1rem 1rem; }
legend { padding: 0.3rem 1rem; background-color: black; color: var(--cream); font-family: Oswald; }
/*
button { padding: 0.4em 0.8em; margin: 1.5em auto 0; border: 1px solid; -webkit-appearance: none; display: block; }
button:focus { -webkit-appearance: none; outline: none; }
button.inline { padding: 1em 0 0.2em; border: none; font-size: 0.85em; font-style: italic; }
*/
b { font-family: Oswald; font-size: 0.95em; font-variation-settings: "wght" 430; letter-spacing: 0.015em; }
i { font-weight: 700; font-variation-settings: "wght" 450; padding-right: 0.1em !important; font-size: 0.95em; }
s { font-family: inherit; }
b i, i b { font-family: 'Oswald'; font-size: 1.02em; }
a { text-decoration: none; color: var(--link); font-weight: 700; font-variation-settings: "wght" 575; }
a:hover { color: var(--hover); opacity: 0.8; }
a:active { color: var(--active); }
a:focus { outline: none; color: var(--hover); }
a[href=''] { color: currentColor; }
blockquote { padding: 1em 1em 1em 4em; margin: 1.5rem auto 1rem; text-align: right; max-width: 28rem; font-size: 1.35em; font-family: 'Love Light'; line-height: 1.15em; font-style: italic; background: url(icons/quote.png) no-repeat 2em 0; background-size: 2em; }
blockquote[cite]::after { content: '- ' attr(cite); font-variation-settings: "wght" 500; font-family: Oswald; font-size: 0.6em; font-style: normal; display: block; }
details { max-width: 36rem; text-align: left; position: relative; padding: 0.3em 0; }
details[open] { margin-bottom: 1.5em; }
summary { cursor: pointer; height: fit-content; }
summary > * { width: 100%; text-align: left; padding-left: 1rem; }
summary > *:first-child { display: inline; width: auto; padding: 0 0 0 1.5rem; border: none; }
summary *[contenteditable] { min-width: 2em; display: inline; padding: 0 0.2em; background-color: var(--highlight); }
summary label { display: inline; min-width: unset; width: auto; float: right; }
details ::marker { font-size: 0.8em; }
summary h2 { font-size: 1.2em; }
summary h4 { padding: 0 !important; }
details summary ~ * { padding: 0.5em 0 0 2.2em; }
details details { max-width: 100%; margin: 0; }
details ul { max-width: 100%; margin: 0; }
code { display: block; font-family: revert; }
h1 svg, h2 svg, h3 svg, h4 svg, p svg, a svg, label svg, button svg, li svg, svg.inline
{ width: 1.2em; position: relative; top: 0.25em; padding: 0; margin: 0 0.3em; }
h2 svg { padding: 0.2em; top: 0.3em; }
h3 svg { width: 0.85em; top: 0.08em; margin-right: 0.5em; }
.icontitle { display: grid; grid-template-columns: auto 1fr; width: 100%; grid-gap: 1em; }
.icontitle > div:first-child { align-self: end; padding-bottom: 0.4em; }
table { font-size: 0.9em; column-gap: 0.5em; max-width: calc(100vw - 4rem); width: 100%; border-spacing: 0.5em; position: relative; }
table th { padding: 1em 0; vertical-align: top; }
table td { padding: 0 0.2em 0 0; vertical-align: top; max-width: 16em; }
table td + th { padding: 0; }
table svg { padding: 0.15em; top: unset; /* top unset for + in the last td... check if it causes problems */ }
table svg[nn=swap] { width: 1em; }
table svg[nn=options] { width: 1em; color: var(--link); }
td[name]::before { /*content: '| '; color: var(--editBl); font-size: 0.9rem; font-style: normal; display: inline; break-after: avoid; margin-left: -0.5em; */}
table td > input[type=text] { background-color: transparent; padding: inherit; border-left: 1px solid var(--editBl); padding-left: 0.5em; }
table td > input[type=checkbox][name] { display: block; background: url('icons/yes.svg') no-repeat 0em transparent; background-size: 1em; width: 1em; aspect-ratio: 1 / 1; }
table td > input[type=checkbox][name]:checked { background-color: var(--light); opacity: 1; }
table td > input[type=checkbox][name]:focus { -webkit-filter: drop-shadow(1px 1px 1px #333); }
table td span[name=icon] { position: absolute; opacity: 0; }
table td span[name=icon]:focus { position: static; opacity: 1; display: block; }
table td input[list] { position: absolute; opacity: 0; width: 2em; }
table td input[list]:focus { position: static; opacity: 1; display: inline; width: 2em; }
table td.pix { -webkit-filter: none; width: 8em; position: relative; background-color: rgba(0, 0, 0, 0.1); padding: 0; }
table td.pix span { position: absolute; bottom: 0; left: 0; color: white; background-color: rgba(0, 0, 0, 0.5); padding: 0.3em; }
td.ll { font-size: inherit; opacity: 0.5; font-variation-settings: "wght" 500; }
tr.extra { max-width: unset; width: 100%; position: relative; }
tr.extra td > * { width: max-content; padding: 0; margin: 0 2em 0 auto; text-align: left }
tr.extra td > .close { position: absolute; top: 0; right: 0; left: auto; color: var(--notif); width: 1em; margin-right: 0; }
table.title { position: relative; height: 50vh; overflow: scroll; }
table.title tr:first-of-type { position: sticky; top: 0; background-color: var(--bkg); height: 9rem; }
table.title th { vertical-align: bottom; padding: 2em 0; }
table .fineprint { font-size: 0.9em; }
.VP, .split, .demi, .fs, body > div > .dashboard
{ display: grid; place-content: center; position: relative; }
.VP, .split, .fs { min-height: inherit; width: 100vw; text-align: center; }
.VP { grid-template: minmax(10vh, auto) 1fr / 1fr; grid-gap: 5vh; padding: 5rem 1rem 4rem; text-align: center; }
.demi { grid-template: 50vh auto / 1fr; padding: 4rem; place-items: center; place-content: unset; min-height: 100vh; }
.demi > * { width: 100%; }
.split { grid-template: 50vh auto / 1fr; padding: 0; }
.zone { min-width: 100vw; }
.split .VP { min-height: unset; height: 100%; grid-template: 1fr 2fr / 1fr; padding-top: 1rem; }
.split .zone { height: 50vh; }
.split > *:last-child { margin: 0 auto auto; }
.fs { height: 100vh; max-height: -webkit-fill-available; width: 100vw; position: fixed; top: 0; }
.fs > * { margin: auto; }
.midheight > div { height: 50%; }
.horiz { /* display: flex !important; */ max-width: calc(100vw - 2rem); width: 100%; height: inherit; overflow-x: scroll; flex-wrap: nowrap; text-align: center; justify-content: start !important; place-content: unset; position: relative; }
.overview { display: grid; width: calc(100vw - 6em); grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); grid-gap: 1.5em; place-content: start; position: relative; }
.overview > div { width: 100%; min-height: 14em; }
.VP .overview { display: grid; }
.overview .dropzone { width: 100%; text-align: center; padding: 1em; opacity: 0.6; color: var(--notif); }
.overview .dropzone:hover { opacity: 1; }
.wizard { min-height: 100vh; min-height: -webkit-fill-available; padding: 5em 1em 1em; }
.wizard > div { font-size: 0.85em; position: relative; }
@media only screen and (max-width: 609px) {
.backdrop { font-size: 4em; }
p, h1, h2, h3, h4, ul, ol, table, form { max-width: calc(100vw - 2rem); }
.tight, .narrow, .semi { max-width: calc(100vw - 3rem); }
blockquote { padding: 1em 2em; background-position-x: 8%; right; margin: 1em 0 1em auto; }
.ctn blockquote { padding: 0.5em 0.5em 1em 2.5em; font-size: 1.7em; margin: 0.5em auto; }
.wiki blockquote { padding: 0.5em 0.5em 1em 2.5em; font-size: 1.7em; margin: 0.5em auto; }
.sideside { max-width: calc(100vw - 2rem); padding: 1em; }
.sideside > div { max-width: 100%; }
.grid { grid-gap: 0.3em; }
p.main { padding: 0.5em 0; margin: 0 auto; }
}
.big { padding: 0.5em 0 1em; max-width: 100%; font-size: 2em; }
h1.big { font-size: 5em; padding: 0.5em 0 0.15Em; font-weight: 300; }
h1.big svg { top: 0.2em; height: 1em; margin: 0 1.5rem 0 0; padding: 0; width: 1em; }
p.big { font-size: 2em; margin: auto; }
h1 span.big { font-size: 2.3em; font-family: 'Pangolin'; color: var(--yellow); position: relative; top: 0.2em;}
a.card { display: grid; background-color: rgba(240,240,240,0.1); border: 1px solid var(--yellow); padding: 1em; grid-template-columns: 2em 1fr; width: 100%; }
a.card span { width: 100%; }
a.card svg { top: 0; }
a.light { color: inherit; font-weight: inherit; border-bottom: 1px dotted; }
a.conts { color: inherit !important; font-variation-settings: "wght" 300; }
a.conts *:hover { color: var(--hover); }
@media only screen and (max-width: 609px) {
p.big { font-size: 1.65em; }
}
.horiz.multi { display: flex !important; grid-gap: 2em; }
.horiz > details { max-width: unset; width: max-content; min-width: 16em; }
.horiz > details[open] { min-width: unset; }
.horiz > details summary ~ * { padding: 1em 0 0; }
/* /////////////////////////////////////////////////////// */
/* */
/* /////////// ------- SVGS ------- /////////// */
/* */
/* /////////////////////////////////////////////////////// */
svg { display: inline-block; aspect-ratio: 1 / 1; isolation: isolate; overflow: initial; background-color: transparent; width: 1.5em; fill-rule: evenodd; fill: currentColor; }
svg:last-child { /*margin-right: 0;*/ }
svg:first-child { margin-left: 0; }
svg.back { position: absolute !important; top: 0; bottom: calc(100% - 100vh); left: 0; right: 0; width: 70%; height: 50%; margin: auto; opacity: 0.15; color: var(--cafe); z-index: -1; }
svg.topright { position: absolute; top: 1em; right: 1em; margin: auto; width: 1em; height: 1em; }
svg.deco { width: 3em; height: 3em; padding: 0.3em; margin: auto !important; display: block; }
svg.punct { width: 1.5em; height: 1.5em; padding: 0.3em; margin: 1.5em auto; display: block; }
svg.btn { border-radius: 3em; padding: 0.3em; background-color: var(--input); margin-left: 0.5em; margin-right: 0.5em;}
svg.fw { position: absolute !important; right: 0; left: 0; height: 100% !important; width: 100% !important; background-color: transparent !important; }
svg.fw ~ span { opacity: 0.3; }
svg.close { display: block; position: relative; padding: 0.3em; border-radius: 50%; background-color: inherit; }
svg:focus { outline: none; }
.blink svg { background-color: var(--red); background-size: 30% 30%; }
svg.red { color: var(--blood); }
svg[nn=play] { padding-right: 0.2em !important; }
svg.tiny { width: 1em !important; }
svg.med { width: 4em !important; }
svg.big { width: 12em !important; font-size: 1em; }
/* /////////////////////////////////////////////////////// */
/* */
/* /////////// ------- CONTAINERS ------- /////////// */
/* */
/* /////////////////////////////////////////////////////// */
main > .vsplit > div { position: relative; height: 100%; padding: 8rem 3rem 3rem; min-height: 100vh; }
main > .sidelabel { position: relative; height: 100%; padding: 8rem 3rem 3rem; grid-gap: 5em; max-width: unset; }
main ~ div:not(.foots) { position: relative; }
@media screen and (max-width: 609px) {
main > .vsplit > div { padding:rem; font-size: 0.65em; }
}
.VP > * { display: block; margin: 0; }
.VP > div:first-child { /* place-content: center; margin: auto; padding: 3em 0 1em; */}
.VP > div:first-child > div:first-child :first-child, .VP > div:first-child > *:first-child { /*padding-top: 0;*/ }
.VP > .sidelabel { width: 100%; max-width: unset; grid-gap: 2em; text-align: left; }
.VP.dark { background-color: black; color: var(--cafli); }
.VP.engage { }
.VP.engage h2 { padding: 2em 0 1em; }
.VP.engage h3 { font-family: Shalimar; font-size: 3em; font-style: italic; font-weight: 100; }
.VP.engage h3 + .vspacer { margin: -0.5em auto 4em !important; }
.VP.engage .dark { background-color: transparent; }
.VP .oneline { width: 70vw; max-width: 36rem; }
/* SIMPLE DIVS */
.cover { width: 100%; height: 100%; display: grid; /* place-content: center; */ padding: 4rem; }
.cover > * { margin: 0; width: 100%; max-width: 36rem; }
.sidelabel { display: grid; grid-template-columns: 1fr 2fr; max-width: 36rem; text-align: left; width: 100%; }
.sidelabel h2, .sidelabel h3 { grid-column: 1 / -1; }
.sidelabel h4 { padding: 1em 0 0.5em; }
.sidelabel > div { margin: 0; width: 100%; position: relative; }
.sidelabel > div > div:first-child > div:first-child > :first-child, .sidelabel > div > div:first-child > :first-child,
.sidelabel > div > :first-child { padding-top: 0; }
.sidelabel .ctn :first-child { padding-top: 0; }
.sidelabel div span { margin: 0; }
.sidelabel details { width: 100%; padding: 0.1em 0; }
.sidelabel > .fw { grid-column: 1 / -1; }
.ctn .sidelabel { place-items: start; }
.uplabel { grid-template-rows: 1fr 1fr; grid-auto-flow: column; display: grid; grid-gap: 0.3em; }
.uplabel :nth-child(even) { width: auto; display: inline; }
.fs .focalPoint { position: absolute; top: 6rem; bottom: 0; right: 0; left: 0; aspect-ratio: 1 / 1; margin: auto; width: 36rem; max-width: calc(100vw - 2rem); }
.focalPoint { display: grid; grid-template: 1fr / 1fr; place-content: center; }
.focalPoint > * { width: 100%; margin: auto; }
.focalPoint > *:first-child { width: 100%; margin: 0 0 auto; }
.focalPoint .oneword { margin: auto; }
.focalPoint .oneword b { display: block; }
.focalPoint > .option { display: grid; grid-template-rows: 20em 4em 4em; width: 24em; margin: 0 auto; }
.focalPoint label.focus { display: block; }
.focalPoint label.focus > svg { color: var(--editBl); width: 3em; display: block; margin: 0 auto auto; }
.focalPoint label.focus .onChk { width: 100%; text-align: center; }
.focalPoint *:checked + label .onChk div { display: inline-block; }
.focalPoint label.focus .onChk svg { color: white; width: 2em; display: inline; margin: 1em; }
@media only screen and (max-width: 609px) {
.focalPoint .oneword { /* width: calc(100vw - 1.5em); */ }
}
.article > * { text-align: left; }
/* FUNCTIONAL DIVS */
.fsForm, .tuto { background-color: rgba(0, 0, 0, 0.7); color: var(--weGuid); position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 7; }
.fsForm { display: grid; place-items: center; border-radius: 0; text-align: center; padding: 10em 2em 4em; }
.fsForm * { background-color: transparent; }
.fsForm > div { display: grid; grid-template-rows: auto 1fr auto; grid-gap: 1.5em; margin: 0 auto; height: 60vh; width: 36rem; max-width: calc(100vw - 4rem); }
.fsForm > div > * { margin: auto; }
.fsForm > div > div > * { margin: auto; padding: 0; }
.fsForm svg.close { margin: 0 auto; background-color: var(--weGuid); color: black; }
.fsForm .thumbs > * { background-color: transparent; -webkit-filter: unset; color: var(--weGuid); max-width: 8em; }
.fsForm .picker { max-height: 33vh; overflow: scroll; }
.fs.tuto { background-color: black; }
/* OBJECTS */
.tuto { background-color: rgba(8,2,5,0.85); color: var(--weGuid); position: fixed !important; top: 0; bottom: 0; right: 0; left: 0; padding: 4rem; display: grid; place-content: center; z-index: 7; text-align: center; }
.tuto * { color: inherit; }
.tuto > div { margin: auto; min-width: 20em; }
.tuto h1 { text-transform: unset; font-size: 3em; font-variation-settings: "wght" 200; }
.tuto h2 { font-size: 1.5em; padding: 0.5em 0; }
.tuto h3 { padding: 1em 0; }
.tuto .ctn { color: var(--cafli); max-width: 50vw; min-width: 24em; max-height: 60vh; overflow: scroll; }
.tuto .ctn .fineprint { font-size: 0.9em; }
.tuto p.main { font-size: 1.4em; -webkit-filter: none; }
.tuto + .tuta, .tuto + .tuto { display: none; }
.tuto.hidden + .tuta { display: block; }
.tuto.hidden + .tuto { display: grid; }
.tuto ::placeholder { color: var(--cafli); font-variation-settings: "wght" 100; font-size: 0.7em; }
.tuto *[type=button], .tuto *[type=submit] { background-color: var(--weGuid); color: black; margin: 3em auto 0; }
.tuto *[type=button]:active, .tuto *[type=submit]:active, .tuto button:active, .tuto button:focus { background-color: var(--weGuid); color: black; }
.tuto *[type=button]:hover, .tuto *[type=submit]:hover, .tuto button:hover, .tuto a:hover { color: var(--light); border-color: var(--weGuid); }
.tuto button.inline { color: inherit; }
.tuto p a.btn,
.tuto p button[type] { border: none; margin: 0; }
.tuto p a.btn svg,
.tuto p button svg { margin: auto 0.4em auto 0; top: 0.25em; }
.tuto p a.btn,
.tuto p button[type=submit] { background-color: var(--weGuid); color: black; }
.tuto p button[type=button] { color: var(--weGuid); background-color: transparent; padding: 0; }
.tuto .subtxt { color: var(--cafli); font-size: 0.7em; position: absolute; bottom: 3em; left: 0; right: 0; margin: auto; }
.subtxt *[type=submit], .subtxt button { background-color: transparent; border: 1px solid; color: inherit; margin: 0 0 0 0.7em; display: inline; }
.tuto .legend { margin: 2.5rem auto; font-size: 0.8em; direction: unset; }
.tuto .legend label { font-weight: 900; margin: 0.5em auto 1.5em; }
.tuto .legend p { font-size: 0.8em; }
.tuto svg.back { opacity: 0.1; }
.tuto *.main { color: inherit; }
@media only screen and (max-width: 609px) {
.tuto .ctn { max-width: calc(100vw - 3em); min-width: unset; }
}
.frame { border: 1px solid; border-width: 1px 0; max-width: 36rem; padding: 1rem 0; margin: 3rem auto; }
.qna { display: grid; grid-template-columns: 2fr 3fr; grid-gap: 1.5em; max-width: 36rem; }
.qna p:nth-child(odd) { font-variation-settings: "wght" 350; text-align: right; font-family: 'Oswald'; line-height: 1.1em; }
.qna p:nth-child(even) { font-variation-settings: "wght" 250; text-align: left; }
.key { grid-template-columns: auto 1fr; }
.key p:nth-child(even) { padding-top: 0.25em; }
@media only screen and (max-width: 609px) {
.qna { grid-template-columns: 1fr 2fr; }
}
/* This must be cleaned to clear the popped behaviour of styling constraints */
.onpop { position: static; }
.underpop { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: 0; background-color: rgba(0, 0, 0, 0.1); z-index: 2; }
.popup, .popped { position: fixed; margin: auto; right: 0; left: 0; top: 2em; bottom: 2em; display: block; height: fit-content; max-width: calc(100vw - 2rem);
background-color: var(--menu); color: var(--cream); width: 20Em; z-index: 20; padding: 2rem; box-shadow: 3px 3px 36px #000; }
.popped { max-height: 70vh; max-width: 70vw; width: auto; padding: 3em; display: grid; grid-template: 1fr / auto; z-index: 3; }
.popped > * { min-width: 16em; width: 100%; }
.popped > *:first-child { /* aspect-ratio: 1 / 1;*/ }
.popped img { object-fit: contain; max-width: calc(70vw - 6em); max-height: calc(50vh - 6em); }
.popped .icons { grid-gap: 1em; }
.popped .icons > * { width: auto; }
.popped .icons label { display: grid; place-items: center; grid-gap: 0.5em; }
.popped label[contenteditable] { border: 1px dashed var(--edit); display: block; padding: 0; margin: 0.5em 0; background-color: transparent; color: inherit; }
.popped label[contenteditable]:empty:after { content: attr(name); outline: none; color: grey; }
.popped label[contenteditable]:active, .popped label[contenteditable]:focus { border-style: solid; outline: none; }
.popped svg.close { display: block; position: absolute; margin: auto; right: 1em; top: 1em; }
.flyer { position: fixed; margin: auto; right: 0; left: 0; top: 2em; bottom: 2em; display: block; height: 80vh; width: 36rem; max-width: calc(100vw - 2rem);
background-color: black; color: var(--cream); z-index: 20; box-shadow: 3px 3px 36px #000; }
.flyer .switch { color: var(--cafe); }
.columns { display: block; columns: 18em; max-width: unset; /*padding: 3em;*/ width: 70vw; column-gap: 1em; }
.columns > * { break-inside: avoid; }
.columns .styler { break-after: avoid; }
.columns h2, .columns h3, .columns h4, .columns h5 { padding-top: 1em; /* padding-top: 0; margin-top: 1em; this doesn't work... better to spec a standard padding */}
.story p { padding: 2em 0; font-size: 1.7em; font-weight: 100; }
.story p span { display: block; font-size: 2em; font-weight: 800; padding: 0.3em 0; }
.story p.caption { font-size: 1.2em; font-weight: 400; }
.links { display: block; columns: 12em; max-width: unset; padding: 3em; width: 70vw; column-gap: 1em; margin: auto; }
.links div { break-inside: avoid; }
.links a, .links input[type=radio] + label
{ font-variation-settings: "wght" 650; padding: 0; display: block; color: var(--link); opacity: 0.8; }
.links a { }
.links input + label { }
.links ul { break-inside: avoid; }
.links h3 { break-after: avoid; text-align: left; }
.oneline.links { width: 100%; }
.oneline.links form { display: contents; }
.oneline.links button[type] { display: inline; margin: 0; padding: 0; border-radius: 0; font-size: 1em; }
.oneline.links a,
.oneline.links button[type] { border-left: 1px solid var(--text); padding-left: 0.35em;}
ul.oneline { width: auto; }
ul.checks.links { padding: 0; text-align: left; }
.optcard { display: grid; grid-template: 1fr auto / 1fr; place-content: center; width: 100%; }
.optcard > *:first-child { aspect-ratio: 1 / 1; margin: auto; display: grid; grid-template: auto 1fr / 1fr; place-content: start; width: 36rem; max-width: calc(100vw - 2rem); }
.optcard .oneword { padding-top: 3em; }
.optcard .oneword b { display: block; }
.help { background-color: var(--input); padding: 1em; border-left: 5px solid; width: 18em; text-align: left; margin: 2em auto; font-size: 0.9em; }
.help div { font-size: 0.8em; }
.help svg[onclick] { margin-right: 0; }
.help.minimal { background: none; padding: 0; border: none; text-align: center; font-style: italic; width: auto; color: var(--lowlink); }
.dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); place-content: start; width: 80%; margin: 0 auto; grid-gap: 1em; height: fit-content; padding: 1rem 0; }
.dashboard > * { margin: auto; width: 100%; aspect-ratio: 1 / 1; }
.dashboard fieldset { width: 100%; border-width: 1px 0 0 0; border-color: black; width: 36rem; max-width: calc(100vw - 2rem); }
.dashboard legend { font-family: 'Advent Pro'; font-weight: 900; padding: 0.5em 1em; }
.dashboard a { }
.dashboard h3 { text-align: left; font-size: 1.15em; }
.dashboard h3 svg { background: none; border: none; margin: auto 0.5em; }
.dashboard .notifs a { color: var(--lowlink); }
.ops { display: grid; grid-template-columns: 1fr 1fr; max-width: 36rem; }
.ops .map { height: 16em; }
.ops .sidelabel { grid-gap: 0 0.5em; }
.vsplit { display: grid; grid-template-columns: 1fr 1fr; height: 100%; }
.vsplit .bkg { position: absolute; padding: 0; display: block; padding: 0; }
.vsplit .veil { position: absolute; }
.vsplit > div > *:first-child { padding-top: 0; }
.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%; }
button[name='close'] { position: absolute; top: 1.5em; right: 1.5em; margin: auto; padding: 0; border: none; }
@media screen and (max-width: 609px) {
.dashboard { max-width: calc(100vw - 2rem); width: 100%; font-size: 0.85em; padding-left: 1em; }
.links { columns: 2; padding: 3em 0; }
main > .vsplit > div { padding: 1rem; font-size: 0.8em; }
.cover { padding: 4rem 1rem 3rem; }
.optcard { font-size: 0.9em; }
.optcard .oneword { padding-top: 1em; }
.vsplit > div { padding: 1rem; font-size: 0.8em; }
}
.value { background-color: var(--red); color: var(--beige); min-height: 100vh; min-width: 100vw; }
.value svg { width: 100%; height: 50vh; padding: 20vh 0 4vh; opacity: 0.5; }
.value h2 { }
.value * { -webkit-filter: drop-shadow(1px 1px 3px #864); }
.callto { padding: 2em; background-color: var(--lowbkg); color: var(--cream); position: relative; text-align: center; margin: auto; }
.callto > * { -webkit-filter: 1px 1px 2px var(--youCan); }
.callto h2 { padding: 1em 0; font-size: 2em; }
.callto h4 { padding: 1em 0; }
.callto button { padding: 0.5em 1em; color: black; background-color: var(--youCan); border-radius: 0.3em; font-size: 1.2em; font-weight: 600; width: auto; margin: 0 auto 1.5em; border: none; }
/* /////////////////////////////////////////////////////// */
/* */
/* /////////// ---------- FORMS --------- /////////// */
/* */
/* /////////////////////////////////////////////////////// */
/*
h1 + form, h2 + form, h3 + form, h4 + form { margin-top: 2rem; }
input[type=checkbox] + label svg,
input[type=radio] + label svg { opacity: 0.5; }
.sidelabel + .basic { margin-top: 1rem; }
.sidelabel,
.sidelabel > * { text-align: left; margin: 0; width: 100%; }
.basic.bkg { padding: 25% 15%; }
.basic.bkg *.bkg { z-index: -10; }
.simple { width: 16rem; margin: auto; padding: 1em 0; text-align: center; }
.simple * { text-align: center; margin: 1em auto; }
.simple input[type=text], .simple select
{ font-size: 1.5em; border-radius: 0.4em; margin: 0.5em auto; }
.simple input[type=radio] + label, .simple input[type=checkbox] + label
{ display: inline-block; }
.simple input[type=radio] + label svg, .simple input[type=checkbox] + label svg
{ height: 3em; width: 3em; padding: 0.5em; border-radius: 3em; opacity: 0.3; }
.simple input[type=radio]:checked + label svg, .simple input[type=checkbox]:checked + label svg
{ opacity: 1; }
.simple input[type=submit] { padding: 0.7em 1.4em; margin: 1em auto;}
input[type=button].inline,
input[type=submit].inline { border: none; background-color:transparent; color: var(--link); font-weight: 700; display: inline; margin: 0; padding: 0 0.2em; }
input[type=button].inline:hover,
input[type=submit].inline:hover { color: var(--hover); background-color:transparent; }
input[type=text].inline, input[type=password].inline
{ background-color: transparent; color: var(--cafe); font-weight: 300; display: inline; margin: 0 0.4em; padding: 0 0.2em; width: 9em; font-size: 2em; line-height: 1em; text-align: inherit; }
*/
input[type=checkbox].expand + label + *,
input[type=radio].expand + label + * { display: none; }
input[type=checkbox].expand:checked + label + *,
input[type=radio].expand:checked + label + * { display: block; }
.upload label svg { display: inline-block; }
.upload div label { display: inline-block; width: auto; }
.upload div input[type=submit] { margin: 0 0 0 auto; padding: 0; background: none; position: static; font-size: 1em; width: auto; }
.upfile { position: relative; min-height: 3em; }
input[type=file].pix { background-color: black; background-position: 50% 50%; background-size: 8%; color: transparent; }
img + input[type=file] { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; background-color: black; background-position: 50% 50%; opacity: 0.2;}
.upPix { position: relative; height: 50vh; width: 50vw; }
.upPix input[type=file] { background-color: black; background-position: 50% 50%; background-size: 8%; color: transparent; }
img + input[type=file] { position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; background-color: black; background-position: 50% 50%; opacity: 0.2;}
.upPix label { width: 100%; margin: auto; text-align: center; }
/* form layout */
form.VP { grid-template-rows: 25vh repeat(auto-fit, 1fr) / 1fr; }
/* UPLOAD text file to save name >>>> this shouldn't be needed anymore ??? */
.inpico { display: none; /* display: grid; grid-template-columns: 1fr 3em; place-items: center; text-align: center; */ }
.filters { display: flex; }
.filters * { margin: auto; }
.filters input[type=text] { display: inline-block; width: auto; }
.filters input[type=checkbox] + label { display: grid; place-items: center; grid-template-columns: 2em minmax(6em, 1fr); }
.filters input[type=checkbox] + label svg { height: 2em; width: 2em; padding: 0.35em; border-radius: 2em; top: unset; color: var(--cafe); }
.filters input[type=checkbox]:checked + label svg { background-color: var(--cafe); color: var(--cream); }
.profile { max-width: unset; width: 100%; height: 50vh; margin-bottom: 3em; background: black; overflow: hidden; }
.profile + form .pix { position: absolute; height: 50vh; top: 0; margin: 0 auto; left: 0; background-color: transparent; }
/*
*[ajF] li input + label svg { border-radius: 2em; border: 1px solid; height: 1.3em; width: 1.3em; padding: 0.15em; top: 0; }
*[ajF] li input:checked + label svg { border-radius: 2em; border: none; background-color: var(--turquoise); color: var(--white); }
*[ajF] li input + label svg[nn=trash] { border: none; padding: 0; opacity: 0.1; }
*[ajF] li input:checked + label svg[nn=trash] { background: none; color: var(--orang); opacity: 1; }
*/
/* form objects */
svg[onclick], a svg { outline: none; opacity: 0.8; margin-right: 1em; }
svg[onclick]:hover, svg[onclick]:active { outline: none; opacity: 1; border-radius: 3em; color: var(--hover); }
svg.sider { position: absolute; margin: -1em 1em; }
.logos { display: grid; grid-gap: 0.5em; grid-template-columns: repeat(auto-fit, minmax(5em, 1fr)); place-content: center; }
.logos svg { width: 3em; height: 3em; margin: auto; display: block; }
.logos label p { font-size: 0.8em; }
.logos input[type=radio] + label,
.logos input[type=checkbox] + label { width: 100%; }
.logos input[type=radio]:checked + label,
.logos input[type=checkbox]:checked + label { background-color: var(--action); }
input[type=checkbox].check { display: inline; height: 1em; width: 1em; border-width: 1px solid currentColor; background-color: transparent; }
.btn { padding: 1em 0; text-align: center; border: 1px solid currentColor; padding: 0.4em 0.8em; margin: 1em auto; align-self: center; }
.btn label { background-color: var(--input); padding: 0.5em 1em 0.8em 0.8em; width: auto; font-weight: 100; font-size: 0.8em; }
.btn label svg { border: 1px solid; border-radius: 1em; }
.btn :checked + label { background-color: var(--action); color: var(--textaction); }
a.btn { display: inline-block; }
@media only screen and (max-width: 321px) {
.block { grid-template-columns: repeat(auto-fit, minmax(6em, auto)); }
}
.alts { padding: 2em 2em 3em; }
.alts input + label { display: block; }
.alts input + label span { padding: 0; background: none;color: inherit; position: absolute; bottom: 2em; right: 2em; left: 2em; margin: auto; width: fit-content;}
.alts input + label form { display: none; }
.alts input:checked + label { width: 100%; }
.alts input:checked + label span { position: static; font-size: 2em; padding-bottom: 1em; display: block; width: 100%; text-transform: capitalize;}
.alts input:checked + label form { display: block; height: 20em; width: 100%; max-width: calc(100vw - 2rem); }
.alts input:first-child + label span{ right: unset; }
.alts input + label:last-child span { left: unset; }
.alts .sidelabel { grid-gap: 0.8em 0.3em;}
.alts .sidelabel label { padding: 0; }
.altrad { position: relative; padding: 2em 2em 3em; }
.altrad > div { height: 18em; }
.altrad > div:last-child { display: grid; grid-template: auto / repeat(auto-fit, 3em); grid-gap: 0.5em; height: auto; place-content: center;}
.altrad label svg { width: 2em; height: 2em; margin: auto; }
.textform { text-align: center; }
.textform input[type=text], .textform input[type=password], .textform select
{ border-bottom: 1px solid; padding: 0.2em 0; max-width: 50%; font-size: 1em; color: inherit; text-align: center; background-color: transparent; }
@media only screen and (max-width: 609px) {
.profile { margin-bottom: 1em; }
}
/* /////////////////////////////////////////////////////// */
/* */
/* /////////// ---------- LISTS --------- /////////// */
/* */
/* /////////////////////////////////////////////////////// */
ul { display: grid; grid-gap: 0.5em; grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); /*width: inherit; */ margin: 1em auto; }
ul svg { width: 1em; padding: 0.15em; margin: 0; }
ul li > svg { top: unset; }
ul svg:last-child { margin: 0; }
li { display: grid; position: relative; margin: 0; }
li div { width: 100%; }
li * svg { top: 0.15em; margin-right: 0.5em; padding: 0; }
.thumbs li > a:first-child:last-child,
.cards li > a:first-child:last-child
{ display: inline; margin: 0; color: inherit; width: 100%; height: 100%; padding: 0; display: contents; }
.bullets, .ctn ul { display: block; margin: 0 auto;}
.bullets li, .ctn ul li { display: list-item; padding: 0 0 0.25em 0.75em; border: none; text-align: left; list-style: outside disc; margin-left: 1em; }
li .bkg ~ * { padding: 0.5em; }
ul.border li { border: 1px solid; }
ul.fond { padding: 0.3em; }
ul.fond li { background-color: rgba(240,240,240,0.05); padding: 0.5em; -webkit-filter: drop-shadow(1px 1px 1px var(--lowlight)); }
ul > h2, ul > h3, ul > h4 { position: static; grid-column: 1 / -1; background: none; margin-bottom: 1em; max-width: calc(100vw - 3rem); width: 100%; padding: 1em 0 0.3em; }
ul > h2 { }
ul > h3 { }
ul > h4 { margin-bottom: 0.5em; }
.itemlist { grid-gap: 0; grid-template-columns: 1fr; }
.itemlist li { width: 100%; height: auto; grid-gap: 0.7em; grid-template-columns: repeat(auto-fit, minmax(2em, auto)); padding: 0.4em 0; margin: 0; border-bottom: 0.0625em solid; text-align: right; }
.itemlist li:first-child { border-top: 0.0625em solid; }
.itemlist li > * { display: block; margin: 0; padding: 0; }
.itemlist > li > *:first-child { width: 100vw; /* This makes the first 1fr and keeps other to min */ text-align: left; }
.itemlist > li > *:last-child { width: auto; text-align: right; margin-right: 0; }
.itemlist > li > svg:last-child { width: 1em; }
.itemlist li span { display: block; }
.itemlist li span span { display: inline; }
.itemlist li .wide { grid-column: 2 / -1; }
.itemlist li svg.btn { padding: 0.1em; }
.itemlist li p { grid-column: 1 / -1; font-size: 0.8em; }
.itemlist li .fineprint { padding-top: 0.5em; }
.itemlist li details { grid-column: 1 / -1; text-align: right; }
.itemlist li summary { display: grid; grid-template-columns: 3em 1fr 3fr 3em; font-variation-settings: "wght" 450; }
.itemlist li details span { display: inline; width: max-content; }
.itemlist li details div { /*display: block; CAUSES ISSUES WITH .mini */ padding: 0; text-align: left; font-variation-settings: "wght" 200; }
.itemlist li .flex label { display: block; }
.itemlist li .flex svg { padding: 0; }
.itemlist.cols li { grid-template-columns: repeat(auto-fit, minmax(8em, 1fr)); font-size: 0.9em; text-align: left; }
.itemlist.cols li > :last-child { position: absolute; right: -2em; margin: 0.3em 0 auto auto; height: 100%; }
.itemlist.cols li > :last-child svg { width: 1em; padding: 0; opacity: 0.8; }
.itemlist #popped { display: block; width: 100%; aspect-ratio: 1 / 1; margin: auto; background-color: var(--brack); border-radius: 50%; }
.itemlist .truncate { width: 100%; max-width: unset; max-height: unset; height: 60vh; margin: 0; }
table.itemlist tr { border-top: 1px solid; }
table.itemlist tr:first-child { border-top: none; }
.cards { }
.cards li { background-color: var(--input); padding: 1em; display: inline-block; -webkit-filter: drop-shadow(1px 1px 0.15em var(--lowlight)); width: calc(100% - 0.1em); }
.cards li input[type=submit] { margin: auto; }
.cards.truncate { max-height: 33vh; padding: 0.2em; }
.cards.truncate::after { content: ''; }
.cards.truncate li::after { background-color: inherit; }
.cards li > button { width: auto; padding: 0.3em; margin: 1em 0 1em auto; font-size: 0.8em; }
.feats { grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); grid-gap: 0.7em; text-align: left; }
.feats li { display: grid; grid-template-rows: 3em 2.5em 1fr 2em; grid-gap: 0.4em; aspect-ratio: 3 / 4; margin: 0; background-color: rgba(0, 0, 0, 0.1); border: 1px dashed; border-radius: 0.35em; padding: 0.7em; }
.feats li svg { width: 2em; padding: 0; }
.feats li h4 { padding: 0.35em 0 0; font-size: 1em; }
.feats li p { font-size: 0.85em; }
.feats li p.quote { font-size: 1.5em; width: 100%; }
.feats li a { color: var(--lowlink); display: contents; }
.feats li a svg { margin: 0; padding: 0.15em; /* color: var(--action); affects inki home */}
.feats li:hover, .feats li:active, .feats a li:hover, .feats a li:active { background-color: rgba(0, 0, 0, 0.3); }
.feats.cards { }
.feats.cards li { grid-template-rows: 1fr 2fr; color: var(--cream); border: none; padding: 0; place-content: center; text-align: center; grid-gap: 0; margin: auto; border-radius: 0 ; -webkit-filter: unset; opacity: 0.9; }
.feats.cards li * { padding: 0; }
.feats.cards li > :first-child { background-color: rgba(0, 0, 0, 0); padding: 1rem; display: grid; place-content: center; }
.feats.cards li > :last-child { background-color: rgba(240, 240, 240, 0.8); color: black; padding: 1rem; }
.feats.cards h3 { width: fit-content; font-family: Oswald; margin: auto; }
.feats.cards li:hover { background-color: revert; }
.recto { }
.recto li { display: grid; grid-template-rows: 1fr auto; place-content: center; background-color: var(--brock); }
.recto li.verso,
.recto li:hover { background-color: var(--cafli); color: var(--brown); }
.recto li * { margin: auto; }
.recto li > svg { display: block; position: absolute; margin: auto; right: 0; left: 0; bottom: 1.5em; top: auto; }
.recto li h4, .recto li h3 { font-family: Advent Pro; padding: 0; }
.recto li.verso h4,
.recto li:hover h4 { display: none; }
.recto li p { display: none; font-size: 0.9em; }
.recto li.verso p,
.recto li:hover p { display: block; }
.recto li div:nth-child(2) { display: none; }
.recto li.verso div:first-child,
.recto li:hover div:first-child { display: none; }
.recto li.verso div:nth-child(2),
.recto li:hover div:nth-child(2) { display: block; }
.cards.recto { grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); grid-gap: 0.7em; text-align: center; }
.cards.recto li { aspect-ratio: 1 / 1; padding: 1.5em; }
.features { display: flex; grid-gap: 0.7em; width: 36rem; max-width: calc(100vw - 2rem); place-items: center; margin: 1em auto; justify-content: center; flex-wrap: wrap; } /* display: grid; grid-template: repeat(auto-fit, 4em) / repeat(auto-fit, 4em); */
.features li { display: grid; grid-template: 1fr 1fr / 1fr ; aspect-ratio: 1 / 1; place-items: center; width: 6em; margin: 0; border: 1px solid; border-radius: 0.35em; padding: 0.5em; }
.features li span { font-size: 0.5em; display: block; text-align: center; vertical-align: middle; margin: auto; padding-top: 1.3em; }
.features li svg { width: 2.5em; padding: 0.2em; margin: auto; }
.features a { color: var(--lowlink); display: contents; }
.tabs { display: flex; background-color: var(--lowlink); margin: 1em auto 0; font-size: 0.8em; }
.tabs li { width: auto; padding: 0.3em 0.8em; display: inline-block; }
.tabs li p { padding: 0.35em 0 0; font-variation-settings: "wght" 450; font-size: 0.8em;}
.tabs li input + label { display: inline;}
.tabs input:checked + label { color: var(--orange); font-weight: 900; }
.tabs label svg { margin: auto; }
.tabs + .tabs { background-color: var(--orange); color: var(--cream); margin-top: 0; }
.tabs + .tabs input[type=radio] + label { color: inherit; opacity: 0.7; }
.tabs + .tabs input[type=radio]:checked + label { opacity: 1; }
.samps { grid-template-columns: repeat(auto-fill, 2em); grid-gap: 0.1em; margin: 0.5em 0; color: unset !important; background-color: unset !important; place-items: center; }
.samps > * { width: 100%; aspect-ratio: 1/1; grid-column: span 1 !important; text-align: center !important; border-radius: 0 !important; margin: auto; padding: 0; min-width: unset; font-size: 0.8em; display: grid; place-content: center;}
ul.offers { display: block; column-width: 30rem; }
.offers div { display: contents; }
.offers li { display: grid; grid-template-columns: 1fr 5em; grid-gap: 1em; }
.offers h3 { text-transform: uppercase; margin-top: 1.5em; grid-column: 1 / -1; }
.offers p { text-align: right; }
.offers.inputlist > * { border: none; }
/* itemlist sub styles */
.title { border-top: none; }
.title > li:first-child { border-top: none; font-weight: 700; font-variation-settings: "wght" 550; }
.total { }
.total > li:last-child { font-weight: 700; font-variation-settings: "wght" 700; border-top: 3px; }
.sticky li:first-child { position: sticky; top: 0; padding-top: 8em; background-color: var(--bkg); z-index: 2; }
ul.checklist { grid-template-columns: 1fr; }
.checklist li { display: grid; grid-template-columns: auto 1fr auto; place-items: center; grid-gap: 1em; width: 100%; }
.checklist li > :nth-child(2) * { text-align: left; padding: 0; }
.checklist li > * { margin: auto; width: 100%; padding: 0; text-align: left; }
.checklist li > svg:first-child { width: 1.3em; }
.checklist { width: 100%; display: grid; grid-template-columns: auto 1fr auto; text-align: left; }
.checklist input + label svg { border-radius: 2em; border: 1px solid; width: 1.3em; padding: 0.2em; top: 0; }
.checklist input:checked + label svg { border-radius: 2em; border: none; background-color: var(--action); color: var(--textaction); }
.checklist input + label svg[nn=trash] { border: none; padding: 0; opacity: 0.1; }
.checklist input:checked + label svg[nn=trash] { background: none; color: var(--orange); opacity: 1; }
.checklist > details { padding: 1em; background-color: var(--textaction); margin: 0.5em auto; }
.checklist > details > summary { display: grid; grid-template-columns: minmax(2.5em,auto) 1fr auto; }
.checklist > details > summary p { grid-column: 1 / -1; }
.checklist > details > summary * { padding: 0; width: 100%; text-align: left; }
.checklist fieldset { padding: 2em; background-color: var(--textaction); }
.checklist > details[open] { background-color: var(--grock); }
.checklist > details[open] > summary { padding-bottom: 1em; color: var(--brown); font-variation-settings: "wght" 400; }
.checklist button.inline { margin: 0; }
.checklist button.inline svg { margin: 0; }
.stat { font-size: 0.8em; }
.stat li { grid-template-columns: 1fr minmax(3.5em, auto); }
.stats li { grid-template-columns: repeat(auto-fit, minmax(1em, auto)); grid-gap: 1em; place-content: end; font-size: 0.8em; }
.stats li > * { text-align: right; /* display: block; */ min-width: 4em; }
.stats li > *:empty { min-width: unset; }
.stats li > :first-child { text-align: left; max-width: 90vw; padding-left: 0; }
.itemlist.issues { text-align: left; }
.itemlist.issues span { width: 100% !important; padding-left: 0; }
.itemlist.issues .itemlist li { border-bottom: none; border-top: 0.3px dashed; text-align: left; }
.itemlist.issues li summary { grid-template-columns: 1fr auto; }
.itemlist.issues .itemlist li { grid-template-columns: minmax(3em, auto) 1fr minmax(3em, auto) minmax(3em, auto); grid-gap: 0.5em; }
.itemlist.issues .itemlist details { grid-column: 1 / -1; }
.itemlist.issues .itemlist li summary { grid-template-columns: minmax(3em, auto) 1fr minmax(3em, auto) minmax(3em, auto); grid-gap: 0.5em; }
.tab { text-align: left; }
.tab li { grid-template-columns: 1fr 2fr 2fr; font-size: 0.9em; }
.tab li > :last-child { text-align: left; }
.tab p { grid-column: 2 / 4; font-style: italic; }
.tab span:first-child { font-weight: 700; }
.itemlist.tab li { text-align: left; grid-template-columns: 1fr 2fr 2fr; }
.itemlist.tab p { grid-column: 2 / 4; font-style: italic; }
/* cards sub styles */
.log li { width: 100%; display: block; padding: 0.5em; text-align: left; }
.log li > * { }
.log h3 { font-weight: 700; font-size: 0.9em; padding: 0.3em 0; }
.raw { grid-gap: 0; grid-template-columns: 1fr; width: 100%; margin: 0; font-size: 0.7em; max-width: unset; }
.raw li { width: 100%; grid-gap: 0.7em; grid-template-columns: repeat(auto-fit, minmax(4em, auto)); padding: 0.4em 0; margin: 0; text-align: left; }
.raw li > :first-child { width: 50vw; display: inline; overflow-x: scroll; padding: 0; }
.raw li details { padding: 0; line-height: 1em; text-align: right; width: 5em; }
.raw li details[open] {}
.raw li details[open] > div { overflow: visible; width: auto; margin: 0 0 0 -80vw; padding: 1em 0 0; }
.threads { margin: 1em auto; display: grid; grid-gap: 0.5em; max-width: 24rem; }
.threads li { display: grid; grid-gap: 0.5em; grid-template-columns: 2em auto 1fr 2em 2em; font-size: 0.9em; width: 100%; padding: 0.7em; place-items: center; border-radius: 0.3em; }
.threads span { position: relative; width: 100%; margin: auto 0; padding: 0; display: block; }
.threads li > span:nth-child(2) { padding: 0.25em 0.7em 0 0; }
.threads li > span:last-child { border-radius: 2em; background-color: rgba(255, 255, 255, 0.3); padding: 0.5em; font-variation-settings: "wght" 700; font-size: 0.85em; text-align: center; }
.threads .reddot { top: -0.05em; right: -0.08em; }
.threads .back { height: 100%; width: 100%; bottom: 0.35em; opacity: 0.4;}
.exec { grid-template-columns: repeat(auto-fit, minmax(13.5%, 11em)); place-content: center; grid-gap: 1em; text-align: center; }
.exec > * { aspect-ratio: 1 / 1; font-size: 1.5em; }
.exec svg { }
.exec li { border-radius: 50%; background: none; text-align: center; }
.exec img { object-fit: cover; }
.exec img, .exec .veil, .exec .bkg, .exec .pix
{ aspect-ratio: inherit; border-radius: inherit; }
.exec li h2, .exec li h3, .exec li h4, .exec li p, .exec li span, .exec li label, .exec li > *:last-child
{ position: absolute; bottom: 1em; height: auto; max-height: 100%; padding: 0.3em; min-width: unset; background-color: unset; }
.badges { display: flex; width: max-content; margin: 1em 0 0; }
.badges svg { width: 2.5em; padding: 0.5em; background-color: rgba(0, 0, 0, 0.2); color: white; border-radius: 2em; }
.icons { grid-gap: 0.7em; grid-template-columns: repeat(auto-fit, 4em); margin: 1em auto; place-content: center; }
.icons * { margin: auto; padding: 0; }
.icons li { aspect-ratio: 1 / 1; display: grid; grid-gap: 0.1em; grid-template-rows: 2fr 1fr; width: 100%; margin: 0; }
.icons svg { width: 65%; padding: 10%; margin: auto !important; }
.icons span { display: block; width: 100%; font-size: 0.8em; text-align: center; }
.icons li h4 { padding: 0; text-align: center; }
.icons p { font-size: 0.65em; text-align: center; }
.icons input[type] + label svg { width: 65%; padding: 15%; margin: auto; }
.thumbs.icons svg { /* width: 3em; */ }
.thumbs.icons li { padding: 1em; }
.asbm.icons input[type] + label { aspect-ratio: 1 / 1; margin: 0; grid-gap: 0.3em; }
/* was auto-fit for ever;.. this was what causes images to go big - there may be places where we need it */
.thumbs { grid-gap: 0.3em; grid-template-columns: repeat(auto-fill, minmax(6em, 1fr)); justify-content: center; color: white; max-width: unset; }
.thumbs li { background-color: black; padding: 0; border-radius: 0; width: 100%; position: relative; aspect-ratio: 1 / 1; border: none; }
.thumbs > * { /* max-width: 12em; DON'T KNOW WHERE THIS HELPS - CAUSES ISSUES ON FREEDOM LANDING */}
.thumbs > div { line-height: 0; }
.thumbs > h3 { aspect-ratio: unset; border-bottom: 1px solid; }
.thumbs a { color: currentColor; }
.thumbs h2 { position: absolute; width: 100%; height: auto; bottom: 0; padding: 0.5em; font-size: 2em; vertical-align: bottom; text-align: left; padding: 0.2em; }
.thumbs li > div { object-fit: contain; object-position: center; min-width: 100%; margin: auto; aspect-ratio: 1 / 1; line-height: 0.8em; }
.thumbs img { object-fit: cover; object-position: center; min-width: 100%; min-height: 100%; margin: auto; }
.thumbs .veil { background-image: linear-gradient(20deg, rgba(0, 0, 0, 0.9) 0.5em, rgba(0, 0, 0, 0.1) 40%); background-color: unset; opacity: 1; }
.thumbs svg { width: 20%; padding: 0; position: absolute; top: 0.5em; right: 0.5em; margin: 0; }
.thumbs > svg { width: 100%; padding: 15% 20% 30%; }
.thumbs *[name] svg { position: absolute; color: white; right: 0; margin: 0 0 auto auto; padding: 0.3em; top: 0; }
.thumbs svg + div { opacity: 0.3; }
.thumbs a.off > svg { padding: 25%; margin: 0; top: 0; color: var(--yellow); opacity: 0.7; }
.thumbs a.conts *:hover { color: var(--cafe); }
.thumbs svg[nn=close] { display: none; }
.thumbs .pix { background: none; -webkit-filter: unset; }
.thumbs .icons { display: none; }
.thumbs li h2, .thumbs li h3, .thumbs li h4, .thumbs li > p, .thumbs li > span, .thumbs li > label, .thumbs li > *:last-child
{ position: absolute; bottom: 0; height: auto; max-height: 100%; padding: 0.3em; min-width: unset; background-color: unset; }
.thumbs li .flag { height: 1em; margin: 0; left: 0.2em; padding: 0; -webkit-filter: drop-shadow(1px 1px 1px #333); }
.thumbs li > *:first-child { padding: 0; border-radius: inherit; }
.thumbs li > input[type]:checked + label img { border: 2px solid var(--editBl); }
.thumbs.truncate { max-height: 20em; padding: 0; }
.thumbs.truncate::after { background-color: var(--yellow); content: '•••'; color: black; width: 2em; position: sticky; padding: 0.5em 0.2em 0; display: block; border-radius: 2em 2em 0 0; margin: auto auto 0; text-align: center;
right: 0; left: 0; bottom: 0; top: auto; grid-column: 1 / -1; }
.thumbs.mid { grid-template-columns: repeat(auto-fit, minmax(13.5%, 7em)); }
.thumbs.mid * { font-size: 0.9em; }
.thumbs.exec { grid-template-columns: repeat(auto-fit, minmax(12em, auto)); grid-gap: 1em; text-align: center; }
.thumbs.exec li { text-align: center; border-radius: 50%; }
.thumbs.exec svg { width: 15%; }
.thumbs.exec .title { bottom: 1.2em; top: unset; font-size: 0.6em; position: absolute; color: white; text-align: center; width: 100%; }
.thumbs.exec .title * { display: block; position: static; padding: 0; margin: 0; }
.thumbs.many { grid-template: repeat(11, minmax(2em, 1fr) ) / repeat(11, minmax(2em, 1fr) ) !important; grid-gap: 0; position: absolute; aspect-ratio: 1 / 1; min-height: 100vw; min-width: 100vh; margin: auto; top: -70vw; bottom: -70vw; right: -70vh; left: -70vh; /*width: auto !important; */}
.thumbs.many h2 { font-size: 0.7em; padding: 0.4em 0.3em; opacity: 0.5; }
.thumbs.many li:hover h2 { opacity: 1; }
.thumbs.many li > svg { position: absolute; top: 0; right: 0em; left: 0; bottom: 0; margin: auto; color: var(--green) !important; }
.thumbs.many li:nth-child(7n +1) > svg { color: var(--pink); }
.thumbs.many li:nth-child(7n +2) > svg { color: var(--turquoise); }
.thumbs.many li:nth-child(7n +3) > svg { color: var(--orange); }
.thumbs.many li:nth-child(7n +4) > svg { color: var(--purpl); }
.thumbs.many li:nth-child(7n +5) > svg { color: var(--cream); }
.thumbs.many li:nth-child(7n +6) > svg { color: var(--apple); }
.thumbs.many li:nth-child(7n +7) > svg { color: var(--yellow); }
.thumbs .midtile { text-align: center; -webkit-filter: drop-shadow(0px 0px 44px white); z-index: 3; }
.thumbs .midtile h2 { color: white; opacity: 1; text-align: center; }
.thumbs .midtile p * { display: inline; position: relative; }
.thumbs .midtile svg { color: inherit !important; width: 1.5em; top: -1em !important; }
.under li { background-color: unset; }
.under > * { }
.under > * > * { aspect-ratio: 1 / 1 !important; }
.under div.bkg { position: static; }
.under div.veil { margin: 0; min-height: unset; }
.under h2, .under h3, .under h4, .under p, .under span, .under label, .under > * > *:last-child
{ position: static !important; color: var(--text) !important; aspect-ratio: unset !important; padding: 0.5em 0 !important; }
.box { grid-template-columns: repeat(auto-fit, minmax(8em, auto)); justify-content: center; max-width: calc(100% - 8em); }
.box > * { display: grid; place-content: end; text-align: right; border: 1px solid; color: var(--text); aspect-ratio: 1 / 1; padding: 0.5em; margin: 0; background-color: transparent; }
.box > a { color: var(--text); }
.box span { width: min-content; }
.box li > a { width: min-content; }
.fs > .thumbs { width: 100vw; max-width: unset; grid-template-columns: repeat(auto-fit, minmax(34vh, 1fr) ); grid-gap: 0.05em; background-color: var(--black); }
.fs > .thumbs > * { aspect-ratio: 1 / 1; display: block; margin: 0; }
.fs > .thumbs > a { display: contents; }
.fs svg.btn { background-color: var(--action); color: var(--textaction); border: none; }
.quadrant { display: grid; grid-template: 1fr 1fr / 1fr 1fr; grid-gap: 10em; width: 100vw; max-width: 100%; }
.quadrant > div { width: 100%; overflow: hidden; }
.quadrant > div > div { margin: inherit; }
.quadrant > :first-child { margin: auto 0 0 auto; text-align: left; place-content: start; }
.quadrant > :nth-child(2) { margin: auto auto 0 0; text-align: right; place-content: end; }
.quadrant > :nth-child(3) { margin: 0 auto auto 0; text-align: left; place-content: start; }
.quadrant > :last-child { margin: 0 0 auto auto; text-align: right; place-content: end; }
@media only screen and (orientation: portrait) {
.fs > .thumbs { grid-template-columns: repeat(auto-fit, minmax(25vw, 1fr) ); }
.box { max-width: unset; }
}
@media only screen and (max-width: 609px) {
.thumbs.exec { grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); grid-gap: 0.8em; }
}
.fw { height: unset; max-width: calc(100vw - 2rem); position: static; }
.newObj { border: 2px dotted currentColor; opacity: 0.5; padding: 0.3em; margin-bottom: 1em; }
div.newObj { background: none; border: 2px dotted currentColor; padding: 0.3em; text-align: center; height: auto; opacity: 0.5; }
div.newObj svg { position: static; display: block; width: 1.5em; height: 3.5em; margin: auto; }
h3.newObj { margin-top: 1em; }
.newObj h2 { color: currentColor; }
.newObj p { padding: 0; position: static; margin: auto auto 0; }
.thumbs .newObj { display: block; border: 2px dotted currentColor; }
.thumbs .newObj p { margin: 2.5em 0; padding: 0; }
.thumbs .newObj { padding: 0.5em; }
.thumbs .newObj svg { position: absolute; bottom: 12%; left: 0; right: 0; top: 0; margin: auto; }
.exec .newObj p { font-size: 0.6em; width: calc(100% - 1.4em); padding: 0; }
.titles { grid-gap: 0.2em; grid-template: repeat(auto-fit, minmax(8em, auto)) / repeat(auto-fit, minmax(8em, auto)) ; }
.titles a { width: 100%; padding: 0; }
.titles li { width: 100%; height: 11.8em;}
.titles h2 { left: 0; }
.titles svg { position: absolute; top: 1em; right: 1em; left: auto; width: 1.5em; padding: 0; }
.titles button { display: contents; }
.titles form { cursor: pointer; height: 100%; }
.titles form * { cursor: pointer; }
.titles .newObj { color: black; }
.picker { width: 100%; margin: 2em auto; grid-column: 1 / -1; }
.picker .thumbs > * { background: none; }
.picker .thumbs .veil { background: none; }
@media only screen and (max-width: 609px) {
.picker .thumbs { font-size: 0.85em; grid-template-columns: repeat(auto-fit, minmax(4.5em, auto) ); }
.icons { grid-gap: 0; }
.titles { grid-template: repeat(auto-fit, 45vw) / repeat(auto-fit, 45vw);}
.titles li { height: 45vw;}
ul.offers { grid-gap: 0.5em; }
.offers li { padding: 0; }
}
.stepper { display: grid; justify-content: space-around; grid-template-columns: repeat(auto-fit, 5em); background-color: currentColor; max-height: 0.3em; margin: 1em auto 5em; border-radius: 1em; position: relative;}
.stepper li { display: grid; grid-template: 2.3em / 1fr; place-items: center; text-align: center; font-size: 0.8em; position: relative; top: -0.6em; }
.stepper li:first-child { background-color: var(--yellow); min-width: 2em; max-width: 100%; position: absolute; top: 0; height: 0.3em; font-size: 1em; border-radius: 1em;}
.stepper .done svg { color: var(--yellow); }
.stepper + * { margin-top: 0; padding-top: 0; }
@media only screen and (max-width: 609px) {
.stepper { grid-template-columns: repeat(auto-fit, 3.5em); }
.stepper li span { font-size: 0.85em; }
.thumbs h2 { font-size: 1.1em; }
}
ul.sidelabel { grid-template: 1fr / 1fr !important; }
ul.sidelabel li { grid-template: 1fr / 1fr 3fr 2em; text-align: left; }
ul.sidelabel li span { margin: 0; }
/*////////////////// */
.jobs li { grid-template-columns: 4em 1fr auto; }
.profiles { width: 24em; border: none; }
.profiles li { grid-template-columns: 4em 1fr auto; place-items: center; overflow: hidden; background-color: var(--cream); margin: 0.5em auto; border-radius: 5em; }
.profiles li div { font-size: 0.8em; }
.profiles svg { margin: auto; width: 4em; padding: 1em; top: 0; }
.profiles div:first-child { overflow: hidden; border-radius: 5em; width: 5em; height: 5em; }
.profiles img { width: 5em; height: 5em; object-fit: cover; }
.profiles a { position: absolute; top: 0; bottom: 0; right: 1.5em; opacity: 0.1; width: auto; height: 4em; }
.profiles li > p { padding: 1em 1.5em 1em; min-width: 3em; opacity: 0.4; }
.intro { display: grid; grid-template: 1fr 1fr 4em / 1fr; grid-gap: 1.5em; place-items: unset; margin: auto; padding-top: 8em; width: 24em; right: 0; left: 0; max-width: calc(100% - 2em); }
.intro > div { width: 70%; font-size: 0.9em; -webkit-filter: drop-shadow(1px 1px 2px #000); padding: 0; }
.intro .b_line { text-align: right; margin: auto 0 0 auto; }
.intro .pledge { text-align: left; margin: 0 auto auto 0; }
.intro button { padding: 0.5em 1em; margin: 1em 0; background-color: transparent; color: currentColor; border-color: currentColor; }
.intro h1 { margin: 0 auto; font-family: Oswald; font-size: 2.7em; padding: 0.7rem 0; font-variation-settings: "wght" 350; }
.intro .gauge span:first-child { background-color: black; }
.intro .gauge span ~ span { background-color: var(--yellow); }
.intro .gauge svg { background-color: black; color: var(--yellow); }
.intro .gauge svg.on { background-color: var(--yellow); color: black; }
.pledge { place-content: end; position: relative; }
.pledge * input[type=submit]{ margin: 1.7em auto 0 0; border: 2px solid;background-color: transparent; font-weight: 700; }
.pledge .back { opacity: 0.25; color: var(--turquoise); z-index: 0; height: 65%; width: 65%; background: none; bottom: 1.5em; }
.pledge h3 { padding: 0.5em 0; }
.pledge form { padding: 0; }
.b_line { place-content: start; margin-top: 1rem; }
@media only screen and (max-width: 609px) {
.intro { padding: 4em 1em; }
.intro > div { min-width: 18em; height: auto; }
}
/* /////////////////////////////////////////////////////// */
/* */
/* /////////// --------- IMAGES --------- /////////// */
/* */
/* /////////////////////////////////////////////////////// */
img { width: 100%; height: 100%; object-fit: cover; }
.veil { position: absolute !important; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(4, 0, 0, 0.45); z-index: 0; }
.bkg { position: absolute; height: 100%; width: 100%; object-fit: cover; padding: 0; background: black; left: 0; right: 0; color: var(--cream); z-index: 0; line-height: 0; }
.bkg img { object-fit: cover; }
.bkg p { margin: auto; height: max-content; width: 70%; position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
.bkg ~ * { color: var(--cream); position: relative; }
.bkg ~ * a { color: var(--fs-text); }
form .bkg { top: 0; }
img[src=''], img:not([src]) { display: none; }
.bkg:empty, [ajf] .bkg { background: url('icons/gallery.svg') no-repeat 10vh 20vh; background-size: 20vh; }
/* UPLOAD & FORMS */
.pix { background: var(--lowbkg) url("icons/gallery.svg") no-repeat 70% 75%; background-size: 20%; aspect-ratio: 1 / 1; display: block; -webkit-filter: drop-shadow(1px 1px 2px #222); width: 100%; overflow: hidden; }
.pix:empty { min-height: 5em; }
.pix.icon { width: 8em; aspect-ratio: 1 / 1; background-position: 50% 50%; background-size: 50%; margin: 0; }
.preview { max-width: 16em; max-width: 16em; aspect-ratio: 1 / 1; object-fit: contain; background-color: black; display: inline-block; }
.thumb { aspect-ratio: 1 / 1; object-fit: cover; background-color: black; overflow: hidden; border-radius: 50%; font-size: 1em; margin: auto; padding: 0; max-width: 3em; }
/* SVG STYLES */
.illust { display: block; margin: 2em auto; width: 8em; }
/* FEATURES */
.scan img { max-width: 36rem; width: 12em; padding: 2em 0; display: block; }
.flag { display: inline-block; height: inherit; object-fit: cover; overflow: hidden; background: var(--editBl) url(icons/flag.svg) no-repeat; background-size: 1em;
aspect-ratio: 1 / 1; border-radius: 1em; position: relative; top: 0.2em; height: 1.15em; margin: 0.5em 0.85em 0 0; }
.flag img { }
.flag + * { display: inline-block; }
.flag + * input { width: 5em; }
.flag:last-child { margin: 0.5em 0 0 0.85em; }
p .flag { }
/* /////////////////////////////////////////////////////// */
/* */
/* /////////////// ----- LAYOUTS ----- /////////////// */
/* */
/* /////////////////////////////////////////////////////// */
.fs .square { min-width: 100vh; min-height: 100vw; position: absolute; top: -70vw; bottom: -70vw; left: -70vh; right: -70vh; margin: auto; }
.square { display: grid; grid-template: repeat(auto-fit, minmax(3em, 1fr)) / repeat(auto-fit, minmax(3em, 1fr)); grid-gap: 0; width: 100%; height: 100%; aspect-ratio: 1 / 1; margin: auto; }
.square.s9 { grid-template: repeat(3, minmax(34vh, 1fr) ) / repeat(3, minmax(34vh, 1fr) ); }
.square.s25 { grid-template: repeat(5, minmax(20vh, 1fr) ) / repeat(5, minmax(20vh, 1fr) ); }
.square.s49 { grid-template: repeat(7, minmax(15vh, 1fr) ) / repeat(7, minmax(15vh, 1fr) ); }
.square.s81 { grid-template: repeat(9, minmax(11vh, 1fr) ) / repeat(9, minmax(11vh, 1fr) ); }
.square.s121 { grid-template: repeat(11, minmax(10vh, 1fr)) / repeat(11, minmax(10vh, 1fr)); }
.square.s169 { grid-template: repeat(13, minmax(8vh, 1fr) ) / repeat(13, minmax(8vh, 1fr) ); }
.square.s225 { grid-template: repeat(15, minmax(7vh, 1fr) ) / repeat(15, minmax(7vh, 1fr) ); }
.square li { -webkit-filter: none; }
.square li h2 { font-size: 0.7em; padding: 0.4em 0.3em; opacity: 0.5; }
.sqiare li:hover h2 { opacity: 1; }
.square li > svg { position: absolute; top: 0; right: 0em; left: 0; bottom: 0; margin: auto; color: var(--green) !important; }
.square li > svg:first-child:last-child { margin: auto; }
/*
.thumbs.many { grid-template: repeat(11, minmax(2em, 1fr) ) / repeat(11, minmax(2em, 1fr) ) !important; grid-gap: 0; position: absolute; aspect-ratio: 1 / 1; min-height: 100vw; min-width: 100vh; margin: auto; top: -70vw; bottom: -70vw; right: -70vh; left: -70vh; }
.thumbs.many h2 { font-size: 0.7em; padding: 0.4em 0.3em; opacity: 0.5; }
.thumbs.many li:hover h2 { opacity: 1; }
.thumbs.many li > svg { position: absolute; top: 0; right: 0em; left: 0; bottom: 0; margin: auto; color: var(--green) !important; }
*/
.circle9 { display: grid; grid-template: 20em 14em 20em / 20em 14em 20em; grid-gap: 1em; max-width: unset; width: fit-content; margin: auto; font-size: 0.85em; }
.circle9 li { aspect-ratio: 1 / 1; border-radius: 50%; height: 14em; padding: 1.5em; margin: auto; }
.circle9 li:nth-child(1) { margin: auto 0 0 auto; }
.circle9 li:nth-child(2) { margin: 0 auto auto; }
.circle9 li:nth-child(3) { margin: auto auto 0 0; }
.circle9 li:nth-child(4) { margin: auto auto auto 0; }
.circle9 li:nth-child(5) { margin: auto; background-color: var(--cafli); color: var(--dark); }
.circle9 li:nth-child(6) { margin: auto 0 auto auto; }
.circle9 li:nth-child(7) { margin: 0 0 auto auto; }
.circle9 li:nth-child(8) { margin: auto auto 0 auto; }
.circle9 li:nth-child(9) { margin: 0 auto auto 0; }
.circle9 li:last-child { margin: 0 auto auto 0; }
.fs .circle9 { }
@media only screen and (max-width: 1024px) {
.circle9 { font-size: 0.7em; }
}
@media only screen and (max-width: 780px) {
.circle9 { grid-template: 4em / 1fr; grid-gap: 0.5em; width: 100%; }
.circle9 li { aspect-ratio: unset; border-radius: unset; height: 4em; width: 100%; padding: 1em; margin: 0; }
.fs .circle9 { position: static; margin: 1em auto; width: calc(100vw - 3em); max-width: 24em; }
.fs .cnr.tl { position: static; padding: 5em 1.5em 0; width: 24em; max-width: width: calc(100vw - 3em); }
}
/* /////////////////////////////////////////////////////// */
/* */
/* //////////// ----- DND / STACKS ----- //////////// */
/* */
/* /////////////////////////////////////////////////////// */
/* General DND */
.up { }
.targets { opacity: 0.8; border: 1px dashed var(--apple); }
.targets:hover { border: 2px solid; opacity: 1; }
/* Stacks */
.stack { height: 100vh; height: -webkit-fill-available; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.stack > div { display: none; position: relative; height: 100%; width: 100%; }
.stack > div:first-child { display: grid; }
.stack .veil { position: fixed !important; }
.stack > .sidelabel { grid-template-columns: 1fr 3fr; max-width: 40em; grid-gap: 2em; }
.slides { color: var(--cream); }
.slides .veil { background-color: rgba(0, 0, 0, 0.65); }
.slides .bkg { position: fixed; }
.slides .prompt { position: absolute; top: 0; left: 0; right: 0; margin: auto; padding: 8rem 0 0; height: auto; max-width: calc(100vw - 2em); }
.slides .stack > div { -webkit-filter: unset; padding: calc(50vh - 15em) calc(50vw - 15em); place-content: center; aspect-ratio: 1 / 1; }
.prompt .oneword { font-size: 1.7em; text-align: left; }
.prompt svg.back { width: 30vh; bottom: 0; top: auto; margin-bottom: -33vh; }
.slides .present { display: grid; grid-template: 2fr 1fr auto / 1fr; place-content: center; aspect-ratio: 1 / 1; margin: 0; width: 30em; }
.slides .present > * { margin: auto; }
.slides .present a.button { margin: 0 auto; border: 1.5px solid currentColor; height: 2.7em; width: 2.7em; padding: 0.7em 0; text-align: center; border-radius: 3em; font-variation-settings: "wght" 900; text-transform: uppercase; }
.slides .present.meetup { aspect-ratio: 4 / 3 ; margin-top: 5em; }
.fs.slides { }
.fs.slides .focalPoint { width: 30rem; }
.fs.slides .btn { aspect-ratio: 1 / 1; border-radius: 50%; width: auto; height: auto; padding: 0.7em; color: white; background-color: var(--editBl); font-family: Oswald; border: none; opacity: 1; }
.fs.slides .btn svg[nn=oops] { margin: 0; top: 0.17em; }
.fs.slides input + label.btn:hover { background-color: var(--sored); }
.fs.slides input:checked + label.btn { background-color: black; color: var(--editBl); }
/*.fs.slides input:checked + label.btn::before { content: url('icons/yes.svg'); color: var(--editBl); }*/
.fs > button { padding: 0.5em; border-radius: 50%; margin: 0 auto; }
.fs > button svg { margin: 0; padding: 0; top: 0.15em; width: 1.5em; }
.yes input + label.btn { padding-left: 1.2em }
.yes label svg[nn=yes] { display: none; }
.yes input:checked + label svg { display: none; }
.yes input:checked + label svg[nn=yes] { display: inline; }
.yes input:checked + label.btn { padding-left: 0.7em; padding-right: 1.2em }
@media only screen and (max-width: 609px) {
.fs.slides > * { font-size: 0.8em; }
.slides { }
.slides .present { width: calc(100vw - 8em); }
.slides .present.meetup { margin-top: 9em; }
}
/*.action { display: contents; height: 100%; width: 100%; position: absolute; }
.action button { position: absolute; top: auto; bottom: auto; right: 0; left: 0; margin: auto; border: none; overflow: hidden; max-width: 3em; max-height: 3em; padding: 0; color: var(--cream); background-color: transparent; }
.action button svg { height: 8em; width: 8em; opacity: 0.5; top: 0; -webkit-filter: drop-shadow(1px 1px 5px white); }*/
button.land svg, .action button:active svg { opacity: 0.7; color: white; -webkit-filter: drop-shadow(1px 1px 5px black); }
/*.action button:hover { color: white; }*/
.swipe { }
.swipe > div { }
.browse > div { position: absolute; }
.browse + .action button { max-height: 10em; }
.browse + .action button:first-child { right: unset; top: calc(55% + 3rem); } .browse + .action button:first-child svg { left: 1em; }
.browse + .action button:last-child { left: unset; bottom: 45%; } .browse + .action button:last-child svg { right: 6em; }
.stack .up { background-color: black; opacity: 0.95; max-width: 99vw; max-height: 99vh; transition: right 0.3s, left 0.3s; }
.stack .up.w { transform: rotate(1deg); right: 2em; left: -2em; }
.stack .up.e { transform: rotate(-1deg); right: -2em; left: 2em; }
.swipe .up .bkg { max-height: 70vh; height: 70vh; width: 70vh; overflow: hidden; border-radius: 50%; }
.swipe .land { color: var(--pink); opacity: 1; pointer-events: none; }
.split .zone .swipe { height: 42vh; }
.stack .pages { padding: 3em; bottom: 5em; z-index: 5; }
.pages { margin: auto; display: grid; grid-template-columns: repeat(auto-fit, 1.2em); place-content: center; }
.unfolding { font-size: 0.7em; opacity: 0.8; }
.slide .up { opacity: 1; }
.orderer { grid-gap: 0; }
.orderer li { border-bottom: 0.5em solid var(--bkg); }
.orderer li > *:first-child { font-weight: 900; min-width: 5em; }
.orderer li:empty { padding: 0.1em; }
.orderer .makeroom { border-bottom: 1.5em solid var(--turquoise); margin-bottom: 0; }
.orderer .makeroom + li { margin-top: 0; }
/*
.swipe svg { height: 3em; width: 3em; display: block; background-color: rgba(0,0,0,0.5); border-radius: 5em; padding: 0.8em; }
.swipe div.usr { position: absolute; left: 3em; right: 3em; bottom: 3em; margin: auto; background-color: rgba(0,0,0,0.3); padding: 2em; }
.swipe label { position: absolute; width: fit-content; margin: auto; }
.swipe .ok { right: 1.3em; bottom: 6em; }
.swipe .ko { left: 1.3em; bottom: 6em; }
.swipe .hm { bottom: 1.3em; right: 0; left: 0; }
.swipe > p { width: 70%; height: fit-content; margin: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.swipe:empty { background-color: transparent; }
*/
/* /////////////////////////////////////////////////////// */
/* */
/* /////////// -------- FEATURES -------- /////////// */
/* */
/* /////////////////////////////////////////////////////// */
.on { opacity: 1; }
.off { opacity: 0.5; color: var(--lowlink); }
.oSts { position: relative; margin: 0 0.5em; color: var(--blood); opacity: 1; }
.oSts.on { color: var(--apple); }
.login svg.oSts { padding: 0.2em; top: 0.05em }
input:checked + .menu,
input:checked + .notif { color: var(--cream); opacity: 1; }
.stsBox { position: fixed; top: 3.7rem; right: 0; width: auto; font-size: 0.7em; background-color: black; border-radius: 1.5em 0 0 1.5em; padding: 0.5em 2em 0.5em 0.85em; display: grid; place-items: center; grid-template-columns: auto 1fr; color: var(--cream); z-index: 2; transition: height 0.4s; transition: width 0.4s; max-width: 70vw; }
.stsBox > * { margin: 0; max-width: 35vh; }
.stsBox .status { display: flex; /*grid-template-columns: repeat(auto-fit, minmax(2em, auto)); */grid-gap: 0.3em; }
.stsBox .status span { display: grid; grid-template-columns: repeat(2, auto); place-items: center; }
.stsBox div span svg { margin: 0 0.3em 0 1em; }
.ctnBox { display: contents; }
.ctnBox > * { background-color: rgba(0, 0, 0, 0.7); color: var(--white); border-radius: 0 1em 1em 0; -webkit-filter: drop-shadow(1px 2px 3px #333); }
.ctnBox > label { position: fixed; top: 5em; min-width: unset; padding: 0.35em; z-index: 1; }
.ctnBox > label svg { width: 0.8em; top: 0; }
.ctnBox > div { position: fixed; top: 7.25em; width: 60vw; max-width: 20em; height: calc(100vh - 6em); padding: 2em 1.5em; text-align: left; font-size: 0.8em; overflow: scroll; }
.ctnBox h4 { font-variation-settings: "wght" 500; }
.ctnBox a { display: block; color: inherit; padding: 0; max-height: 1.25em; overflow: hidden; font-variation-settings: "wght" 200; }
.ctnBox summary a { display: inline; padding: 1em; font-variation-settings: "wght" 400; }
.ctnBox details { margin-top: 1em; }
.ctnBox details > div { padding-left: 1.7em; }
.ctnBox input:checked + label { z-index: 2; padding-left: 1.2em; }
.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(1em, auto)); grid-gap: 0.5em; margin: 1em auto; direction: rtl; place-content: center; font-size: 0.8em; }
.legend > * { margin: auto; }
.legend > span { display: block; border-radius: 50%; aspect-ratio: 1 / 1; height: 1em; width: 1em; }
.legend > span:first-of-type{ display: contents; }
.legend > p { padding-right: 1em; min-width: 5em; text-align: left; }
.poll span { margin: auto 0 auto auto; }
.poll span:nth-of-type(5) { background-color: var(--lowlink); right: 0.75em;}
.poll span:nth-of-type(4) { background-color: black; right: 0.5em; }
.poll span:nth-of-type(3) { background-color: white; right: 0.25em; }
.poll span:nth-of-type(2) { background-color: var(--brred); right: 0; }
.scales { display: block; position: relative; }
.scales .gauge { position: absolute; height: 2.4em; width: 100%; }
.scales .gauge span { margin: 0.7em 0; background-color: var(--tauli); }
.scales .gauge span:first-child { position: static; margin: 0.7em 0; background-color: var(--beige); }
.scales .legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(1em, 1fr)); width: 100%; direction: unset; position: relative; top: 0; margin: 0; color: var(--tauli); }
.scales .legend div { display: grid; grid-template-rows: 2.4em auto; margin: 0; }
.scales .legend svg { width: 100%; height: 0.5em; position: relative; background-color: transparent; padding: 0; place-self: center; color: var(--white); opacity: 0.5; top: 0.25em; }
.scales .legend label { display: none; }
.scales .legend label * { padding: 0; }
.scales .legend label h4 { font-variation-settings: "wght" 800; }
.scales .legend:hover { height: 7em; place-content: start; }
.scales .legend svg:hover { top: 1em; height: 2em; -webkit-filter: drop-shadow(1px 1px 1px var(--tauli)); opacity: 1; }
.scales .legend svg:hover + label { display: block; position: absolute; top: 2.2em; left: 0; width: 99%; height: auto; padding: 1em; text-align: center; background-color: var(--white); -webkit-filter: drop-shadow(1px 1px 1px var(--tauli)); }
.dbl { display: grid; height: 2.4em; width: 100%; max-width: 12em; grid-template-columns: 48% 48%; position: absolute; bottom: auto; right: 0; left: 0; place-content: center; justify-content: space-between; padding: 0 !important; }
.dbl span { height: 0.5em; margin: auto; border-radius: 1em; display: block; }
.dbl span:first-child { height: 0.5em; width: 100%; position: absolute; top: 0; bottom: 0; background-color: var(--beige); grid-column: 1 / 4; }
.dbl span ~ span { background-color: var(--cafe); min-width: 0.5em;}
.dbl svg { background-color: var(--beige); height: 2.4em; width: 2.4em; border-radius: 5em; padding: 0.5em; z-index: 3; position: absolute; right: 0; left: 0; top: 0; opacity: 1; margin: auto; }
.dbl span:nth-child(2){ margin: auto auto auto 0; }
.dbl span:nth-child(3){ margin: auto 0 auto auto; }
.path { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--cream); }
.path > div { display: grid; grid-template-columns: repeat(9, 2.4em); grid-template-rows: repeat(32, 2.4em); grid-gap: 0.2em;
position: absolute; top: -10em; left: -10em; right: -10em; bottom: -10em; margin: auto; width: fit-content; height: fit-content; place-items: center; }
.path svg.close { position: absolute; top: auto; bottom: 2em; left: 0; right: 0; border-radius: 5em; background-color: black; color: white; font-size: 0.7em; z-index: 5; }
.path * { height: 2.4em; width: 2.4em; padding: 0.35em; margin: auto; position: static; }
.path span.to { border: 5px solid black; opacity: 1; -webkit-filter: drop-shadow(1px 1px 1px #333); }
@media only screen and (max-width: 1025px) {
.path > div { grid-template-columns: repeat(auto-fit, 7vw); grid-template-rows: repeat(auto-fit, 7vw); grid-gap: 0.6vw; width: 100%; }
.path * { height: 7vw; width: 7vw; padding: 0.35em; margin: auto; position: static; background-color: var(--cafe); }
}
@media only screen and (max-width: 769px) {
.path > div { grid-template-columns: repeat(auto-fit, 10vw); grid-template-rows: repeat(auto-fit, 10vw); grid-gap: 1vw; padding: 1vw; }
.path * { height: 10vw; width: 10vw; padding: 0.35em; margin: auto; position: static; background-color: var(--cafe); }
}
.path .sun { color: var(--yellow); background-color: var(--black); }
.path .profile { color: var(--pink); background-color: var(--black); }
.path .cloud { color: var(--turquoise); background-color: var(--black); }
.path .products { color: var(--orange); background-color: var(--black); }
.path .home { color: var(--yellow); background-color: var(--red); }
.path .star { color: var(--cafli); background-color: var(--red); }
.path .hate { color: var(--green); background-color: var(--yellow); }
.path .edit { color: var(--orange); background-color: var(--yellow); }
.path .path { color: var(--black); background-color: var(--orange); }
.path .oops { color: var(--yellow); background-color: var(--orange); }
.path .param { color: var(--dark-blu); background-color: var(--turquoise); }
.path .web { color: var(--orange); background-color: var(--turquoise); }
.path .night { color: var(--cream); background-color: var(--dark-blu); }
.path .spiral { color: var(--yellow); background-color: var(--dark-blu); }
.path .heart { color: var(--beige); background-color: var(--pink); }
.path .cycle { color: var(--black); background-color: var(--pink); }
.path.mini { display: grid; position: relative; margin: 1em auto; width: fit-content; }
.path.pick { grid-gap: 0.9em; grid-template-columns: repeat(4 , auto); }
.path.pos { grid-gap: 0.1em; grid-template-columns: repeat(5 , auto); }
.close.rot { animation: spin 5s linear infinite; -webkit-filter: drop-shadow(0px 0px 4px #222); }
/*
.cycle { display: block; height: 18em; width: 18em; position: relative; text-align: center; font-size: 1.3em; }
.cycle > svg { position: absolute; width: 60%; height: 60%; top: 3em; left: 0; right: 0; bottom: 0; margin: auto; }
.cycle svg + label { position: absolute; top: 10rem; left: 0; right: 0; bottom: 0; font-size: 1.3em; margin: auto; text-align: center; width: 100%;}
.cycle div { display: grid; place-items: center; grid-template: 50% 50% / 40% 40%; height: 100%; justify-content: space-between; }
.cycle div a { text-align: center; width: max-content; font-size: 0.55em; font-weight: 100; margin: auto; color: var(--cafe); }
.cycle div a:first-child { grid-column: 1 / 3; }
.cycle div a svg { display: block; margin: 0.8em auto; height: 4em; width: 4em;}
*/
.camera { height: 16em; width: 16em; margin: auto; background-color: black; position: relative; color: white; }
.map { height: 9em; width: 100%; overflow: hidden; background-color: black; color: white; display: grid; place-items: center; grid-template: 1fr 3em / 1fr; position: relative; margin: 0 auto 1em; }
.map img, .camera img { object-fit: cover; min-width: 100%; min-height: 100%; }
.map svg, .camera svg { width: 3em; margin: auto; position: absolute; top: 0; bottom: 0; right: 0; left: 0; }
/*
.time { display: grid; grid-template-columns: 5em 1fr; place-items: center; grid-gap: 1em; width: 100%; padding: 0.5em 0.3em 1.7em; background-color: var(--input); }
.time label { position: absolute; display: block; text-align: center; background-color: var(--cream); padding: 0.3em; }
.time :checked + label { background-color: var(--action); color: var(--textaction); font-weight: 900; opacity: 1; padding: 0.3em; }
.days { display: grid; width: 100%; margin: 0; grid-gap: 0.5em; grid-template-columns: 1fr;}
.days label { position: static; width: 100%; font-size: 0.85em; }
.clock { width: 10em; height: 10em; position: relative; border-radius: 5em; margin: 0; }
.clock input[type=radio] + label { border-radius: 2em; background-color: inherit; padding: 0.1em; width: 1.5em; height: 1.5em; }
.clock input[type=radio]:checked + label { background-color: var(--action); color: var(--textaction); font-weight: 900; opacity: 1; }
.clock input[type=radio] + label.min { font-size: 0.7em; }
.clock input[type=radio] + label.am,
.clock input[type=radio] + label.pm { padding: 0.1em 0.3em; border-radius: 0; width: auto; bottom: -1em; font-size: 0.85em;}
.pm { right: 3.5em; }
.am { left: 3.5em; }
.clock .am:checked::before, .clock .pm:checked::before { border-radius: 0; }
*/
/* width & font-size statements ... necessary for divs applicable to all */
/* div width */
/* //////////////////////////////////////////
/* SIZES
////////////////////////////////////////// */
.tight, .narrow, .semi, .contained, .regular, .wide, .widest
{ max-width: calc(100vw - 6rem); }
.semi { width: 18rem; font-size: 0.9em; }
.narrow { width: 24rem; font-size: 0.9em; }
.tight { width: 30rem; font-size: 0.9em; }
.contained { width: 24rem; }
.regular { width: 36rem; }
.wide { width: 54rem; }
.widest { width: 100%; } /* Beyond that, just unset max-width */
/* font-size */
.small { font-size: 0.8em; }
.big { font-size: 1.7em; }
.bigger { font-size: 2.5em; }
.huge { font-size: 5em; }
.tall { font-size: 1.4em; line-height: 1.4em; font-variation-settings: "wght" 170; }
/* grid splits */
.half, .third, .quart { display: grid; grid-gap: 0.8em; width: 100%; max-width: inherit; }
.half > *, .third > *, .quart > * { width: 100%; margin: 0; }
.half { grid-template-columns: 1fr 1fr; }
.third { grid-template-columns: 1fr 1fr 1fr; }
.quart { grid-template-columns: 1fr 1fr 1fr 1fr; }
/* grid item sizes */
.tiny { grid-template-columns: repeat(auto-fit, minmax(2em, 13%)); grid-gap: 0.2em; width: 16em; max-width: calc(100vw - 1em);}
.slim { grid-template-columns: repeat(auto-fit, minmax(3.5em, 15%));grid-gap: 0.3em; width: 30em; max-width: calc(100vw - 1em);}
.regular { grid-template-columns: repeat(auto-fit, minmax(5em, 19%)); grid-gap: 0.5em; width: 36em; max-width: calc(100vw - 2em); }
.med { grid-template-columns: repeat(auto-fit, minmax(7em, 24%)); grid-gap: 0.8em; width: 54em; max-width: calc(100vw - 6em); }
.large { grid-template-columns: repeat(auto-fit, minmax(12em, 30%)); grid-gap: 1em; width: 70em; max-width: calc(100vw - 10em);}
.large.wide { grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); grid-gap: 1em; width: 70em; max-width: calc(100vw - 10em);}
@media only screen and (max-width: 780px) {
.slim { grid-template-columns: repeat(auto-fit, minmax(3em, 17%)); grid-gap: 0.2em; }
.regular { grid-template-columns: repeat(auto-fit, minmax(4em, 19%)); grid-gap: 0.35em; }
.med { grid-template-columns: repeat(auto-fit, minmax(6em, 24%)); }
.large { grid-template-columns: repeat(auto-fit, minmax(9em, 1fr)); }
.large.wide { max-width: calc(100vw - 6em);}
}
@media only screen and (max-width: 480px) {
.slim { grid-template-columns: repeat(auto-fit, minmax(2.5em, 24%)); }
.large { grid-gap: 0.8em; max-width: calc(100vw - 2rem); width: 100%; }
.med { grid-gap: 0.5em; grid-template-columns: repeat(auto-fit, minmax(6em, 30%)); }
.med li svg { width: 3.2em; }
.tight, .narrow, .semi, .regular, .contained, .wide, .widest { max-width: calc(100vw - 2rem); width: 100%; }
.large.wide { max-width: calc(100vw - 2rem);}
}
/* /////////////////////////////////////////////////////// */
/* */
/* ///////////// ------- EFFECTS ------- //////////// */
/* */
/* /////////////////////////////////////////////////////// */
.genius { display: flex; place-items: center; margin: auto; min-height: 3em; width: auto; padding: 0; grid-gap: 0.4em; max-width: fit-content !important; }
.genius input[type] + label[for] { margin: auto; display: inline-block; padding: 0; }
.genius input[type] + label svg { margin: auto; width: 1em; transition: width, height 0.3s; padding: 0; }
.genius input[type=radio]:checked { /*display: block !important; color: red; DEBUG */}
.genius input[type]:checked { /*display: block; */}
.genius input[type]:checked + label[for] { color: var(--link); -webkit-filter: drop-shadow(1px 1px 2px #222); }
.genius input[type]:checked + label svg { width: 2.5em; transition: width, height 0.3s; }
/* /////////////////////////////////////////////////////// */
/* */
/* /////////// ----- EDITORS / WYSIWIG ---- /////////// */
/* */
/* /////////////////////////////////////////////////////// */
.wysiwyg { margin-top: 12em; position: relative; }
.wysiwyg > div { position: relative; min-height: calc(100vh - 12rem); padding: 1rem; }
.wysiwyg > textarea { max-width: 36rem; }
/*
.wysiwyg .editor { }
.wysiwyg .editor > * { max-width: 36rem; margin: 0.25em auto; position: relative; }
.wysiwyg .editor .styler { max-width: unset; }
.wysiwyg .editor select { max-width: unset; position: absolute; right: 100%; top: 0; margin-right: 0.5em; width: 3em; background: transparent; padding: 0; }
.wysiwyg .editor svg { max-width: unset; position: absolute; right: 0; bottom: -0.5em; width: 0.5em; height: 0.5em; opacity: 0.5;}
*/
.wysTools { position: fixed; top: 5rem; bottom: unset; right: 0; left: 0; width: 36rem; background-color: var(--white); padding: 1em 0; z-index: 2; margin: 1em auto; }
.wysTools label { grid-template-columns: auto auto; place-content: center; border-radius: 0.2em; opacity: 0.5; padding: 0.7em; margin: 0; background-color: var(--dark-pur); color: var(--cream); }
.wysTools label svg { margin: auto; display: block; top: 0; width: 1.5em; padding: 0.2em; }
.wysTools label svg + span { display: none; font-size: 0.8em; text-align: center; padding: 0.5em 1em 0; top: 0; }
.wysTools input:checked + label { opacity: 1; border-radius: 2em; padding-left: 1.2em; }
.wysTools input:checked + label span { display: inline-block; }
.wysTools + div { margin-top: 12em; }
.wysBlock { display: contents; position: relative; }
/* /////////////////////////////////////////////////////// */
/* */
/* /////////// ---------- MEDIA --------- /////////// */
/* */
/* /////////////////////////////////////////////////////// */
audio { -webkit-appearance: none; border-radius: 8em; color: white; width: 20em; height: 3em; -webkit-filter: drop-shadow(1px 1px 1px #ccc); }
audio::-webkit-media-controls-enclosure, video::-webkit-media-controls-enclosure { background-color: transparent; }
audio::-webkit-media-controls-panel { background-color: rgba(0, 0, 0, 0.3); transition: opacity 0.3s; grid-template-columns: repeat(auto-fit, 1fr); }
audio::-webkit-media-controls-mute-button { background-color: white; border-radius: 2em; margin-left: 0; }
audio::-webkit-media-controls-play-button { background-color: white; border-radius: 2em; margin-right: 0.5em;}
audio::-webkit-media-controls-current-time-display { color: white; font-size: 0.8em; }
audio::-webkit-media-controls-time-remaining-display { color: white; font-size: 0.8em; }
audio::-webkit-media-controls-timeline { background-color: white; border-radius: 2em; padding: 0; margin: auto 1em; height: 2px; }
audio::-webkit-media-controls-volume-slider { background-color: white; border-radius: 2em; padding: 0.1em; margin: auto; }
audio::-webkit-media-controls-menu { margin: 0; }
audio.mini { width: 7em; margin: 0; box-shadow: none; height: 3em; overflow: hidden; }
audio.mini::-webkit-media-controls { margin: 0; }
audio.mini::-webkit-media-controls-enclosure { margin: 0; }
audio.mini::-webkit-media-controls-play-button { margin: auto 0; }
audio.mini::-webkit-media-controls-mute-button { display: none; }
audio.mini::-webkit-media-controls-current-time-display { display: none; }
audio.mini::-webkit-media-controls-time-remaining-display { display: none; }
audio.mini::-webkit-media-controls-timeline { display: none; }
audio.mini::-webkit-media-controls-options-container { display: none; }
audio.mini::-webkit-media-controls-menu { display: none; }
audio.mini::-webkit-media-slider-container { display: none; }