:root {
    --status-loading: #acacac;
    --status-up: rgb(104, 192, 87);
    --status-partial: rgb(240, 172, 46);
    --status-down: #d34e4e;
    --status-response: rgb(135, 114, 255);
    --separator: #d4d4d4;
    --border: #ccc;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif
}

header {
    height: 30svh;
    background: linear-gradient(45deg, rgb(93, 190, 235), rgb(157, 136, 235));
    display: flex;
    align-items: center;
    justify-content: center;
}

main {
    margin: 0 auto;
    width: 70%;
}

h1 {
    color: #fff;
    font-size: clamp(1rem, 18svw, 5rem);
    text-align: center;
    padding: 0;
    margin: 0;
    padding-bottom: .5rem;
}

.status-all {
    padding: 1.5rem;
    margin: 2rem 0;
    background-color: var(--status-loading);
    border-radius: 100vmax;
    color: #fff;
    text-align: left;
    font-weight: 600;
}

.up {
    background-color: var(--status-up);
}

.partial {
    background-color: var(--status-partial);
}

.down {
    background-color: var(--status-down);
}

.service-card {
    padding: .15rem 1rem;
    border: 2px solid var(--border);
    border-radius: 10px;
    margin: 1rem 0;
}

.service-card > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.service-card span {
    font-weight: 600;
}

.service-card.border-up span {
    color: var(--status-up);
}

.service-card.border-partial span {
    color: var(--status-partial);
}

.service-card.border-down span {
    color: var(--status-down);
}

.separator {
    height: 1px;
    /* margin: 2rem 0; */
    background-color: var(--separator);
}

.response-label {
    color: var(--status-response);
    font-weight: 600;
    margin-top: .5rem;
}

canvas {
    width: 100%;
    height: 6rem;
}