body {
    height: 100vh;
    font-family: calibri;
    margin: 0;
}

pre, .gradientbg {
    background: linear-gradient(to bottom, white, rgb(220, 235, 220));
}

@media (orientation: landscape) {
    .cardholder {
        grid-template-columns: auto auto auto;
    }
}

@media (orientation: portrait) {
    .cardholder {
        grid-template-columns: auto auto;
    }
}

.cardholder {
    display: grid;
    place-content: center;
}

.card {
    width: min(calc(50vw - 4em), calc(33vh - 4em));
    height: min(calc(50vw - 4em), calc(33vh - 4em));
    margin: 1em;
    padding: 1em;
    border: 1px solid #aaa;
    box-shadow: 0.5ex 0.5ex 1ex 1ex #ddd;
    background: linear-gradient(to bottom, white, rgb(220, 235, 220));
    display: grid;
    align-content: center;
    font-size: min(3vw, 2vh);
    text-decoration: none;
}

.selectable_card:hover {
    border: 1px solid #444;
    box-shadow: 0.5ex 0.5ex 1ex 1ex #aaa;
}

.contentholder {
    display: grid;
    place-content: center;
    grid-template-columns: auto;
}

.header {
    grid-template-columns: 0fr 1fr;
}

.content {
    width: min(calc(100vh - 4em), calc(100vw - 4em));
}

.header, .content {
    margin: 1em;
    padding: 1em;
    border: 1px solid #aaa;
    box-shadow: 0.5ex 0.5ex 1ex 1ex #ddd;
    background: linear-gradient(to bottom, white, rgb(220, 235, 220));
    display: grid;
    align-content: center;
    font-size: min(3vw, 2vh);
}

.logo {
    height: 1em;
}

.warning {
    background-color: yellow;
    display: inline-block;
    width: 1em; height: 1em; font-size: 1em;
    text-align: center;
    border-radius: 50%; border: 1px solid #888;
    font-weight: bold;
}

code {
    color: rgb(20, 63, 20);
    border: 1px solid rgb(150, 200, 150);
    border-radius: 0.5ex;
    padding: 0 0.5ex;
}

pre code {
    border: 0;
    padding: 0;
}

pre {
    overflow-x: auto;
    border: 1px solid rgb(150, 200, 150);
    border-radius: 1ex;
    padding: 0.5ex 1.5ex;
    margin: 1ex 0;
}

quote {
    border: 1px solid rgb(150, 200, 150);
    border-radius: 1ex;
    padding: 0.5ex 1.5ex;
    margin: 1ex 0;
}

.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}
.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}
.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}
.hljs-literal{color:#0184bb}
.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f}
.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}
.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}
.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401}
.hljs-emphasis{font-style:italic}
.hljs-strong{font-weight:700}
.hljs-link{text-decoration:underline}