:root {
    --width-paper: 10rem;
    --height-paper: calc(var(--width-paper) * (297/210));
}

@media screen and (min-width: 5rem) {
    :root {
        --width-paper: 3rem;
    }
}

@media screen and (min-width: 10rem) {
    :root {
        --width-paper: 8rem;
    }
}

@media screen and (min-width: 15rem) {
    :root {
        --width-paper: 12rem;
    }
}

@media screen and (min-width: 20rem) {
    :root {
        --width-paper: 20rem;
    }
}

@media screen and (min-width: 25rem) {
    :root {
        --width-paper: 25rem;
    }
}

@media screen and (min-width: 30rem) {
    :root {
        --width-paper: 30rem;
    }
}

@media screen and (min-width: 40rem) {
    :root {
        --width-paper: 35rem;
    }
}

@media screen and (min-width: 45rem) {
    :root {
        --width-paper: 40rem;
    }
}

@media screen and (min-width: 50rem) {
    :root {
        --width-paper: 45rem;
    }
}

.paper-list {
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;

    flex-direction: column;
    gap: 5rem;
}

.paper {
    box-shadow: 8px 8px 0px 1px var(--color-paper-shadow);
    display: flex;
    flex-direction: row;
}

.paper .strip {
    background-image: url("/public/assets/Hole-Strip.svg");
    background-size: 100% auto;
    background-repeat: repeat-y;
    width: calc(var(--width-paper) / 20);
    min-height: var(--height-paper);

    border-right: solid calc(var(--width-paper) / 250) var(--color-paper-perforation);
}

.paper .content {
    background-color: var(--color-paper);
    width: var(--width-paper);
    min-height: var(--height-paper);
    font-size: calc(var(--width-paper) * var(--font-paper-scaling-factor));

    padding-left: calc((var(--width-paper) / 51) * 0.75);

}

.paper .content p,
.paper .content a,
.paper .content pre {
    font-family: 'DepartureMono', monospace;
    color: var(--color-ink);
    margin: 0;
    text-decoration: none;
}