/* Webfont imports */

/* INTER DISPLAY — Sans-serif headings */
@font-face {
  font-family: "Inter Display";
  src: url("InterDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* SOURCE SERIF 4 — Body text */
@font-face {
  font-family: "Source Serif 4";
  src: url("SourceSerif4-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* @font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
} */

/* JETBRAINS MONO — Code blocks */
@font-face {
  font-family: "JetBrains Mono";
  src: url("JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Root Variables */
:root {
    --background-color: #f3f3f3;
    --text-color: #3c3c3c;
    --codeblock-color: #eaeaea;

    --content-width: 42em;

    --font-body: "Source Serif 4", Georgia, 'Times New Roman', 'New York', ui-serif, serif;
    --font-heading: "Inter Display", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Open Sans', 'Helvetica Neue', Geneva, Tahoma, sans-serif;
    --font-code: "JetBrains Mono", Menlo, Monaco, SF Mono, Consolas, Courier New, Segoe UI Mono, ui-monospace, monospace;
}

html, body {
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 40px auto;
    max-width: var(--content-width);
    padding: 0 10px;
}

main {
    font-family: var(--font-body);
    line-height: 1.6;
    font-size: 18px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
}

code {
    font-family: var(--font-code);
    font-size: 15px;
}

pre {
    overflow: auto;
    line-height: 1.2;
    background-color: var(--codeblock-color);
    padding: 10px;
    border-radius: 5px;
}

hr {
    height: 0;
    border: 1px solid var(--text-color);
    width: 100%;
}

/* Fluid images - from https://www.zachleat.com/web/fluid-images/ */
img {
  max-width: 100%;
}
img[width][height] {
  height: auto; /* Preserve aspect ratio */
}
img[src$=".svg"] {  /* Let SVG scale without boundaries */
  width: 100%;
  height: auto;
  max-width: none;
}

/* Link styles - from https://bjornd.al/ 
a:link {
    color: #0000EE;
    text-decoration: none;
}
a:visited {
    color: #0000EE;
}
a:hover {
    background-color: #0000EE;
    color: #FFFFFF !important;
}
*/

a {
    color: var(--text-color);
    text-decoration: underline;
}

/* Styles for the site header */ 
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* gap: 0.5rem; */
}
.header-text{
    font-size: 80px;
    line-height: 1;
    margin: 0;
    padding: 0;
}
.logo {
  max-height: 100%;
  height: 4.5em;
  width: 12%;
  flex-shrink: 0;
}

/* Styles for the navigation bar */ 
.nav-divider {
    height: 0;
    border: 1px solid;
    margin: 1em 0;
    width: 100%;
}
.nav-list {
    ul{
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    a {
        text-decoration: none;
    }
}

.post-metadata {
    /* display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%; */
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.postlist {
    list-style-type: none;
    margin: 0;
    padding: 0;
}