*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    background:#f4f7fb;
    color:#333;
    padding:40px;
}

.container{
    max-width:900px;
    margin:auto;
}

header{
    text-align:center;
    margin-bottom:30px;
}

header h1{
    margin-bottom:10px;
}

#time{
    color:#666;
}

.card{
    background:white;
    padding:25px;
    border-radius:10px;
    margin-bottom:20px;
    box-shadow:0 5px 12px rgba(0,0,0,.08);
}

.card h2{
    margin-bottom:20px;
}

.info-grid{
    display:grid;
    grid-template-columns:200px auto;
    row-gap:12px;
}

.progress{
    width:100%;
    background:#ddd;
    height:20px;
    border-radius:20px;
    overflow:hidden;
    margin-bottom:20px;
}

.bar{
    height:100%;
    background:#4CAF50;
    width:0%;
    transition:.5s;
}

.services,
.logs{
    list-style:none;
}

.services li,
.logs li{
    margin-bottom:10px;
}

@media(max-width:700px){

body{
    padding:20px;
}

.info-grid{
    grid-template-columns:1fr;
}

}