@import url(base.css);

a.bookmark:hover {
        text-decoration: none;
        color: var(--color-blue);
}
a.download {
        font-size: 1.1em;
}

.footnote {
        font-size: 0.9em;
        line-height: 1.4em;
}

img.badge {
        width: 160px;
}
img.qrcode {
        width: 172px;
}
img.logo-badge {
        width: 40px;
        height: 40px;
}
img.sponsor-wechat-pay {
        width: 240px;
        border-radius: 12px;
        border: 1px solid #03C160;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 8px;
        margin-bottom: 8px;
}
img.sponsor-alipay {
        width: 240px;
        border-radius: 12px;
        border: 1px solid #1578FF;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 8px;
        margin-bottom: 8px;
}
img.screenshot {
        width: min(340px, max(320px, 36%));
        border-radius: 8px;
}
img.screenshot-banner {
        width: 100%;
        border-radius: 8px;
}
img.guideline {
        width: 46%;
        border-radius: 8px;
}

div.card {
        text-align: center;
        border-radius: 16px;
        width: 48%;
        margin-left: 22%;
        margin-top: 60px;
        margin-bottom: 1em;
        padding-top: 1%;
        padding-bottom: 1%;
        padding-left: 4%;
        padding-right: 4%;
}

.shasum-code-block {
        display: none;
}
.shasum-container input[type="checkbox"] {
        display: none;
}
.shasum-container input[type="checkbox"]:checked~.shasum-code-block {
        display: block;
}
.shasum-container label {
        color: var(--color-blue);
}
.shasum-container label:hover {
        color: var(--color-green);
}

@media (max-width: 1078px) {
        div.card {
                border-radius: 12px;
                width: 68%;
                margin-left: 12%;
        }
        img.screenshot {
                width: 64%;
        }
        img.guideline {
                width: 66%;
        }
}
@media (max-width: 802px) {
        div.card {
                border-radius: 0px;
                width: 92%;
                margin: 0%;
                padding-top: 72px;
                padding-bottom: 60px;
                padding-left: 4%;
                padding-right: 4%;
        }
        img.screenshot {
                width: 84%;
        }
        img.guideline {
                width: 88%;
        }
}

@media(prefers-color-scheme: light) {
        html, body {
                color: black;
                background: var(--color-light-background);
        }
        pre {
                background: var(--color-light-background);
        }
        code.line-block {
                background: var(--color-light-background);
        }
        kbd {
                background: var(--color-light-background);
        }
        div.card {
                background: var(--color-card-light-background);
        }
}
@media(prefers-color-scheme: dark) {
        html, body {
                color: white;
                background: var(--color-dark-background);
        }
        pre {
                background: var(--color-dark-background);
        }
        code.line-block {
                background: var(--color-dark-background);
        }
        kbd {
                background: var(--color-dark-background);
        }
        div.card {
                background: var(--color-card-dark-background);
        }
        img.qrcode {
                width: 158px;
        }
        img.sponsor-wechat-pay, img.sponsor-alipay {
                border: none;
        }
}