html {
    }

    body {
        color: black;
        font-family: serif;
        margin: 0;
        max-width: 100%;
        line-height: 1.85;
        /* the following can in some cases get rid of the horizontal scrollbar */
        overflow-x: hidden;
    }

    body, div {
        min-height: calc( 100vh - 4rem );
    }

    pre, hr {
        margin: 1rem auto 1rem;
    }

    p {
        margin: 0.5rem auto 1.5rem;
    }

    h1, h2, h3, h4, h5 {
        margin: 1.5rem auto 0.5rem;    
    }

    ul, ol {
        padding-left 1rem;
    }

    hr {
      border: 1px solid lightgray;
      padding: 0;
      max-width: 48rem;
    }

    hr.strong {
      border: 1px solid dimgray;
      margin: 1.5rem 0;
    }

    div, footer {
        margin: auto;
        background-color: white;
        padding: 1rem 1.5rem;
    }

    blockquote p {
        font-size 12pt;
        font-style: italic;
        margin: 1rem auto 1rem;
        max-width: 48rem;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.68rem;
    }

    h3 {
        font-size: 1.41rem;
    }

    h4 {
        font-size: 1.19rem;
    }

    h5 {
        font-size: 1rem;
    }
    
    h6 {
        font-size: 0.84rem; 
    }

    a:hover, 
    a:focus,
    a:active {
        color: #2980b9;
    }

    a,
    a:visited {
        color: #3498db;
    }

    img {
        width: 100vw;
        /* yes this causes a horizontal scrollbar to appear sometimes, too bad */
        left: calc( -50vw + 50% );
        position: relative;
    }

    img.small {
        width: 100%;
        left: auto;
    }

    div.toc { 
        min-height: 0;
    }

    pre, code {
        font-family: monospace;
        font-size: 11pt;
    }

    pre {
        background-color: #fafafa;
        font-size: 0.8rem;
        overflow-x: scroll;
        padding 1.125rem;
    }

    /* tables */

    td, tr {
        width: 1em;
        height: 1em;
        padding: 0 0.2em 0 0.2em;
        border: 1px solid grey;
    }

    tr {
        border: none;
    }

    table {
        border-collapse: collapse;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem;
    }

    /* stuff specific for sudokus */
    /* sudoku common */

    div.sudoku tbody tr:first-child {
      border-top: 2px solid black;
    }

    div.sudoku tbody td:first-child {
      border-left: 2px solid black;
    }

    div.sudoku tbody td:last-child {
      border-right: 2px solid black;
    }

    /*********/

    /* sudoku 16 */

    div.s4 tbody tr:nth-child(4n) {
      border-bottom: 2px solid black;
    }

    div.s4 tbody td:nth-child(4n) {
      border-right: 2px solid black;
    }

    /* sudoku 16 end */

    /* sudoku 25 */

    div.s5 tbody tr:nth-child(5n) {
      border-bottom: 2px solid black;
    }

    div.s5 tbody td:nth-child(5n) {
      border-right: 2px solid black;
    }

    /* sudoku 25 end */

    /* sudoku 36 */

    div.s6 tbody tr:nth-child(6n) {
      border-bottom: 2px solid black;
    }

    div.s6 tbody td:nth-child(6n) {
      border-right: 2px solid black;
    }
    
    /* sudoku 36 end */

    /* sudoku 49 */

    div.s7 tbody tr:nth-child(7n) {
      border-bottom: 2px solid black;
    }

    div.s7 tbody td:nth-child(7n) {
      border-right: 2px solid black;
    }

    /*sudoku 49 end */

/* changes for large screens */
@media screen and (min-width: 36rem) {
    html {
        background-color: white;
    }

    div, footer {
        width: 48rem;
    }