* {
    box-sizing: border-box;
}

body {
    margin: 0;

    background:
        radial-gradient(
            circle at top,
            #1a1029,
            #09090d 50%
        );

    color: #eeeeF4;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    min-height: 100vh;
}

.container {
    max-width: 1000px;
    margin: auto;

    padding:
        70px
        30px;
}


/* HEADER */

header {
    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        70px;
}

.logo {
    font-size: 22px;
    font-weight: 800;

    letter-spacing:
        3px;
}

.logo span {
    color: #a66cff;
}

.subtitle {
    margin-top: 5px;

    color: #777787;

    font-size: 13px;

    letter-spacing:
        1px;
}


/* OVERALL STATUS */

.overall {
    padding:
        10px
        16px;

    border-radius:
        100px;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        1px;
}

.overall.online {
    color: #70ffb1;

    background:
        rgba(70, 255, 150, .08);

    border:
        1px solid
        rgba(70, 255, 150, .25);
}

.overall.degraded {
    color: #ff6f91;

    background:
        rgba(255, 70, 100, .08);

    border:
        1px solid
        rgba(255, 70, 100, .25);
}

.overall.loading {
    color: #aaa;

    border:
        1px solid #333;
}


/* HERO */

.hero {
    display: flex;

    align-items:
        center;

    gap: 24px;

    margin-bottom:
        70px;
}

.hero h1 {
    margin: 0 0 7px;

    font-size:
        34px;
}

.hero p {
    margin: 0;

    color:
        #858594;
}


/* PULSE */

.pulse {
    width: 60px;
    height: 60px;

    display: flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        rgba(166,108,255,.08);
}

.pulse-dot {
    width: 14px;
    height: 14px;

    border-radius:
        50%;

    background:
        #a66cff;

    box-shadow:
        0 0 25px
        #a66cff;
}


/* SECTION */

.section-title {
    color: #777787;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

    margin-bottom:
        15px;
}


/* SERVICES */

.services {
    display: grid;

    gap: 10px;
}

.service {
    display: grid;

    grid-template-columns:
        45px
        1fr
        100px
        100px;

    align-items:
        center;

    padding:
        20px;

    background:
        rgba(255,255,255,.025);

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius:
        12px;

    transition:
        .2s;
}

.service:hover {
    background:
        rgba(255,255,255,.045);

    transform:
        translateY(-1px);
}

.service-icon {
    font-size:
        20px;
}

.service-name {
    font-weight:
        600;
}

.latency {
    color:
        #858594;

    text-align:
        right;
}

.status {
    text-align:
        right;

    font-size:
        13px;

    font-weight:
        700;
}

.status.up {
    color:
        #70ffb1;
}

.status.down {
    color:
        #ff6f91;
}


/* FOOTER */

footer {
    margin-top:
        60px;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    display:
        flex;

    justify-content:
        space-between;

    color:
        #555563;

    font-size:
        12px;
}


@media (
    max-width: 600px
) {

    .container {
        padding:
            40px
            20px;
    }

    .service {
        grid-template-columns:
            35px
            1fr
            auto;
    }

    .latency {
        display:
            none;
    }

    .hero h1 {
        font-size:
            26px;
    }
}