@import url(base.css);

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

.highlight {
        color: var(--color-purple);
}
.stack {
        display: inline-block;
        border-radius: 4px;
        border: 1px solid gray;
        padding: 2px 4px;
        line-height: 1em;
}

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

img.badge {
        width: 160px;
}
img.badge-adjusted {
        width: 160px;
        padding: 8px;
}
img.qrcode {
        width: 168px;
        border-radius: 4px;
}
img.logo-badge {
        width: 40px;
        height: 40px;
        transition: transform 0.2s ease;
}
img.logo-badge:hover {
        transform: scale(1.08);
}
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(350px, max(330px, 36%));
        border-radius: 8px;
}

.screenshot-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        justify-items: center;
        gap: 2em;
}
.screenshot-row picture {
        display: block;
        width: min(350px, max(330px, 36%));
}
.screenshot-row img {
        width: 100%;
        border-radius: 8px;
}

.download-row {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        align-items: start;
        justify-content: center;
        justify-items: center;
        gap: 16px;
}

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: 64px;
        margin-bottom: 1em;
        padding-top: 2em;
        padding-bottom: 2em;
        padding-left: 4%;
        padding-right: 4%;
}
h1 {
        margin-bottom: 2em;
}

.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);
        text-decoration: underline;
        text-decoration-style: dashed;
        cursor: pointer;
}
.shasum-container label:hover {
        color: var(--color-purple);
        text-decoration-style: dotted;
}

@media (max-width: 1360px) {
        .screenshot-row {
                grid-template-columns: 1fr;
        }
}
@media (max-width: 1078px) {
        div.card {
                border-radius: 12px;
                width: 68%;
                margin-left: 12%;
        }
        .screenshot-row {
                grid-template-columns: 1fr;
        }
        .screenshot-row picture {
                width: 64%;
        }
        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%;
        }
        .screenshot-row {
                grid-template-columns: 1fr;
        }
        .screenshot-row picture {
                width: 84%;
        }
        img.screenshot {
                width: 84%;
        }
        img.guideline {
                width: 88%;
        }
}
@media (max-width: 380px) {
        .download-row {
                grid-template-columns: 1fr;
        }
}

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