@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* based on jamesgwyer.com (https://github.com/jamesgwyer/.com), used on most gwyer.* sites with a few alterations */

:root {
    --bg: white;
    --fg: black;
    --links: rebeccapurple;
    --code: #eee;
}

/*
@media (prefers-color-scheme: dark) {
    :root {
        --bg: black;
        --fg: white;
        --links: #99cc66;
        --code: #111;
    }
}
*/

* { scrollbar-color: var(--code) var(--bg) }

body {
    color: var(--fg);
    background-color: var(--bg);
    font-family:'Inter', sans-serif;
    font-size: 14px;
    font-weight: 300;
    margin: 0;
    min-height: 100%;
    overflow-wrap: break-word;
    line-height: 1.5;
}
  
header {
    padding: 2em 2em;
}

footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0 2em;
    margin-bottom: 1.5em;
}

main {
    padding: 1em 2em;
}

article {
    padding: 2em 0;
    max-width: 666px;
    margin: 0 auto;
}

.content-left {
    max-width: 333px;
    padding-right: 0;
    padding-bottom: 0;
}

pre {
    background-color: var(--code);
    color: var(--fg);
    display: block;
    padding: 1rem;
    overflow-x: auto;
    border-radius: 0.5rem;
}

.context { max-width: 444px; }

h1 { display: block; font-size: 1.6rem; margin-bottom: 0.4em; font-weight: bold; }
h2 { display: block; font-size: 1.3rem; margin-bottom: 1em; font-weight: bold; margin-top: 2em; }
h3 { display: block; font-size: 1.1rem; margin-bottom: 0.6em; font-weight: bold; }

p { margin-bottom: 1rem; font-weight: 300; }

hr {
    margin: 2rem 0;
    border-top-width: 1px;
    color: var(--fg);
    opacity: 0.25;
}

hr.hearts {
    text-align: center;
    border: 0;
    margin: 2rem 0;
    font-weight: 500;
  
    &:before { content: '♡ ' }
    &:after { content: attr(data-content) ' ♡' }
}

a { font-weight: 400; color: var(--links); text-decoration: none; }
a:hover { text-decoration: underline; }

a.menu { color: var(--fg); text-decoration: underline; }
a.menu:hover { color: var(--fg); text-decoration: none; }
a.bold { color: var(--fg); text-decoration: none; font-weight: 500; }
a.bold:hover { color: var(--fg); text-decoration: underline; }

nav a, a.faint { color: var(--fg); opacity: 0.5; /* margin-right: 0.5em; */ }
nav a:hover, a.faint:hover { text-decoration: none; opacity: 1; }

.subtitle, time { opacity: 0.5; font-weight: 300; }
  
.name, strong, b { font-weight: 500; }

summary { font-weight: 400; }