body {
    display: flex;
    width: calc(100vw - 16px);
    font-family: "Segoe UI";
    padding: 8px;
    box-sizing: border-box;
}

img.cover {
    max-width: 20%;
    min-width: 10rem;
    max-height: 30rem;
    flex-shrink: 1;
    flex-grow: 1;
    align-self: start;
}

.horzflex {
    display: flex;
    flex-flow: row nowrap;
    gap: 1rem;
}

.vertflex {
    display: flex;
    flex-flow: column nowrap;
}

.flexgrow {
    flex-grow: 100;
}

.multicol {
    display: grid;
    grid-gap: 1ex;
    grid-template-columns: repeat(auto-fill, 50em);
    padding: 1ex;
}

.col {
    background-color: #f0f0f0;
    margin: 0.5ex;
    padding: 2ex;
    border-radius: 0.5ex;
}

.col1 {
    grid-column: 1;

}

.col2 {
    grid-column: 2;
}

h1~p {
    font-style: normal;
}

h1 {
    margin-top: 0;
    margin-bottom: 1ex;
}

h2 {
    margin: 0;
}

audio {
    height: 2em;
}

ul,
ol {
    display: grid;
    grid-template-columns: repeat(4, auto);
    column-gap: 2ex;
    row-gap: 1ex;
    align-items: center;
    margin: 0;
    margin-right: 2rem;
    padding-left: 0;
    align-self: start;
}

ol {
    counter-reset: track;
}

ol li,
ul li {
    display: contents;
}

ol li::before {
    counter-increment: track;
    content: counter(track, decimal-leading-zero);
}

ul li::before {
    content: "";
}

.order1 {
    order: 1;
}

.order2 {
    order: 2;
}

.order3 {
    order: 3;
}

.order4 {
    order: 4;
}

.order5 {
    order: 5;
}

.order6 {
    order: 6;
}

.order7 {
    order: 7;
}

.order8 {
    order: 8;
}

.order9 {
    order: 9;
}

.order10 {
    order: 10;
}

.order11 {
    order: 11;
}

.order12 {
    order: 12;
}

.order13 {
    order: 13;
}