@import "code-light.css" (prefers-color-scheme: light);

    :root {
        --background: #FFFFFF;
        --background-dim: #f5f7f9;

        --foreground: #2B303A;
        --foreground-dim: #576379;
        --foreground-heavy: #191C22;

        --primary-color: #375287;
    }


::selection {
    background: #ffecaa;
}
html {
  font-size: 18px;
  font-family: serif;
}

body {
  margin: 0 auto;
  max-width: 50rem;
  background: var(--background);
  color: var(--foreground);
  line-height: 1.5;
  padding: 0rem 0.5rem;
background: rgb(178, 223, 218) url(/bg.gif) 0 50px fixed no-repeat;
}

aside {
    font-size: smaller;
    font-style: italic;
    color: var(--foreground-dim);
}

img {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
    color: var(--foreground-heavy);
}

a {
    color: var(--primary-color);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    text-decoration: underline;
}

.nav {
margin: auto;
background-color: #fff;
    max-width: 50rem;
    box-shadow: 0 2px 8px rgba(15, 18, 25, 5%);
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}
nav ul {
  list-style: none;
}

nav li {
  display: inline;
}

nav li + li:before {
  content: " · ";
  margin: 0 0.5ex;
}

main {
    margin: auto;
    padding: 3em 1em;
    max-width: 50rem;
background-color: #fff;
    box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302), 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06), 0 0 0 0.0625rem rgba(27, 40, 50, 0.015);
    border-bottom-left-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

article header {
    display: flex;
    flex-direction: row;
    margin: 1rem 0;
}

article header time {
    white-space: nowrap;
    color: var(--foreground-dim);
    font-style: italic;
    flex: 0 0 12ex;
}

article header h2,
article header p {
    font-size: 1rem;
}

code,
pre {
  background: var(--background-dim);
  border-radius: 0.3rem;
  font-family: monospace;
}

pre {
  padding: 1rem;
  border-left: 2px solid var(--primary-color);
  overflow: auto;
}

code {
  padding: 0.1rem 0.2rem;
}

/* reset the padding for code inside pre */
pre code {
  padding: 0;
}

blockquote {
  background: var(--background-dim);
  border-radius: 0 0.3rem 0.3rem 0;
  font-style: italic;
  border-left: 2px solid var(--primary-color);
  margin: 0;
  padding: 1rem;
}

/* reset the margin for p inside blockquotes */
blockquote p {
  margin: 0;
}

body > header {
padding: 0 2rem;
    margin: 2rem 0 auto;
background-color: #fff;
    max-width: 50rem;
    box-shadow: 0 2px 8px rgba(15, 18, 25, 5%);
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

body footer {
  margin: 3rem 0;
  color: var(--foreground-dim);
  font-size: smaller;
  text-align: center;
}

header nav {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

header h1 {
  margin: 0 auto;
  color: var(--primary-color);
}

header h2 {
  display: inline;
  font-size: 1.2rem;
}