@import '/css/common.css';
@import '/css/pygments.css';

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@page {
    margin: 1cm;
}

html {
    background-color: white;
}

h3 {
    font-size: 1em;
    font-variant: small-caps;
    font-weight: bolder;
}

strong {
    font-weight: bold;
    color: #aa0000;
}

li small,
li span.small {
    display: block;
    padding-left: 3ex;
    margin-top: 0.5em;
    font-size: 1em;
    color: gray;
}

h1 {
    cursor: pointer;
}

.mode-deck {
    p,
    li,
    pre,
    figure,
    h1,
    h2,
    h3,
    h4 {
        margin-bottom: 2rem;
    }

    li {
        p,
        li,
        pre,
        figure,
        h1,
        h2,
        h3,
        h4 {
            margin-bottom: 1rem;
        }
    }

    .document-only {
        display: none;
    }

    .deck-before,
    .deck-previous,
    .deck-next,
    .deck-after {
        position: absolute;
        left: -1000vw;
    }

    .deck-current {
        display: flex;
        font-size: 3.5vh;
        width: 133vh;
        min-height: 100vh;
        flex-direction: column;
        justify-content: center;
        margin: 0 auto;
        padding: 12vh 4vh 4vh 4vh;

        h2 {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            margin: 0;
            padding: 2vh 10vh;
            font-weight: 700;
            font-size: 1.2em;
            color: white;
            background-color: green;
            text-align: right;
            z-index: 1000;
        }

        h1 {
            font-weight: 700;
            font-size: 2em;
        }

        & > * {
            flex: 0 0 auto;
        }

        &.full {
            width: 100vw;
            height: 100vh;
            padding: 0;

            h2 {
                background-color: rgba(0, 0, 0, 0.5);
            }

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                margin: 0;
            }
        }

        &.code {
            width: 95%;

            &::before {
                position: fixed;
                background-color: #f0f0f0;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                content: '';
                z-index: 10;
                display: block;
            }

            &::after {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                bottom: 0;
                width: 3%;
                background-color: #bbb;
                z-index: 20;
            }

            & > * {
                z-index: 100;
            }

            h2 {
                z-index: 1000;
                background-color: #555;
            }
        }
    }
}

.mode-document {
    max-width: 60ex;
    margin: 0 auto;
    padding: 1rem;

    .deck-only {
        display: none;
    }

    h2 {
        font-size: 1.1em;
    }

    h1 {
        text-align: right;
        border-bottom: 1px solid lightgray;
        padding: 1em 0;
    }

    .full img {
        max-width: 100%;
    }
}

@media (print) {
    .mode-document {
        padding: 0;
    }
}