body {
    background: #efefef;
    display: grid;
    font: 1rem/1.5em "Fira Code", monospace;
    height: 94vh;
    place-items: center;
    perspective: 65rem;
}

a {
    color: inherit;
}

a:hover, a:focus, a:active {
    text-decoration: double underline;
    cursor: pointer;
}

.bump {
    box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.08);
}

.sticker {
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.2));
}

.indent {
    text-indent: 2rem;
    overflow-wrap: break-word;
    hyphens: auto;
}

#halftoneBackground {
    position: absolute;
    inset: 0;

    --mask: radial-gradient(
            ellipse 100% 140% at 33% 0%,
            transparent 0%,
            transparent 25%,
            rgba(0 0 0 / 0.4) 65%,
            rgba(0 0 0 / 0.8) 80%,
            rgba(0 0 0 / 0.8) 95%,
            black 70%
    );
    /*
    --mask: linear-gradient(345deg, rgb(0 0 0), rgb(0 0 0 / 0.5) 30%);
    */
    --stop1: 3%;
    --stop2: 90%;

    background: white;
    filter: contrast(50);
    z-index: 0;

    opacity: 80%;
}

#halftoneBackground::after {
    --bgSize: 1rem;
    --bgPosition: calc(var(--bgSize) / 2);
    --stop1: 8%;
    --stop2: 45%;

    content: '';
    position: absolute;
    inset: 0;

    background-image:
            radial-gradient(circle at center, black var(--stop1), transparent var(--stop2)),
            radial-gradient(circle at center, black var(--stop1), transparent var(--stop2));

    background-size: var(--bgSize) var(--bgSize);
    background-position: 0 0, var(--bgPosition) var(--bgPosition);
    background-repeat: repeat;

    mask-image: var(--mask);
    pointer-events: none;
}