/* Neat.css (https://github.com/codazoda/neatcss), with a few modifications */

:root {
    color-scheme: light;
    --light: #fff;
    --dark: #404040;
}

* {
    box-sizing: border-box;
    color: var(--dark);
}

html {
    font-family: Ubuntu, Overpass, system-ui, -apple-system, sans-serif;
}

body {
    /* background-color: var(--light); */
    line-height: 1.4;
    margin: 0;
    max-width: 800px;
    padding: 0 20px 20px 20px;
    margin-left: auto;
    margin-right: auto;
    font-family: Ubuntu, Overpass, system-ui, -apple-system, sans-serif;
    font-size: 1.2rem;
}

p {
    margin-bottom: 10px;
    line-height: 1.4em;
}

p.date {
    font-size: 19px;
    padding-bottom: 1rem;
    font-variant: common-ligatures small-caps;
}

p.author {
    font-size: 17px;
    padding-top: 1rem;
    font-variant: common-ligatures small-caps;
}

body, p, blockquote, q, li, main, article {
    font-size: 1.2rem;
    line-height: 1.7em;
}

h1,h2,h3,p,li,td {
               font-family: Ubuntu, Overpass, system-ui, -apple-system, sans-serif;
        }
		
a.nav {text-decoration: none;}

blockquote, q {
  border-left: 4pt solid #B2BEB5;
  padding-left: 10px;
  font-style: italic;
}
        
kbd,tt,code {
        font-family: "IBM Plex Mono", "Overpass Mono", -apple-system, monospace;
        background-color: #e0e0e0;
        font-weight: 500;
}

img {
    width: 100%;
}

pre {
    overflow: auto;
}

footer {
        font-family: Ubuntu, Overpass, system-ui, -apple-system, sans-serif;
        /* text-align: right;*/
        font-size: 13px;
        margin-top: 30px;
        }
        
.left {
  float: left;
}

.right {
  float: right;
}
        
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.title {font-size: 26px;}

.note {
  background-color: rgba(0, 133, 242, .1);
  border-left: 4px solid blue;
  padding-left: 6px;
}

.note::before {
  content: "Note: ";
  font-weight: bold;
}
    
nav, footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
      }
      
nav ul, footer ul {
     display: flex;
     list-style: none;
     margin: 0;
     padding: 0;
      }

nav li, footer li {
     margin-right: 1rem;
      }

nav li:last-child, footer li:last-child {
     margin-right: 0;
      }
      
nav a {
     margin-left: 20px;
     text-decoration: none;
      }
        
main {
     padding: 20px;
     }
     
table {
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
}

th {
  background-color: #f2f2f2;
  color: #333;
  font-weight: bold;
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ccc;
  position: sticky;
  top: 0;
}

td {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

/* Desktop sizes */
@media only screen and (min-width: 600px) {
  
    .row {
        display: flex;
        flex-direction: row;
        padding: 0;
        width: 100%;
    }

    .row .column {
        display: block;
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }

    .row .column:not(:last-child) {
        margin-right: 10px;
    }
}