@font-face {
    font-family: 'Crimson Pro';
    src: url('/CrimsonPro[wght].woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Crimson Pro';
    src: url('/CrimsonPro-Italic[wght].woff2');
    font-weight: 400 700;
    font-style: italic;
    font-display: swap;
}


body {
    width: 40em;
    margin: 0 auto;

    font-family: "Crimson Pro", serif;
    font-size: 20px;
    text-align: justify;
    line-height: 1.5;

    background-color: #fdf6e3;
}

h1, h2, h3 {
    margin-top: 0.75em;
    margin-bottom: -0.5em;
}


.summary {
    padding: 1em;
    background-color: #e3f0df;
    border: 1px solid #05c0bd;
    border-radius: 8px;
}

.summary .header {
    color: #05c0bd;
}

.summary p {
    margin-top: 0.5em;
    margin-bottom: 0;
}


code {
    padding: 1em;
    font-size: 16px;
    background-color: #e3f0df;
    display: block;
    border-radius: 8px;
}

pre code {
    border: 1px solid black;
}

h1 code, h2 code {
    padding: 0.25em;
    font-size: 0.60em;
    display: inline-block;
}

li code, p code {
    padding: 0.25em;
    display: inline;
}