:root {
    color-scheme: light dark;
}

body {
    background:
        radial-gradient(
            circle at 20% 10%,
            rgb(242 193 78 / 14%),
            transparent 34rem
        ),
        var(--bs-body-bg);
}

.landing-card {
    width: min(100%, 34rem);
    padding: clamp(2rem, 7vw, 4rem);
}

.landing-logo {
    width: 5.5rem;
    height: 5.5rem;
}

.landing-status,
.landing-oneuptime {
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-tertiary-bg);
}

.landing-service-list {
    display: grid;
    gap: 0.5rem;
}

.landing-service {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.landing-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--bs-secondary-bg);
}

.landing-status-badge.is-up {
    color: var(--bs-success-text-emphasis);
    background: var(--bs-success-bg-subtle);
}

.landing-status-badge.is-down {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
}

.landing-component-list {
    display: grid;
    gap: 0.35rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.landing-component-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
}