html:is(
        [data-theme="gitea-light"],
        [data-theme="gitea-dark"],
        [data-theme="gitea-auto"],
        [data-theme="codecraftsmen-light"],
        [data-theme="codecraftsmen-dark"],
        [data-theme="codecraftsmen-auto"]
    )
    #navbar
    #navbar-logo {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 60px 30px;
}

html:is(
        [data-theme="gitea-light"],
        [data-theme="gitea-dark"],
        [data-theme="gitea-auto"],
        [data-theme="codecraftsmen-light"],
        [data-theme="codecraftsmen-dark"],
        [data-theme="codecraftsmen-auto"]
    )
    #navbar
    #navbar-logo
    img {
    visibility: hidden;
    width: 60px;
    height: 30px;
}

html:is(
        [data-theme="gitea-light"],
        [data-theme="gitea-dark"],
        [data-theme="gitea-auto"],
        [data-theme="codecraftsmen-light"],
        [data-theme="codecraftsmen-dark"],
        [data-theme="codecraftsmen-auto"]
    )
    .page-content.home
    img.logo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

html:is(
        [data-theme="gitea-light"],
        [data-theme="gitea-dark"],
        [data-theme="gitea-auto"],
        [data-theme="codecraftsmen-light"],
        [data-theme="codecraftsmen-dark"],
        [data-theme="codecraftsmen-auto"]
    )
    .page-content.home
    .center:has(> img.logo)::before {
    content: "";
    display: block;
    width: 220px;
    height: 220px;
    margin: 0 auto;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

html:is([data-theme="gitea-light"], [data-theme="codecraftsmen-light"])
    #navbar
    #navbar-logo {
    background-image: url("../img/logo-light-no-slogan.svg");
}

html:is([data-theme="gitea-light"], [data-theme="codecraftsmen-light"])
    .page-content.home
    .center:has(> img.logo)::before {
    background-image: url("../img/logo-light.svg");
}

html:is([data-theme="gitea-dark"], [data-theme="codecraftsmen-dark"])
    #navbar
    #navbar-logo {
    background-image: url("../img/logo-dark-no-slogan.svg");
}

html:is([data-theme="gitea-dark"], [data-theme="codecraftsmen-dark"])
    .page-content.home
    .center:has(> img.logo)::before {
    background-image: url("../img/logo-dark.svg");
}

@media (prefers-color-scheme: light) {
    html:is([data-theme="gitea-auto"], [data-theme="codecraftsmen-auto"])
        #navbar
        #navbar-logo {
        background-image: url("../img/logo-light-no-slogan.svg");
    }

    html:is([data-theme="gitea-auto"], [data-theme="codecraftsmen-auto"])
        .page-content.home
        .center:has(> img.logo)::before {
        background-image: url("../img/logo-light.svg");
    }
}

@media (prefers-color-scheme: dark) {
    html:is([data-theme="gitea-auto"], [data-theme="codecraftsmen-auto"])
        #navbar
        #navbar-logo {
        background-image: url("../img/logo-dark-no-slogan.svg");
    }

    html:is([data-theme="gitea-auto"], [data-theme="codecraftsmen-auto"])
        .page-content.home
        .center:has(> img.logo)::before {
        background-image: url("../img/logo-dark.svg");
    }
}