:root {
    /* Colors */
    /* --color-primary: #F9B4ED;
    --color-secondary: #B1A8F0;
    --color-background: #070E36;
    --color-background-secondary: #0F1C4D;
    --color-text: #F9F1F7; */

    /* Moonfly terminal color scheme: https://github.com/bluz71/vim-moonfly-colors */
    --color-background: #080808;
    --color-foreground: #bdbdbd;
    --color-black: #323437;
    --color-red: #ff5d5d;
    --color-green: #8cc85f;
    --color-yellow: #e3c78a;
    --color-blue: #80a0ff;
    --color-purple: #cf87e8;
    --color-cyan: #79dac8;
    --color-white: #c6c6c6;

    /* Fonts */
    --font-family: Helvetica, sans-serif;
}

/* CSS reset to remove browser defaults for consistent styling */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-size: 16px;
    background: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-family);
    line-height: 1.5;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    padding-top: 0.8em;                     /* Adjust this padding-top for space above headings */
    color: var(--color-blue);
}

/* Use a modular scale of about 1.25 */
h1 { font-size: 3em; padding-top: 0.3em; }  /* Overwrite h1 padding-top to make it line up with top of nav bar */
h2 { font-size: 2.5em; }
h3 { font-size: 2em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.25em; }
h6 { font-size: 1em; }

p { 
    font-size: 1.125em;
    margin-top: 1em;
}

.container {
    display: flex;
    max-width: 50rem;
    margin: 1em auto 3em;
    gap: 3em;
}

nav {
    flex: 1;
    text-align: right;
}

/* Remove list styling from certain elements for cleaner look */
nav ul {
    list-style: none;
    padding-left: 0;
}
nav li, .post-list, .project-list {
    list-style: none;
}

main {
    flex: 4;
}

ul, ol {
    list-style-position: inside;
}

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

a:visited {
    color: var(--color-purple);
    text-decoration: underline;
    text-decoration-style: dashed;
}

/* Set it so visited links on the navigation bar don't change color */
.nav-item:visited {
    color: var(--color-blue);
    text-decoration: underline;
    text-decoration-style: dashed;
}

/* Hover styles for links and nav items */
a:hover, .nav-item:hover {
    color: var(--color-background);
    background-color: var(--color-blue);
}

/* Ensure nav item hover overrides visited state */
.nav-item:visited:hover {
    color: var(--color-background);
    background-color: var(--color-blue);
}

.site-name {
    line-height: 1.2;
    color: var(--color-foreground);
}

.site-name a {
    color: var(--color-foreground);
    text-decoration-style: solid;
}

.site-name a:hover {
    color: var(--color-background);
    background-color: var(--color-foreground);
    text-decoration-style: solid;
}

.post-date {
    color: var(--color-foreground);
    opacity: 0.7;
    font-size: 0.9em;
}