:root {
    --color-bg:                #fffffe;
    --color-bg-offset:         #f7f7f9;
    --color-text:              #292929;
    --color-text-offset:       #818a91;
    --color-heading:           #292929;
    --color-heading-offset:    #818a91;
    --color-border:            #eceeef;
    --color-link:              #292929;
    --color-link-visited:      #757575;
    --color-link-hover:        #ff6900;
    --color-accent:            #ff6900;
    --color-accent-offset:     #ff1447;
    --color-accent-background: #43a9a3;
    --color-code:              #ffbe85;
    --color-code-background:   #161f27;

    --content-max-width:         50rem;
    --font-size-xs:            0.70rem;
    --font-size-sm:            0.90rem;
    --font-size-base:          1.00rem;
    --font-size-lg:            1.20rem;
    --font-size-xl:            1.50rem;
    --font-size-h4:            1.50rem;
    --font-size-h3:            1.70rem;
    --font-size-h2:            2.00rem;
    --font-size-h1:            3.00rem;

    --line-height-body:        1.50em;
    --font-family-base:        Verdana, Geneva, sans-serif;
    --font-family-header:      Verdana, Geneva, sans-serif;
    --font-family-code:        monotype;

    --border-rounding:           6px;

    font-size: calc(1em + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
}

@media(prefers-color-scheme: dark) {
:root {
    --color-bg: #202b38;
    --color-bg-offset: #1a242f;
    --color-text: #dbdbdb;
    --color-text-offset: #a9b1ba;
    --color-heading: #dbdbdb;
    --color-heading-offset: #a9b1ba;
    --color-border: #526980;
    --color-link: #76A0BB;
    --color-link-visited: #9CAFBB;
    --color-link-hover: #ff6900;
    --color-accent: #ff6900;
    --color-accent-offset: #a9b1ba;
    --color-accent-background: #efdb43;
    }
}

/* defaults */
*,:after,:before{
    box-sizing:inherit;
    margin: 0;
    padding: 0;
}

html {
    box-sizing:border-box;
    scroll-behavior:smooth;
    height:100%;
    border:0 solid;
    margin:0;
    padding:0
}

/* grid */
body {
    display:grid;
    gap: 0.5rem;
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        ". header header ."
        "left main main right"
        ". footer footer .";
    grid-template-rows: auto 1fr auto;
    height:100vh;
    min-height:100vh;
    justify-items: center;
    align-items: start;
}

header {
    grid-area: header;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items:center;
    width: 100%;
}

main {
    grid-area: main;
    padding-bottom:4rem;
    padding-left: 0;
    padding-right:0;
    width: min(100%,var(--content-max-width));
    margin-left: auto;
    margin-right:auto;
}

body > aside {
    grid-area: left;
    display:flex;
}

body > nav {
    grid-area: right;
}

footer {
    grid-area: footer;
    align-self: end;
    padding-bottom:1rem;
    padding-left:1rem;
    padding-right:1rem;
    width:100%;
    text-align: center;
}

@media all and (max-width: 700px) {
  body  {
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas:
        "header"
        "right"
        "main"
        "left"
        "footer";
  }
}



/* styling */



body {
    padding: 1rem;
     background-color:var(--color-bg);
    color:var(--color-text);

    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing: grayscale;

    line-height: var(--line-height-body);
    font-feature-settings:"liga","tnum","case","calt","zero","ss01","locl","calt";
    font-variant-ligatures:contextual;
    -webkit-overflow-scrolling:touch;
    -webkit-text-size-adjust:100%;
    font-family:var(--font-family-base);
}

body > header {
    text-transform:uppercase;
    margin: 1rem auto 1rem auto;
    padding:0;
    border-bottom:1px solid #e6e6e6;

}



body > header > a,
body > header > a:visited,
body > header > a:hover {
    font-size:var(--font-size-lg);
    font-weight:400;
    margin-top:1rem;
    margin-bottom:1rem;
    color:var(--color-text);
    text-decoration:none;
}

body > header > a:hover {
    text-decoration:underline;
}

body > header nav ul {
    display:flex;
    justify-content:space-around;
    list-style:none;
    font-size:var(--font-size-base);
    padding-top:.5rem;
    padding-bottom:.5rem;
}
body > header nav ul li {
    margin-right:2rem;
}
body > header nav ul li:last-child {
    margin-right:0
}

body > header nav ul a,
body > footer a {
    color:#757575;
    text-decoration:none;
    margin-top:1rem;
    margin-bottom:1rem;
}
body > header nav ul a:hover,
body > footer a:hover  {
    color: var(--color-text);
    text-decoration: underline;
}

body > nav > ul {
    list-style:none;
    font-size: var(--font-size-sm);
    text-indent: -0.5em;
    margin-left: 1rem;
    padding-left: 1em;
    border-left: solid thin var(--color-border);
}

body > nav > ul * ul{
    list-style:none;
    font-size: var(--font-size-sm);
    text-indent: -0.5em;
    margin: 0;
    padding-left: 1em;
}



main > * {
    padding-left: 0;
    padding-right:0;
}


nav.pagination  {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    border-top: solid thin var(--color-border);
}


nav.pagination  a,
nav.pagination  a:visited,
nav.pagination  a:hover {
    margin-top:1rem;
    color:var(--color-text);
    text-decoration:none;
}

nav.pagination a:hover {
    text-decoration: underline var(--color-accent) dotted 1px;
    text-underline-offset: 6px;
}

audio,canvas,embed,iframe,img,object,video{
    display:block
}


img,video{
    height:auto
}
img,video{
    max-width:100%
}

img {
    display:block
}

figcaption {
    text-align: center;
    font-size: var(--font-size-sm);
}

hr {
    width:100%;
    border:none;
    background: var(--color-border);
    height:1px;
    margin-top:2rem;
}

a {
    color: var(--color-link);
    text-decoration: underline var(--color-accent) dotted 1px;
    text-underline-offset: 6px;
}

a:visited
{
    color: var(--color-link-visited);
}
a:hover{
    color: var(--color-link-hover);
}

ol,ul {
    margin-left: 3em;
    margin-top: 1em;
}
ol {
    list-style-position:inside
}
ol ol {
    list-style-type:lower-alpha
}

ul {
    list-style-type:square;
    list-style-position:outside;
    margin-bottom: 1.5rem;
}

article ul li, .post-list > li {
    margin-top: .67em;
    margin-bottom: .67em;
}

b,strong{
    font-weight:bold;
}


*+p, *+aside {
    margin-top:1.5rem
}

h2+p,h3+p,h4+p {
    margin-top:1rem }

h1, h2, h3, h4, h5, h6{
    line-height:1.3;
    font-weight: 500;
    margin-top: 2rem;
    color: var(--color-heading);
    font-family: var(--font-family-header);

}

h1 {
    font-size:var(--font-size-h1);
    font-weight: 700;

}

h2 {
    font-size:var(--font-size-h2)
}

h3 {
    font-size:var(--font-size-h3);
    font-weight: 600;
}

h4 {
    font-size:var(--font-size-h4)
}



audio,iframe,img,video{
    width:100%;
    max-width:100%;
    margin-top:1rem
}

blockquote {
    margin-bottom:1rem;
    padding-left:1rem;
    border-left:3px solid #0074d9;
    border-left:3px solid var(--color-accent);
    font-style:italic;
}

blockquote,pre {
    margin-top:1rem;
}

pre{
    white-space:pre-wrap;
    -moz-tab-size:2;
    -o-tab-size:2;
    tab-size:2;
    font-size:.95rem;
    border:1px solid rgba(41,41,41,0.1);
    padding:1rem;
}

pre {
    overflow:auto;
    max-width:1090vw;
    margin-left:auto;
    margin-right:auto;
    scrollbar-width:thin;
}

pre > code {
  padding: 0.5rem;
  display: block;
  overflow-x: auto;
  border-radius: var(--border-rounding);
}

code {
    color: var(--color-code);
    background: var(--color-code-background);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-code);
}

mark {
    background:var(--color-accent-background);
    color:#fffffe;
    color:var(--color-bg);
    padding:1px 6px;margin:0 2px;font-size:.95rem
}

.visually-hidden{
    clip-path: inset(1px 1px 1px 1px);
    height:1px;
    overflow:hidden;
    position:absolute;
    white-space:nowrap;
    width:1px;
}

.tags > *, .details > * {
    margin-right: 0.5rem;
    margin-top:.5rem;
}

.tags, .details {
    color:#757575;
    margin-top:1rem;
    font-size:var(--font-size-sm);
}
.tags a, .details a {
    text-decoration:none;
    color:#757575;
}

.bicolumn {
    column-count: 2;
}