:root {
    --brand-color: #0000ee;
    --showcase-center-color: rgba(255, 255, 255, 0.8);
}

@media (prefers-color-scheme: dark) {
    :root {
        --brand-color: #0a84ff;
        --showcase-center-color: rgba(90, 90, 90, 0.55);
    }
}

.showcase {
    background-image:
        radial-gradient(circle at 50% 50%, var(--showcase-center-color), transparent 65%),
        conic-gradient(from 90deg at 50% 50%,
            hsl(0, 100%, 50%),
            hsl(60, 100%, 50%),
            hsl(120, 100%, 50%),
            hsl(180, 100%, 50%),
            hsl(240, 100%, 50%),
            hsl(300, 100%, 50%),
            hsl(360, 100%, 50%));
}

@media (prefers-color-scheme: dark) {
    .showcase {
        background-image:
            radial-gradient(circle at 50% 50%, var(--showcase-center-color), transparent 65%),
            conic-gradient(from 90deg at 50% 50%,
                hsl(0, 90%, 32%),
                hsl(60, 90%, 32%),
                hsl(120, 90%, 32%),
                hsl(180, 90%, 32%),
                hsl(240, 90%, 32%),
                hsl(300, 90%, 32%),
                hsl(360, 90%, 32%));
    }
}

.showcase .content {
    padding-top: calc(2 * var(--vertical-spacing));
    padding-bottom: calc(2 * var(--vertical-spacing));
}

.showcase picture,
.showcase img {
    margin: 0 auto;
}

.content img.symbol {
    width: 34px;
    height: 34px;
}

@media (prefers-reduced-motion: no-preference) {
    a:hover,
    .button:hover {
        animation: rainbow-hue-rotate 3s linear infinite;
    }
}

@keyframes rainbow-hue-rotate {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}

.preview-video {
    margin-top: calc(2 * var(--vertical-spacing));
    height: 320px;
    overflow: hidden;
}

.preview-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    dynamic-range-limit: standard;
}