body {
    font-family: sans-serif ;
    background: #FFFFFF ;
    color: #000000 ;
    min-height: 100vh;
    display: grid;
}

main {
    max-width: 800px ;
    margin: auto ;
}

img {
    max-width: 100% ;
    vertical-align: middle;
}

header h1 {
    text-align: center ;
}

footer {
    clear: both ;
    background-color: #F1F3EC;
}

/* code fence style
 * when using
 * ```language
 * some code
 * ````
 *
 * linenos is a setting that adds the number line
 * if set we use different style
 */

/* linenos=true or linenos=table */
.highlight > div  {
  border-radius: 8px;
  padding: 0 1em;
}
/* linenos=false or linenos=inline */
.highlight > pre  {
  border-radius: 8px;
  padding: 1em;
}

/* for code that are not in a fence
 * when using `some code`
 */
p > code {
  background: #f1f2f2;
  border-radius: 0.2em;
  padding: 0.2em;
}