/* Let's keep it stupid, simple. ^^ */

*
    /* Make CSS sizing sane */
    box-sizing: border-box

html
    font-family: "Monaspace Krypton", monospace
    /* Make the main text not solid black */
    color: #333
    /* Let's not use solid white */
    background: #fcfcfc

body 
    /* Make the body a 80 character wide container */
    width: 80ch
    /* Center the container within the viewport */ 
    margin: 0 auto
    /* Give the lines an adequate amount of room to breathe. */
    line-height: 1.4
    /* Make sure the edge of the body has a gap for mobile */
    padding: 1em


h1, h2, h3 
    /* More contrast with the headers than the main text */
    color: #111

img
    /* Make sure that the images do not overflow the body */
    max-width: 100%
    /* Make sure that the images are not too tall as to be annoying */
    max-height: 50ch

/* We want the footer to be like two columns, where the right columns are also right-aligned and the columns grow to share the space sanely. */

footer nav ul 
    list-style-type: none
    padding: 0
    margin: 0
    display: flex 
    flex-wrap: wrap
    column-count: 2
    gap: 0.5em 0.25em
    li 
        display: inline-block
        padding: 0
        margin: 0
        flex-grow: 1
        &:nth-child(2n)
            text-align: right
