body {
    background-color: #f0ece2;
    position: relative;
}

/* From https://medium.com/@erikritter/css-snippets-add-a-texture-overlay-to-an-entire-webpage-b0bfdfd02c45 */
.paperOverlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat: repeat;
    background-image: url("data:image/png;base64,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");
    mix-blend-mode: multiply;
    pointer-events: none;
}

header {
    background-color: #ffffff;
}

main {
    font-family: system-ui, sans-serif;
    max-width: 66rem;
    margin: 0 auto;
    color: #4a4a4a;
    padding: 1rem;

    code {
        background: rgb(221, 218, 221);
        border-radius: 3px;
        padding: 0 1px;
    }
}

.diagrams {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    gap: 1.5rem 4rem;

    .diagramContainer svg,
    .wlog svg {
        height: 8.5rem;
    }
}

.diagramsBreather {
    grid-column-start: 1;
    grid-column-end: 5;
    min-height: 4rem;
}

.diagramsBreather.small {
    grid-column-start: 1;
    grid-column-end: 5;
    min-height: 2rem;
}

.diagramsCentered {
    grid-column-start: 2;
    grid-column-end: 4;
}

.explanationText {
    grid-column-start: 1;
    grid-column-end: 3;
}

.diagramContainer {
    grid-column-start: 3;
    grid-column-end: 5;
    white-space: nowrap;
}

.wlog {
    display: inline-block;
    opacity: 0.3;
}

.mirrored {
    transform: scale(-1, 1);
}

h3 {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    margin: 3rem auto;

    >a {
        text-decoration: none;
        color: #868686;
    }
}