header {position: relative;}
#nav-toggle {display: none;}
nav {
    position: absolute;
    top: 0; right: 0;
    /* padding: .25rem; */
    width: max-content;
    width: 3rem;
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    z-index: 8;
    height: 100%;
    clip-path: circle(250px at top right);
    transition: clip-path 300ms ease-in-out 100ms;
}
#nav-toggle:not(:checked) ~ nav {
    clip-path: circle(1.5rem at 50% 50%);
}
.nav-toggle-label {
    min-height: 2rem; min-width: 2rem;
    height: 2rem; width: 2rem;
    margin: .5rem;
    background-color: #39f;
    background-image: linear-gradient(135deg, #123, #789);
    box-shadow: 0 0 .25rem 0rem #39f;
    border-radius: .25rem;
    transform: rotateZ(0deg);
    transition: 
    transform 100ms ease-in-out 100ms,
    box-shadow 100ms ease-in-out;
}
.nav-toggle-label:hover {
    transform: rotateZ(30deg);
    box-shadow: 0 0 .125rem .125rem #39f;
}
nav a {
    --hue: calc(var(--i) * 15);
}
.preset {
    border: 0px;
    border-radius: .25rem;
    padding: .25rem .75rem;
    margin: .25rem;
    cursor: pointer;

    --clr-primary: hsla(var(--hue), 100%, 50%, 1);
    --clr-shadow: hsla(var(--hue), 100%, 50%, .2);

    background-color: var(--clr-shadow);
    color: var(--clr-primary);
    box-shadow: 0 0 0 .125rem var(--clr-primary);
    width: max-content;
}

/*
<!-- .nav>ul>li*4>a>div.preset-$ -->
<!-- .nav>ul>li*4>a[href="preset-0$"]>div.preset-$ -->
<!-- .nav>ul>li*4>a[href="preset-0$"]>div.preset{Preset-0$} -->
<!-- nav>a[href="preset-0$"]*4>div.preset{Preset-0$-1} -->
<!-- nav>a[href="preset-0$@0"]*4>div.preset{Preset-0$@0} -->

<!-- nav>a[href="index-nds-0$"]*5>div.preset{version-0$} -->
*/


/*
<input class="navcheck" type="checkbox" name="nav" id="nav-toggle">
<nav>
    <label class="nav-toggle-label" for="nav-toggle"></label>
    <a href="../presets/">
        <div class="preset">Presets</div>
    </a>
    <a href="preset-01.html">
        <div class="preset">Preset-01</div>
    </a>
    <a href="preset-02.html">
        <div class="preset">Preset-02</div>
    </a>
    <a href="preset-03.html">
        <div class="preset">Preset-03</div>
    </a>
</nav>
*/