html, body {
    --background-theme-color: #001EA0;
    --cell-space: 20px;
    --logo-height: 50px;

    background-color: #cccccc;
    font-family: Verdana;
    font-size: 14pt;
    color: #ffffff;
    height: 100%;
    margin: 0;
}
@media screen and (orientation: portrait) {
    body {
        zoom: 200%
    }
}
#header {
    background-color: var(--background-theme-color); 
    position: sticky;
    top: 0;
    height: calc(var(--logo-height) + (2 * var(--cell-space)));
    width: 100%;
}
#header img {
    height: var(--logo-height);
    margin: var(--cell-space);
    vertical-align: middle;
}
#header h1 {
    display: inline;
    font-weight: normal;
    vertical-align: middle;
}
#content {
    min-height: 100%;
}
#footer {
    background-color: var(--background-theme-color);
    position: sticky;
    bottom: 0px;
    padding: var(--cell-space);
    text-align: center;
    vertical-align: middle;
    font-size: 22pt;
}
#checks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    padding: var(--cell-space);
    grid-gap: var(--cell-space);
}
#checks > div {
    border: 1px solid black;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3), 0 2px 10px 0 rgba(0, 0, 0, 0.2);
}
#checks > div.ok {
    background-color: #66aa22;
    color: #222222;	
}
#checks > div.info {
    background-color: #88cc44;
    color: #222222;	
}
#checks > div.warn {
    background-color: #ffdd00;
    color: #222222;	
}
#checks > div.fail {
    background-color: #ff0000;
}
#checks > div.timeout {
    background-color: var(--background-theme-color);
}