[data-v="web2"] .site-nav {
    margin-top: 1rem;
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    border: 1px solid hsl(var(--h) 60% 14%);
    border-radius: 12px;
    background: linear-gradient(#ffffff24 50%, #0000 50%), hsl(var(--h) 60% 24%);
    box-shadow: inset 0 1px 0 #ffffff40, 0 3px 8px #0006;
    position: sticky;
    top: 0;
    z-index: 999;
}
[data-v="web2"] .hero-name {
    text-shadow: 0 2px 0 #0008;
}

[data-v="web2"]  a {
    color: hsl(var(--h) 60% 75%);
    background: linear-gradient(#ffffff24 50%, #0000 50%), hsl(var(--h) 60% 24%);
    padding: 4px 12px;
    border-radius: 12px;
}

[data-v="web2"] .social-links a:hover {
    color: #fff;
    text-shadow: 0 0 8px hsl(var(--h) 80% 60%);
}


[data-v="web2"] .work h2 {
    color: hsl(var(--h) 80% 72%);
    font-weight: 700;
    text-shadow: 0 1px 0 #0008;
}



[data-v="web2"] .work-code {
    color: hsl(var(--h) 60% 75%);
}

[data-v="web2"] .site-footer {
    margin-bottom: 1rem;
    padding: 0.5rem 0.75rem 0.5rem 1rem;
    border: 1px solid hsl(var(--h) 60% 14%);
    border-radius: 12px;
    background: linear-gradient(#ffffff24 50%, #0000 50%), hsl(var(--h) 60% 24%);
    box-shadow: inset 0 1px 0 #ffffff40, 0 3px 8px #0006;
    color: #ffffffb3;
    text-shadow: 0 1px 0 #0006;
}

[data-v="web2"] .nav-mark::after {
    align-self: flex-start;
    padding: 0 0.375rem;
    border-radius: 4px;
    background: #ff9d00;
    color: #3a2100;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: none;
}

[data-v="web2"] .site-nav nav a.nav-btn {
    padding: 0.375rem 0.875rem;
    border: 1px solid #888;
    border-radius: 999px;
    background: linear-gradient(#fff, #d9d9d9);
    color: #222;
    font-weight: 600;
    box-shadow: 0 1px 2px #0005;
}