@import "/css/default.css";

html {
    --brand-color: black;
    --pride-flag: linear-gradient(#e40303 16.66%, #FF8D00 0 33.33%, #FFEE00 0 50%, #028121 0 66.66%, #004CFF 0 83.33%, #770088 0);
    --link-fg: #004CFF;
    --visited-fg: #770088;
}
html:has([rel~=bookmark][href*="dyke"]) {
    --pride-flag: linear-gradient(#d52d00 0 14.28%, #ef7627 0 28.57%, #ff9a56 0 42.85%, #fff 0 57.14%, #d162a4 0 71.42%, #b55690 0 85.71%, #a30262 0);
}
html:has([rel~=bookmark][href*="trans"]) {
    --pride-flag: linear-gradient(#5bcefa 20%, #f5a9b8 0 40%, white 0 60%, #f5a9b8 0 80%, #5bcefa 0);
}

@media (prefers-color-scheme: dark) {
    html {
        --brand-color: black;
        --link-fg: #FFEE00;
        --visited-fg: #FF8D00;
    }
    html:has([rel~=bookmark][href*="dyke"]) {
        --link-fg: #ff9a56;
        --visited-fg: #d162a4;
    }
    html:has([rel~=bookmark][href*="trans"]) {
        --link-fg: #5bcefa;
        --visited-fg: #f5a9b8;
    }
}

@media print {
    html,
    html:has([rel~=bookmark][href*="dyke"]),
    html:has([rel~=bookmark][href*="trans"]) {
        --pride-flag: white;
    }
}

html #masthead {
    background: var(--pride-flag);
    border-block-end: none;
}

#masthead nav :link, #masthead nav :visited {
    color: var(--brand-color);
}