: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);
    --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); }

/* this is done cascading for the ctnGen */
.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; }


/*
#popups div.popup           { background-color: var(--brack); color: var(--dark-plm); }
.popup .imgPrm .img         { border-color: var(--brock); }
*/

@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: ''; }


/* this must be core */
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; }


/* This must become core, just testing it before it goes there, the core definition is not super coherent */
.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); }