@font-face {
  font-family: Monaspace;
  src: url(/fonts/Monaspace-Neon-Var.woff);
}

.home header {
  margin-bottom: 0px;
}:root {
    --width: 600px;
    --font-main: Monaspace, monospace;
    --font-secondary: Monaco, monospace;
    --font-scale: 1em;
    --background-color: #333;
    --heading-color: #eee;
    --text-color: #ddd;
    --text-color-dim: #bbb;
    --link-color: #7C54B6;
    --visited-color:  #ddd;
    --code-background-color: #282828;
    --code-color: #d9d9d9;
    --blockquote-color: #ccc;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #333;
        --heading-color: #eee;
        --text-color: #ddd;
        --link-color: #7C54B6;
        --visited-color:  #ddd;
        --code-background-color: #282828;
        --code-color: #d9d9d9;
        --blockquote-color: #ccc;
    }
}


body {
    font-family: var(--font-main);
    font-size: var(--font-scale);
    margin: auto;
    padding: 20px;
    max-width: var(--width);
    text-align: left;
    background-color: var(--background-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.5;
    color: var(--text-color);
  	display: flex;
    flex-direction: column;
    min-height: calc(100vh - 45px);
}


h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-main);
    color: var(--heading-color);
}

header{
    text-align: center;
    margin-bottom: 50px;
    text-decoration: none;
}

header a.title {
    font-size: 1.5em;
  	text-decoration: none;
	color: var(--heading-color);
}

header a:hover {
	color: var(--link-color)
}

header h1 {
    font-size: 1.5em;
  	text-decoration: none;
	color: var(--heading-color);
}

time{
  font-style:normal;
}

nav a {
    margin-right: 8px;  
  text-decoration: none;
  color: #ccc;
  cursor: pointer;
  outline-color: transparent;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: DimGray;
}

nav a:hover{
  background-color:var(--link-color);
  color: var(--background-color);
  text-decoration:none;
}

strong, b {
    color: var(--heading-color);
}

button {
    margin: 0;
    cursor: pointer;
}

main {
  line-height: 1.7;
	flex-grow: 1;
}


main a{
  text-decoration: none;
  color: #ccc;
  cursor: pointer;
  outline-color: transparent;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: DimGray;
}

main a:hover{
  background-color: var(--link-color);
  color: var(--background-color);
  text-decoration:none;
}

table {
  width: 100%;
}

hr {
  border: 0;
  border-top: 1px dashed;
}

img {
  display: block;
  max-width: 75%;
  max-height: 300px;
  margin: auto;
  border-radius: 5px;
}

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

/*highlight{}*/

blockquote {
  border-left: 1px solid #999;
  color: var(--code-color);
  padding-left: 20px;
  font-style: italic;
}

footer {
  text-align: center;
}

footer a{
  text-decoration: none;
  color: #ccc;
  cursor: pointer;
  outline-color: transparent;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: DimGray;
}

footer a:hover{
  color: var(--background-color);
  text-decoration:none;
}

.inline {
  width: auto !important;
}

.inline-image{
  text-align: center;
}

.inline-block{
  display: inline-block;
}

.highlight, .code {
  padding: 1px 15px;
  background-color: var(--code-background-color);
  color: var(--code-color);
  border-radius: 4px;
  margin-block-start: 1em;
  margin-block-end: 1em;
  overflow-x: auto;
  border-left: 2px dotted;
  border-color: #ccc;
  margin-left: auto;
  margin-right:auto;
  width: 66%;
}

/* blog post list */

ul.blog-posts {
  list-style-type: none;
  padding: unset;
  padding-top: 1em;
}

ul.blog-posts li {
  display: flex;
}

/*ul.blog-posts li span {}*/

ul.blog-posts li a:visited {
  color: var(--visited-color);
}

/* embeded posts */


ul.embedded.blog-posts li {
  display: flex;
  flex-flow: row wrap;
  border-top: 2px dotted;
  border-color: #777;
  padding-top: 1em;
  margin-bottom: 1em;
  gap: 1em;
}


ul.embedded.blog-posts li a{
	text-decoration: none;
  color: #ccc;
  cursor: pointer;
  outline-color: transparent;
  border-radius: 3px;
  padding-left: 5px;
  padding-right: 5px;
  background-color: DimGray;
  height: fit-content;
}

ul.embedded.blog-posts li a:hover{
  background-color: var(--link-color);
  color: var(--background-color);
  text-decoration:none;
}

ul.embedded.blog-posts li p {
  margin-top: 0px;
  margin-bottom: 0px;
  color: var(--text-color-dim);
}

ul.projects {
  list-style-type: none;
  padding: unset;
}

ul.embedded.projects li {
  display: flex;
  flex-direction: column;
  border-top: 2px dotted;
  border-color: #777;
  padding-top: 1em;
  align-items: flex-start;
}

ul.embedded.blog-posts li p {
  margin-top: 0px;
  margin-bottom: 0px;
  color: var(--text-color-dim);
  align-self: flex-end;
}