:root {
    --whiteish:#EAE8F6;
    --orangeish:#F36E48;
    --brownish:#60404E;
    --tealish:#429E9D;
    --navyish:#153B48;
    --blackish:#151532;
    --purpleish:#C3ACFB;
    --darkpurpleish:#352343;

    --secondary-text-bg-color:var(--orangeish);
    --secondary-text-shadow-color:var(--brownish);

    --text-width: 14pt;
    --text-height: calc(var(--text-width)*1.2);
    --text-shadow-width: calc(var(--text-width)*1);
    --text-shadow-height: calc(var(--text-height)*1);

    --math-scale: 1.4;
}

.nowrap {
    white-space: nowrap;
}

a {
    text-decoration: none;
}

html {
    font-family: "courier new", monospace;
    font-weight: normal;
    font-size: var(--text-width);
    line-height: var(--text-height);

    background-color: var(--blackish);
}

body {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: var(--blackish);
}

.article {
    display: flex;
    flex-direction: column;
    column-gap: var(--text-height);
    justify-content: flex-start;
    width: min(95vw,calc(var(--text-width)*40));
}

.article > h1, .article > h2, .article > h3 {
    color: var(--whiteish);
    line-height: calc(var(--text-height)*2);
}

.article > p,
.article > div,
.article > a,
.article > blockquote
{
    margin-right:  calc(var(--text-shadow-width)*2);
    margin-left:   calc(var(--text-shadow-width)*0);
    margin-top:    calc(var(--text-shadow-height)*0);
    margin-bottom: calc(var(--text-shadow-height)*2);

    padding-top: calc(var(--text-height));
    padding-bottom: calc(var(--text-height));
    padding-left: calc(var(--text-width));
    padding-right: calc(var(--text-width));
}

.article > p,
.article > div
{
    color: var(--navyish);
    background-color: var(--tealish);
    box-shadow: var(--text-shadow-width)
                var(--text-shadow-height)
                var(--navyish);
}

.katex {
    font-size: calc(var(--text-width)*var(--math-scale));
    line-height: calc(var(--text-height)*var(--math-scale));
}

.article > p:has(> ::first-line.katex:only-child)
{
    color: var(--brownish);
    background-color: var(--orangeish);
    box-shadow: var(--text-shadow-width)
                var(--text-shadow-height)
                var(--brownish);
}

.article > a {
    color: var(--darkpurpleish);
    background-color: var(--purpleish);
    box-shadow: var(--text-shadow-width)
                var(--text-shadow-height)
                var(--darkpurpleish);
}

.article > blockquote {
    color: var(--brownish);
    background-color: var(--orangeish);
    box-shadow: var(--text-shadow-width)
                var(--text-shadow-height)
                var(--brownish);
}

.type-and-title {
    display: grid;
    grid-template-columns: 20% 80%;
}

.nomargin {
    margin-right:  0pt;
    margin-left:   0pt;
    margin-top:    0pt;
    margin-bottom: 0pt;
}
.nopadding {
    padding-top: 0pt;
    padding-bottom: 0pt;
    padding-left: 0pt;
    padding-right: 0pt;
}