/* Graduation and anniversary themes */
.theme-swatch--graduation {
    --swatch: #8bbde3;
}

.theme-swatch--anniversary {
    --swatch: #d9a89d;
}

.theme--graduation {
    color: #092646;
    background-color: #dceffc;
    background-image:
        linear-gradient(
            rgba(238, 248, 255, .18),
            rgba(227, 242, 252, .34)
        ),
        url("../img/theme-graduation.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.theme--graduation .eyebrow,
.theme--graduation .finished-message {
    color: #8a5d10;
}

.theme--graduation .timer div {
    background: rgba(255, 255, 255, .76);
    border-color: rgba(9, 38, 70, .14);
    box-shadow: 0 14px 35px rgba(35, 86, 124, .14);
    backdrop-filter: blur(10px);
}

.theme--anniversary {
    color: #5a3037;
    background-color: #f9e7df;
    background-image:
        linear-gradient(
            rgba(255, 248, 243, .12),
            rgba(250, 228, 219, .24)
        ),
        url("../img/theme-anniversary.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.theme--anniversary .eyebrow,
.theme--anniversary .finished-message {
    color: #9a5a4f;
}

.theme--anniversary .timer div {
    background: rgba(255, 255, 255, .72);
    border-color: rgba(111, 62, 65, .14);
    box-shadow: 0 14px 35px rgba(105, 64, 59, .13);
    backdrop-filter: blur(10px);
}

@media (min-width: 900px) {
    body.countdown-page.theme--graduation {
        background-image:
            linear-gradient(
                rgba(238, 248, 255, .18),
                rgba(227, 242, 252, .34)
            ),
            url("../img/theme-graduation-wide.webp");
    }

    body.countdown-page.theme--anniversary {
        background-image:
            linear-gradient(
                rgba(255, 248, 243, .12),
                rgba(250, 228, 219, .24)
            ),
            url("../img/theme-anniversary-wide.webp");
    }
}