* {
    box-sizing:border-box;
}


body {

    background:
    radial-gradient(circle at top,#102040,#050505 55%);

    color:#fff;

    font-family:
    Arial,
    Helvetica,
    sans-serif;

    margin:0;

    min-height:100vh;
}


/* HEADER */

.header {

    padding:30px;

    background:
    linear-gradient(
        90deg,
        rgba(0,217,255,.15),
        rgba(255,60,0,.15)
    );

    border-bottom:

    2px solid #ff3c00;

    box-shadow:

    0 0 25px rgba(0,217,255,.4);

}


.header h1 {

    margin:0;

    font-size:34px;

    color:#00d9ff;

    text-shadow:

    0 0 10px #00d9ff;

}


#data {

    color:#aaa;

}


/* GRID */

.grid {

    display:grid;

    grid-template-columns:

    repeat(
    auto-fit,
    minmax(280px,1fr)
    );

    gap:25px;

    padding:35px;

}



/* CARDS */

.card {

    background:

    linear-gradient(
    145deg,
    #111,
    #080808
    );


    border-radius:20px;


    padding:25px;


    border:

    1px solid rgba(0,217,255,.25);


    box-shadow:

    0 0 25px rgba(0,0,0,.8);


    transition:.3s;

}


.card:hover {

    transform:translateY(-5px);


    border-color:#00d9ff;


    box-shadow:

    0 0 25px rgba(0,217,255,.35);

}



.card h2 {

    margin-top:0;


    color:#ff3c00;


    text-shadow:

    0 0 8px #ff3c00;

}



/* STATUS */

.ok {

    color:#00ff66;

    font-weight:bold;

    text-shadow:

    0 0 8px #00ff66;

}


.erro {

    color:#ff3333;

    font-weight:bold;

    text-shadow:

    0 0 8px #ff3333;

}



.host {

    padding:8px 0;

    border-bottom:

    1px solid rgba(255,255,255,.08);

}


.status {

    font-size:22px;

    font-weight:bold;

}