:root {
--main-color: #222222;
--bgrd-code: whitesmoke;
--accent-color: #888888;
--link-color: #2ea6d2;
font-size: 1rem;
}

*,
*:before,
*:after { 
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}

html {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

body {
color: var(--main-color);
max-width: 720px;
margin: 0 auto;
font-family: "Fira Sans", "Nimbus Sans", "Roboto", Arial, Verdana, sans-serif;
font-kerning: none;
line-height: 1.5;
min-height: 100vh;
padding: 0 16px;
}

p {
text-wrap: pretty;
}

/*
main{
max-width: 720px;
margin: 0 auto;
}
article {
max-width: 600px;
margin: 0 auto;
}
*/
/* Links */
a {
/* color: #0d6efd; */
color: var(--link-color);
/* text-decoration: none; */
/* border-bottom: 1px solid var(--accent-color); */
}

a:hover {
color: var(--main-color);
}

/* Lists */
ul {
padding-left: 1rem;
}

ul ul{
  margin-left:1.05rem;
}

ul ul ul{
  margin-left:1.10rem;
}

hr {
border: none;
}

hr::before {
content: '***';
display: block;
text-align: center;
font-size: 2em;
color: var(--accent-color);
}

blockquote {
border-left: 3px solid var(--accent-color);
color: var(--accent-color);
margin: 0;
padding-left: 1em;
}

/* Images */

img {
max-height: 100%;
max-width: 100%;
border: 1px solid var(--bgrd-code);
border-radius: 2px;
}

/* Code blocks */
code {
background-color: var(--bgrd-code);
padding: .1em .2em;
border-radius: 3px;
font-family: monospace;
font-size: 92.5%;
}

pre {
background-color: var(--bgrd-code);
line-height: 1.4;
padding: 1em;
border-radius: 4px;
overflow-x: auto;
scrollbar-width: none;
}

p > code, li > code, ol > code, ul > code {
background-color: var(--bgrd-code);
color: inherit;
}

pre code {
background-color: transparent;
color: inherit;
padding: 0;
}

h1, h2, h3, h4, h5, h6 {
font-weight: 600;
text-wrap: balance;
line-height: 1.25;
font-kerning: normal;
color: #404040;
}

time {
color: var(--accent-color);
}

/* table */
table {
border-spacing: 0;
border-collapse: collapse;
}

table th{
padding: 6px 13px;
border: 1px solid var(--bgrd-code);
font-size: large;
background: var(--bgrd-code);
}

table td{
padding: 6px 13px;
border: 1px solid var(--bgrd-code);
}

/* Semantic layout */

article > header {
text-align:center;
margin-bottom: 3rem;
}

article > header > time {
display: block;
}

article > header > mark {
background-color: var(--bgrd-color);
display:inline-block;
}

article > aside {
border-radius: 5px;
padding: 16px;
margin: 2.5rem 0;
background-color: var(--bgrd-code);
}

article > p {
line-height: 1.75;
margin-bottom: 2rem;
}

h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
color: #404040;
text-decoration: none;
}

h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover {
color: var(--accent-color);
}

article > header > h1 {
font-size: 250%;
text-align: center;
margin: 1rem 5% 8px 5%;

}

article > h2 {
font-size: 180%;
}

article > h3 {
font-size: 150%;
}

article > h4 {
font-size: 125%;
}

article > h5 {
font-size: 100%;
}

body > footer {
display: flex;
justify-content: center;
margin-top: 2rem;
margin-bottom: 1rem;
}


ul[role=menu], ol[role=menu] {
list-style: none;
padding-left: 0;
line-height: 2;
}

@media (min-width:600px) {
.grid {
column-count: 3;
column-gap: 16px;
padding: 16px 0;
list-style-type: none;
}

body > article {
padding-left: auto;
padding-right: auto;
}

main > section > h2 {
font-size: 120%;
}

main > section > h2:first-child {
margin-top: 0;
}

main > section {
break-inside: avoid;
margin-bottom: 1rem;overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
}
}