/**
Note the order there is important (LVHA-order):
- Link
- Visited
- Hover
- Active
- Focus

@see https://developer.mozilla.org/en-US/docs/Web/CSS/:link?retiredLocale=de

 */
a, a:link, a:visited, a:hover, a:active, a:focus {
    color: var(--monster-color-secondary-1);
    text-decoration: none;
    outline: none;
    transition: color 300ms ease-in-out, text-decoration-color 300ms ease-in-out;
}



a:hover, a:active, a:focus {
    color: var(--monster-color-primary-2);
    text-decoration: underline;
    text-decoration-color: var(--monster-color-secondary-1 );
    text-decoration-thickness: 1px; 
    text-underline-offset: 2px;
}

a:focus {
    outline: 1px dashed var(--monster-color-selection-1);
    outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
    
    a, a:link, a:visited, a:hover, a:active, a:focus {
        color: var(--monster-color-amber-2);
    }
    
    a:focus {
        outline: 1px dashed var(--monster-color-selection-4);
    }
}