@charset "UTF-8";

html[darked] {
    --mode-bgc  : var(--dark);
    --mode-color : var(--light);
}

html { color:rgb(var(--mode-color) / var(--opac-color)); font-family:sans-serif; font-size:var(--EM); font-weight:lighter; }

body { margin:0em; background-color:rgb(var(--mode-bgc)); }

body > header.sticky { position:relative; }
body > header.sticky > nav { position:sticky; width:100%; top:0em; left:0em; margin-bottom:-100%; z-index:100; }
body > header.sticky > nav.fixed { position:fixed; margin-bottom:0em; }
body > header.sticky > nav:not(.fixed) + * { margin-top:100%; }

*:first-child { margin-top:0em; }
*:last-child { margin-bottom:0em; }
*, *::before, *::after, *::backdrop { box-sizing:border-box; transition:all var(--mini_S) ease-in-out; }

[class*="container"] { width:var(--container); max-width:var(--container-max); margin-left:auto; margin-right:auto; }
.container-full { max-width:100%; }
.container-medium { max-width:calc(var(--container-max) * var(--medium)); }
.container-small { max-width:calc(var(--container-max) * var(--small)); }

ul.flex { padding:0em; margin:0em; list-style:none; }