html {
    height: 100%;
}
body {
    font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
    font-size: 16px;
    line-height: 1.5;
    color: #ececec;
    background-color: #121212;
    min-height: 100%;
}
.main {
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1200px) {
    .main {
        max-width: 1140px;
    }
}
a, a:visited {
    color: #ececec;
}
h1 {
    font-size: 42px;
}
.code {
    font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
    padding: 0.1em 0.2em;
    margin: 0;
    font-size: 90%;
    background-color: rgba(128, 128, 128, 0.57);
    border-radius: 3px;
    font-weight: normal;
}
div.items {
    display: flex;
    flex-wrap: wrap;
}
div.card {
    border-radius: 10px;
    flex: 0 0 400px;
    margin-bottom: 10px;
    margin-right: 10px;
    min-height: 144px;
    padding: 10px;
}
div.card .heading {
    margin: 0;
    font-size: 26px;
}
div.card p {
    margin: 5px;
}
.card-red {
    background-color: #CC3333;
}
.card-green {
    background-color: #339900;
}
.card-blue {
    background-color: #0000CC;
}
.card-gray {
    background-color: #666666;
}
.card-orange {
    background-color: #F97613;
}
.small {
    font-size: 70%;
}