midpoint/app/static/styles/main.css

html {
    font-family: arial, sans-serif;
    background: #f5f5f5;
    color: #424242;
}

main {
    display: flex;
    justify-content: center;
    padding: 20px;
}

main div {
    max-width: 800px;
    left-margin: auto;
    right-margin: auto;
}

main div .header {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

main div .header img {
    width: 50px;
}

main div .header h1 {
    text-align: center;
    font-size: 20px;
}

main div .status-bar {
    display: flex;
    margin: 5px;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 20px;
    border-top: 2px solid #424242;
    border-bottom: 2px solid #424242;
}

.meter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

main div .status-bar .meter img {
    width: 30px;
    height: 30px;
}

.meter p {
    padding: 0px;
    margin: 0px;
}


main div h2 {
    font-size: 16px;
}