/*
=============================
 __  ___  ___   _____   _____
 \ \/ / |/ / | / / /  /_  __/ ___  ___
  >  <|    /| |/ / /__ / / / _ \/ _ |
 /_/\_\_/|_/ |___/____//_/ /_//_/_/ |_|
=============================
*/

:root           {--bg: #222; --bg-alt: #1f1f1f; --fg: #c8c8c8; --fg-hi: #fff; --line: #444; --dim: #777;}

body            {letter-spacing: 0.1px; padding: 0; margin: 0; font-family: 'Share Tech Mono', Monospace, Courier;
                font-weight: 400; font-size: 17px; color: var(--fg); background: var(--bg);}
html            {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word;}
pre             {padding: 0; margin: 0 0 50px 0;}
ul              {padding: 0;}
span            {padding: 0; margin: 0 10px 0 0;}
li              {margin: 15px 0; padding: 0; list-style: none;}
a               {text-decoration: none; color: var(--fg-hi);}
a:hover         {color: var(--fg-hi); text-decoration: underline;}
p               {padding: 0; margin: 10px 0 30px 0;}
img             {max-width: 100%; height: auto; margin-bottom: 20px;}
a.img           {display: block; width: fit-content; max-width: 100%; margin: 10px auto 30px auto;}
a.img img       {display: block; margin: 0;}

#page           {max-width: 900px; margin: auto; padding: 0 20px;}
#content        {max-width: 100%; margin: auto;}
#footer         {max-width: 900px; margin: auto; margin-top: 55px; padding: 0 20px 40px 20px;
                border-top: dotted 1px var(--line);}

.header         {height: 66px; width: 100%; margin: auto; margin-bottom: 50px; border-bottom: dotted 1px var(--line);}
.logodiv        {max-width: 900px; height: 100%; margin: auto; padding: 0 20px; display: flex; align-items: center;
                justify-content: space-between;}
.logo           {display: flex; align-items: center;}
.logo img       {height: 0.75em; width: auto; margin: 0;}
.filter         {display: block; text-align: right;}
.footdogs       {margin: 0 5px;}

#list           {margin-bottom: 50px;}
#post           {max-width: 900px; margin-bottom: 20px; margin-top: -10px; line-height: 28px;}

.intro          {margin: 0 0 40px 0; line-height: 26px;}
.year           {color: var(--dim);}
.tag            {color: var(--fg);}
.wip            {color: var(--dim);}
.notification   {color: var(--bg); background: var(--fg-hi);}
.important      {margin-left: -18px;}
.title          {display: inline-block; margin-bottom: 20px; margin-top: 20px; color: var(--fg-hi);}
.meta           {color: var(--dim); margin: -10px 0 30px 0;}
.meta a         {color: var(--dim);}
.meta a.on      {color: var(--fg-hi);}
.subtitle       {display: inline-block; margin: 20px 0; color: var(--fg-hi);}
.subtitle2      {display: inline-block; color: var(--bg); background: var(--fg-hi);}
.code           {max-width: 900px; background: var(--bg-alt); padding: 20px; margin: 10px 0 30px 0; display: block; overflow-x: auto;}
.code pre       {margin: 0; white-space: pre-wrap;}
blockquote      {margin: 0 0 30px 0; padding: 0 0 0 20px; border-left: solid 1px var(--line);}
.codesmall      {background: var(--bg-alt); display: inline-block;}
.description    {background: var(--bg-alt); padding: 10px 0 10px 10px; margin-top: 0;}
.videowrapper   {position: relative; padding-bottom: 56.45%; height: 0;}
video           {max-width: 100%;}

@media only screen and (max-width: 900px) {
body            {font-size: 19px;}
}

@media only screen and (max-width: 600px) {
.header         {height: auto; padding: 18px 0;}
.logodiv        {flex-wrap: wrap; gap: 10px 20px;}
.filter         {font-size: 16px;}
.year           {display: none;}
}