html
{
    font: 16px/1.6 system-ui,Segoe UI,sans-serif;
    background: #f6f7f9;
    color: #222;
}

a, a:link, a:visited, a:hover
{
    color: #ff8833;
    font-weight: bold;
}

.active a 
{
    color: red;
    font-weight: bold;
}

div, nav, toc
{
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}

body 
{
    margin: 0 auto;
    padding: 0;
    background : #244;
    display: flex;
    flex-wrap: wrap;
}

:root 
{
    interpolate-size: allow-keywords; /* 👈 */
}

headnav, subnav, leafnav, branchnav
{
    display: block;
}

nav
{
    display: flex;
    background: #ff3333;
    width: 100vw;
    z-index: 2;
    //height: 1.6rem;
}
nav leafnav 
{
    padding: .2rem;
}

nav headnav
{
    background : #ff00ff;
}

nav>*
{
    max-width: 20vw;
}

nav branchnav>subnav
{
    overflow: hidden;
    transition: height 0.5s ease;
}
nav branchnav:hover>subnav
{
  //  height: 10rem;
}

nav subnav
{
    max-width: 20vw;
    background: #006633;
}

toc
{
    width: 20rem;
    background : #33f;
    display: block;
}

article
{
    width: 40rem;
    background : #440099;
    color : #cfc;
    z-index: 0;
    padding:1rem;
}