/* Common */
:root {
    --mainDarkColor: #555;
    --highlightColor: crimson;
    --fontMultiplier: 1.2;
}
body {
    margin: 0;
    padding: 0;
}

body > code {
    width: 100vw;
    min-height: 100vh;
    padding: 5vh 0 0 5vw;
    margin: 0;
    box-sizing: border-box;
    font-family: Tahoma;
    display: none;
    font-size: calc(var(--fontMultiplier) * 5vh);
    line-height: 2;
}

body > code:target {
    display: block;
}

body > code::after {
    display: block;
    position: absolute;
    content: attr(data-page)'/'attr(data-total);
    bottom: 1vh;
    left: 1vh;
    font-size: calc(var(--fontMultiplier) *  2vh);
    font-family: Tahoma;
    line-height: normal;
    text-align: right;
}

h1, h2, h3 {
    color: var(--mainDarkColor);
    font-weight: normal;
    font-size: calc(var(--fontMultiplier) * 8vh);
    line-height: 1.2;
}
h2 {
    font-size: calc(var(--fontMultiplier) * 7vh);
}
h3 {
    font-size: calc(var(--fontMultiplier) * 6vh);
}

a, em {
    color: var(--highlightColor);
    font-style: normal;
}

img {
    max-width: 90vw;
    max-height: 70vh;
}

ul {
    list-style: disc;
}
li ul, li ol {
    padding-left: 3vw;
}

pre {
    white-space: pre-wrap;
}

/* Compact */
.compact {
    line-height: 1.5;
}

/* Fullscreen */
.fullscreen {
    padding: 0;
}
.fullscreen  img {
    max-width: 99vw;
    max-height: 100vh;
}

/* Centered */
.centered p {
    text-align: center;
}

/* Inverted */
.inverted {
    background-color: var(--mainDarkColor);
    color: #fff;
}
.inverted h1, .inverted h2, .inverted h3 {
    color: #fff;
}

/* Standout */
.standout {
    text-align: center;
    font-size: calc(var(--fontMultiplier) * 10vh);
    line-height: 85vh;
}
.standout p {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

/* Print */
@media print {
    body > code, .inverted {
        display: block;
        background-color: #fff;
        color: #000;
        background-image: none;
        padding: 2vh 2vw;
        line-height: 150%;
    }
    h1, h2, h3, 
    .inverted h1, .inverted h2, .inverted h3 {
        color: #000;
    }
    
    .compact {
        line-height: 1.2;
    }
    body > code::after {
        display: none;
    }
    em {
        color: #000;
        font-style: italic;
    }
    a {
        color: #000;
    }
}