#pun-navlinks li a {
    color: rgb(var(--gray-main));
    font: var(--fw600) var(--fs12) var(--font-second-sa);
    background: rgba(var(--canvas-tertiary), 1);
    border: var(--border-1px);
    text-transform: capitalize;
    text-decoration: none;
    position:relative;
    padding: 3px 10px 4px;
    margin: 3px 5px;
    border-radius: var(--bradius-major);
    transition: box-shadow 0.4s ease-in-out, outline-offset 0.3s ease-in;
    box-shadow: inset 0px 0px 0 0px rgba(var(--accent), .6);
    outline: 2px solid rgba(var(--canvas-primary), 0); 
    outline-offset: -10px; 
}

#pun-navlinks li a:hover {
    color: rgb(var(--canvas-primary));
    box-shadow: inset 0px 0px 0 20px rgba(var(--accent), .6);
    outline: 2px solid rgba(var(--canvas-primary), 1); 
    outline-offset: 0px; 
}

#pun-navlinks li a:not(:hover) {
    transition: box-shadow 0.4s ease-in-out, outline-offset 0s linear;
    outline-offset: -10px; 
}