@media (prefers-color-scheme: light) {
    :root {
        --hue: 207;
        --card-color: white;
        --text-color: black;
        --less-important-color: #000c;
        --card-1: #ddd;
        --card-2: #ccc;
        --blue: hsl(var(--hue), 100%, 37.65%);
        --background: white;
        --yellow: orange;
        --trans-bg-ratio: 70%;
    }
    body {
        background: white;
    }

    .mod-card.with-decoration {
        background: var(--background-light);
        color: var(--text-override-light);
        .mod-metadata .metadata-entry {
            color: var(--text-override-light);
        }
        .action-container {
            color: var(--button-override-light) !important;
            border-color: var(--button-override-light) !important;
        }
    }

    .mod-list-entry.with-decoration {
        background: var(--background-light) !important;
        .mod-name {
            color: var(--text-override-light) !important;
        }
        .mod-metadata .metadata-entry {
            color: var(--text-override-light);
        }
        .action-container {
            color: var(--button-override-light) !important;
            border-color: var(--button-override-light) !important;
        }
    }

    .mod-view-contributors-card.with-decoration {
        background: var(--background-light) !important;
        span {
            color: var(--text-override-light) !important;
        }
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --hue: 207;
        --card-color: #444;
        --text-color: white;
        --less-important-color: #ccc;
        --card-1: #555;
        --card-2: #444;
        --blue: hsl(var(--hue), 100%, 75.88%);
        --background: #222;
        --yellow: yellow;
        --trans-bg-ratio: 70%;
    }
    body {
        background: #222;
        color: white;
    }
    main a.border-button.black {
        color: white;
        border-color: white;
    }
    main a.border-button.white {
        color: black;
        border-color: black;
    }
    .mod-view .mod-view-long-description-inner, .bgwd {
        background: #00000033;
    }
    .mod-view .mod-screenshots-inner {
        background: #00000033;
    }
    .mod-view .mod-view-licensing-information-inner {
        background: #00000033;
    }

    .mod-card.with-decoration {
        background: var(--background-dark);
        color: var(--text-override-dark);
        .mod-metadata .metadata-entry {
            color: var(--text-override-dark);
        }
        .action-container {
            color: var(--button-override-dark) !important;
            border-color: var(--button-override-dark) !important;
        }
    }

    .mod-list-entry.with-decoration {
        background: var(--background-dark) !important;
        .mod-name {
            color: var(--text-override-dark) !important;
        }
        .mod-metadata .metadata-entry {
            color: var(--text-override-dark);
        }
        .action-container {
            color: var(--button-override-dark) !important;
            border-color: var(--button-override-dark) !important;
        }
    }

    .mod-view-contributors-card.with-decoration {
        background: var(--background-dark) !important;
        span {
            color: var(--text-override-dark) !important;
        }
    }
}