* {
    padding: 0;
    margin: 0;
    transition: .2s all;
}

:root {
    --v-baseline: 8;
    --v-baseline-multiplier: 2.5;
}

body {
    --v-padd: calc(var(--v-baseline-multiplier) * var(--v-baseline) * 1px);
    min-width: 240px;
    max-width: calc(var(--v-padd) * 37);
    width: calc((var(--v-padd) * 2) + 50vw);
    margin: 60px auto;
    padding: 0 var(--v-padd);
    font-family: Georgia, serif;
    color: #09082e;
    background-color: white;
}

div {
    --v-left-padd: calc(var(--v-baseline-multiplier) * var(--v-baseline) * 1px);
    border-left: .1em dotted #09082e;
    padding-left: var(--v-left-padd);
}

h1 {
    --v-lineheight: calc((var(--v-baseline-multiplier) + 1.5) * var(--v-baseline) * 1px);
    font-size: calc(var(--v-lineheight) / 1);
    margin-bottom: var(--v-lineheight);
    font-family: Helvetica Neue, Arial, sans-serif;
}

p {
    --v-lineheight: calc(var(--v-baseline-multiplier) * var(--v-baseline) * 1px);
    line-height: var(--v-lineheight);
    font-size: calc(var(--v-lineheight) / 1.25);
    margin-bottom: var(--v-lineheight);
}

p br.responsive {
    display: none;
}

.display-none {
    display: none;
}

@media(min-width: 400px) and (max-width: 1000px) {
    p br.responsive {
	display: inline;
    }
}

@media(min-width: 600px) {
    :root {
        --v-baseline-multiplier: 3;
    }
}

@media(min-width: 900px) {
    :root {
        --v-baseline-multiplier: 3.5;
    }
}

@media(min-width: 1200px) {
    :root {
        --v-baseline-multiplier: 4;
    }
}

@media(min-width: 1500px) {
    :root {
        --v-baseline-multiplier: 4.5;
    }
}

@media(min-width: 1800px) {
    :root {
        --v-baseline-multiplier: 5;
    }
}

@media(min-width: 2100px) {
    /* 2K (2048x1080) */ 
    :root {
        --v-baseline-multiplier: 5.5;
    }
}

@media(min-width: 2400px) {
    :root {
        --v-baseline-multiplier: 6;
    }
}

@media(min-width: 2700px) {
    :root {
        --v-baseline-multiplier: 6.5;
    }
}

@media(min-width: 3000px) {
    :root {
        --v-baseline-multiplier: 7;
    }
}

@media(min-width: 3300px) {
    :root {
        --v-baseline-multiplier: 7.5;
    }
}

@media(min-width: 3600px) {
    :root {
        --v-baseline-multiplier: 8;
    }
}

@media(min-width: 3900px) {
    /* UHD-1 (3840x2160), 4K (4096x2160) */
    :root {
        --v-baseline-multiplier: 8.5;
    }
}

@media(min-width: 4200px) {
    :root {
        --v-baseline-multiplier: 9;
    }
}

@media(min-width: 4500px) {
    :root {
        --v-baseline-multiplier: 9.5;
    }
}

@media(min-width: 4800px) {
    :root {
        --v-baseline-multiplier: 10;
    }
}

@media(min-width: 5100px) {
    /* 5K Ultrawide (5120x2160), 5K (5120x2880) */
    :root {
        --v-baseline-multiplier: 10.5;
    }
}

@media(min-width: 7500px) {
    /* UHD-2 (7680x4320), 8K (8192x4320) */
    :root {
        --v-baseline-multiplier: 14.5;
    }
}