/* CONTAINERS */
html, body {
    font-size:16px;
    font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
    margin:0 auto;
    padding:0 5px;
    max-width:40rem;
    max-width:60rem;
}
header {margin:0 0 2rem}
.sitename {
    padding: 3px 10px 5px;
    background-color:#e00;
    display:inline-block;
}
.sitename a {
    font-size:1.3rem;
    font-weight:700;
    color:#fff;
    text-decoration:none;
}
description {
    font-size:1.6rem;
    display:block;
    margin:1.5rem 0;
    font-weight:200;
    line-height:1.37;
    letter-spacing:-0.037rem;
}
.postmeta {font-size:1.1rem; display:block; margin:0 0 1rem 0; color:#8a8a8a}
.postmeta a {color:#f72b9f}
.license {font-size:0.9rem; display:block; margin:0 0 2rem 0}
footer {
    padding:.5rem 0 1.5rem;
    font-size:1.1rem;
    border-top:1px solid #ccc;
    display:flex;
    justify-content:space-between;
}
footer a {text-decoration:none; color:#000}

/* PARAGRAPHS, HEADINGS, LINKS */
p {
    font-size:1.3rem;
    font-family:Georgia,Times,'Times New Roman',serif;
    line-height:1.57;
    margin:0 0 1.5rem;
}
p a:hover {text-decoration:underline}
h1        {font-size:2.2rem; margin:0 0 1.5rem}
h2        {font-size:1.8rem}
h3        {font-size:1.5rem}
h3 a      {color:#d228ad}
h4        {font-size:1.35rem}
h1,h2,h4  {font-weight:800;line-height:1.13; letter-spacing:-0.037rem}
h4        {margin-bottom:0.5rem}
.related  {color:#7c7777}
a         {color:#105fb3; text-decoration:none}
a:hover   {text-decoration:none}

/* LISTS */
ul, ol {
    font-size:1.25rem;
    font-family:Georgia,'Times New Roman',Times,serif;
    line-height:1.57;
}
li {margin:0;font-size:1.3rem}

.line ul {
    font-size:1.5rem;
    font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
    line-height:1.15;
    margin:1rem 0 0;
    padding-left:0;
    list-style-type:none;
}
.line li {
    font-size:1.4rem;
    padding:.7rem 0 .8rem;
    border-top:1px solid #ddd;
    margin:0;
}
.line li a {
    color:#000;
    text-decoration:none;
    letter-spacing:-0.037rem}
.line li a:hover           {text-decoration:underline}
.line li:nth-child(10n+1) {
	letter-spacing:-0.037rem;
    font-size:1.8rem;
    font-weight:800;
    line-height:1.13;
}
.line li:nth-child(1) {
    border:none;
    padding:0 0 1rem;
}
.line li:nth-child(10n+11) {
    border-top:1px solid #ddd;
    padding:15px 0 20px;
}
.line li:nth-child(7) {font-weight:800}

.related ul {
    font-size:1.5rem;
    font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
    line-height:1.15;
    margin:1rem 0 0;
    padding-left:0;
    list-style-type:none;
}
.related li {
    font-size:1.4rem;
    padding:.7rem 0 .8rem;
    border-top:1px solid #ddd;
    margin:0;
}
.related li a {
    color:#000;
    text-decoration:none;
    letter-spacing:-0.037rem}
.related li a:hover           {text-decoration:underline}

.related li:nth-child(1) a {border-top:none}

/* TAGS */
tags ul {
    margin:2rem 0;
    display:flex; 
    flex-wrap:wrap;
    list-style-type:none;
    padding-left:0;
}
tags li {
    font-size:.9rem;
    font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
    margin:0 .5rem .5rem 0;
    padding:0 .4rem .1rem;
    border:none;
    background:#f1f1f1;
    border-radius:5px;
}
tags li a {text-decoration:none; color:#666}

/* BLOCKQUOTE, ASIDE, PRE, CODE */
blockquote {
	margin:2rem 0;
}
blockquote p {
    font-family:inherit;
    font-size:1.6rem;
    font-weight:800;
    line-height:1.5;
    color:#d00a0a;
}
.dgray-yellow, .red-white {
    margin: 0 0 1.5rem;
    padding: 1rem 1.5rem;
    font-size: 1.35rem;
    line-height: 1.73;
    font-weight: 800;
}
.dgray-yellow {background-color:#1e1e1e;color:#f2bf25}
.red-white    {background-color:#bf3030;color:#ffffff}

pre {
	overflow:auto;
	padding:1rem;
}
code {
    font-size:1.1rem;
    font-family:'Jetbrains Mono',Consolas,monospace;
    margin:0 0 1rem;
    color:#f72b9f;
}
code a {color:#ff54b5}
code a:hover {text-decoration:underline}

/*TABLE, HR */
table, th, td {
    font-size: 1.2rem;
    border: thin solid #ccc;
    border-collapse: collapse;
    padding: .3rem .5rem;
    margin: 0 0 2rem;
    width: fit-content;
  }
th {background-color:#ebf6ff}
hr {height:1px; border:0; background-color:#ccc}

/* DARK MODE */
@media (prefers-color-scheme: dark){
html,body                  {background-color:#212529;color:#DBE0EA}
.postmeta                  {color:#a8a8a8}
a                          {color:#41b0e3}
h1, h2, h3                 {color:#ffde00}
h3 a                       {color:#f27ad8}
.related                   {color:#e266ce}
.line li, .related li      {border-top:1px solid #5F6674}
.line li:nth-child(10n+1) a{color:#1aaef2}
.line li:nth-child(10n+11) {border-top:1px solid #5F6674}
.line li:nth-child(7) a    {color:#1aaef2}
.line li a, .related li a  {color:#DBE0EA}
tags li                    {background-color:#111}
footer                     {border-top:1px solid #5F6674;color:#5F6674}
footer a                   {color:#A2A5AC}
blockquote p               {color:#f77070}
code                       {color:#ec59ad}
table, th, td              {border:thin solid #666}
th                         {background-color:#484b4f}
}

/* MOBILE SCREEN */
@media screen and (max-width: 550px) {
header                     {margin:0 0 1.5rem}
h1                         {font-size:1.86rem; margin:0 0 1rem}
h2                         {font-size:1.51rem}
h3, description            {font-size:1.36rem}
h4, p, li, .sitename a     {font-size:1.2rem}
description                {margin:1rem 0}
.postmeta, code, th, td    {font-size:0.93rem}
.line ul                   {font-size:1.26rem}
.line li                   {font-size:1.26rem}
.line li:nth-child(1)      {font-size:1.52rem}
.line li:nth-child(10n+11) {font-size:1.52rem}
tags li, .license          {font-size:0.75rem}
footer                     {font-size:0.93rem; padding:.5rem 0}
p                          {margin:0 0 1rem}
blockquote                 {margin:1.5rem 0}
blockquote p               {font-size:1.36rem}
.license                   {margin:0 0 1.5rem}
}