@font-face { font-family: Luengo; font-weight: bold; src: url('luengo-bold-webfont.woff2'); }
@font-face { font-family: Luengo; font-weight: normal; src: url('luengo-regular-webfont.woff2'); }
body {
    font-family: "Luengo","Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #253c5b;
    line-height: 1.5;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#root {
    width: 75rem;
    margin: 0 auto;
}
h1 {
    font-weight: 100;
    font-size: 2.64062rem;
}
h1 img {
    vertical-align: middle;
}
h2 {
    text-decoration: underline;
}
.row {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.card {
    text-align: center;
    box-shadow: 0 0.125rem 0.125rem 0 rgba(32,47,71,.1), 0 0 0.25rem 0 rgba(32,47,71,.05), 0 0 0 0.0625rem rgba(32,47,71,.03);
    border-radius: 0.5em;
    min-width: 20rem;
}
.card > a {
    color: inherit;
    text-decoration: none;
}
.card > a > div {
    padding: 0.5rem;
}
.card img {
    height: 15rem;
}
.status {
    padding: 0.5rem;
}
.online, .offline, .unknown {
    border-radius: 60rem;
    padding: .375rem .75rem;
    font-size: 0.65rem;
}
.online {
    color: #138151;
    background: #cefde9;
}
.online::before {
    content: "ONLINE"
}
.offline {
    color: #c21e2f;
    background: #fdced3;

}
.offline::before {
    content: "OFFLINE"
}
.unknown {
    color: #d16900;
    background: #fde0c4;
}
.unknown::before {
    content: "UNKNOWN"
}
.links {
    margin-top: 50px;
    text-align: right;
}
.links a {
    text-decoration: none;
    color: #253c5b;
    font-weight: bold;
}