@page {
    size: A4 portrait;
    margin: 10mm;
}

@media print {
    html, body {
        zoom: 0.8;
    }

    .elements {
        padding-left: 0;
        padding-right: 0;
    }

    .g1 {
        grid-template-columns: repeat(1, 1fr);
    }

    .g2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .g3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .g4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .g4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .g5 {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media screen {
    html, body {
        text-align: center;
    }

    .elements {
        display: inline-block;
    }

    .g1 {
        grid-template-columns: repeat(1, 22rem);
    }

    .g2 {
        grid-template-columns: repeat(2, 22rem);
    }

    .g3 {
        grid-template-columns: repeat(3, 22rem);
    }

    .g4 {
        grid-template-columns: repeat(4, 22rem);
    }

    .g5 {
        grid-template-columns: repeat(5, 22rem);
    }

    .g6 {
        grid-template-columns: repeat(6, 22rem);
    }
}

html, body {
    font-size: 13px;
    margin: 0.2rem;
    font-family: monospace;
    white-space: nowrap;
}

sub {
    vertical-align: baseline;
    font-size: smaller;
}

.grid {
    display: grid;
    column-gap: 0.5rem;
    row-gap: 2.5rem;

    justify-content: center;
    justify-items: stretch;

    align-items: end;
    align-content: start;

    text-align: left;
}

/* general */

.mr1 {
    margin-right: 1rem;
}

.mb1 {
    margin-bottom: 1rem;
}

.mb3 {
    margin-bottom: 3rem;
}

.p05 {
    padding: 0.5rem;
}

.break {
    page-break-after: always;
}

.pointer {
    cursor: pointer;
}

.id, a, a:visited {
    color: cornflowerblue;
}

.name {
    color: lightskyblue;
}

.sequence {
    font-size: 1.4rem;
    white-space: pre;
}

.elements {
    padding: 1rem;
}

/* busy */

.busy {
    opacity: 0.1;
    margin: 60px;
    animation-name: spin;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}