:root { --vh: -webkit-fill-available; --bkg: var(--dark-plm); --text: var(--cafli); --menu: var(--brock); --link: var(--pink); --lowlink: var(--cafe); --backlay: var(--cafe); --action: var(--pink); --input: var(--brock); --input-text: var(--cafli); --hover: var(--sored); --click: var(--red); --textaction: var(--cream); --highlight: var(--dark-pur); --lowlight: var(--whitey); --inactive: var(--grey); --oops: var(--yellow); --shadow: var(--grey); --placehold: var(--cafe); --notif: var(--sored); --edit: var(--orange); --fs-text: var(--turquoise); --glow : radial-gradient(circle closest-side, var(--youSay), var(--editBl), var(--weGuid), var(--youCan) ); --neon : linear-gradient(265deg, var(--youCan), var(--weGuid) 30%, var(--editBl) 65%, var(--youSay) 80% ); }
.VP { grid-template-rows: minmax(10vh, auto) 1fr; }
h1 { font-size: 2.5em; }
p.big { margin: 0.4em auto; }
.pix { background-color: var(--creli); }
.oneword h2 { font-variation-settings: "wght" 900; text-align: right; }
.oneword h2 span { font-variation-settings: "wght" 100; font-size: 2em; display: block; }
.neon h2 { background-image: var(--neon);-webkit-background-clip: text; -webkit-text-fill-color: transparent; width: auto; }
.thumbs[bulkable] li > svg { opacity: 0.7; width: 2em; }
.thumbs[bulkable] li svg.on { color: var(--editBl); opacity: 1; }
@media only screen and (max-width: 609px) { h1 { font-size: 1.8em; }
}
.half { grid-gap: 3em; }
.idcard { position: absolute; bottom: 6em; left: 6em; margin: auto; text-align: left; }
.idcard h2 { padding: 0; }
.idcard h2::after { content: ''; }
svg.info { display: inline; margin: 0 1em; color: var(--weGuid); }
svg.info + span { display: block; color: var(--weGuid); opacity: 0.8; }
.present { width: 60%; height: 60%; position: relative; }
.fs > .present { width: 60vw; height: 60vh; padding: 4em; }
.present p { padding: 0 1em; color: #aaa; margin: auto; }
.present a.button { margin: 1em auto 0; 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; }
.present div { text-align: center; margin: auto; }
.stack { position: relative; width: 100%; height: 100%; }
.fs > .stack { width: 100vw; height: 100vh; }
.stack > * { position: absolute; width: 100%; height: 100%; display: grid; top: 0; left: 0; right: 0; bottom: 0; margin: 0; place-content: center; background-color: black; }
.present .stack > li { grid-template-rows: 5fr 1fr 2fr; }
.present .stack > li > div { display: grid; place-content: center; height: 100%; }
.present .oneword li > div { grid-template-rows: 5fr 2fr 1fr; }
.nav { display: contents; height: 100%; width: 100%; position: absolute; }
.nav > * { position: absolute; left: auto; right: auto; bottom: 1em; top: 1em; margin: auto; height: fit-content; width: auto; }
.nav > *:first-child { left: 1em; }
.nav > *:nth-child(2) { right: 1em; }
.nav > *:nth-child(3) { top: auto; }
.nav > *:nth-child(4) { bottom: auto; }
.nav button { border: none; padding: 0; }
.nav button svg { height: 5vw; width: 5vw; }
input:checked + label[for] { color: var(--action); }