/* Fonts */
@font-face {
	font-family: 'CommitMono Nerd Font';
	font-weight: normal;
	src:
        url('../fonts/CommitMonoNerdFont-Regular.otf')
        format('opentype');
}

@font-face {
	font-family: 'CommitMono Nerd Font';
	font-weight: bold;
	src:
        url('../fonts/CommitMonoNerdFont-Bold.otf')
        format('opentype');
}

@font-face {
	font-family: 'CommitMono Nerd Font';
	font-weight: normal;
	font-style: italic;
	src:
        url('../fonts/CommitMonoNerdFont-Italic.otf')
        format('opentype');
}

@font-face {
	font-family: 'CommitMono Nerd Font';
	font-weight: bold;
	font-style: italic;
	src:
        url('../fonts/CommitMonoNerdFont-BoldItalic.otf')
        format('opentype');
}

/* Root Styles and Variables */
:root {
	font-family: 'CommitMono Nerd Font';
    --bg-color: #F9F5D7;
    --text-primary: #282828;
    --text-secondary: #504945;
    --text-header: #D79921;
    --text-heading: #CC241D;
    --accent-blue: #458588;
    --accent-gray: #928374;
}

/* Dark Mode Variable overrides */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1D2021;
        --text-primary: #FBF1C7;
        --text-secondary: #D5C4A1;
    }
}

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

a:hover {
    color: var(--accent-blue)
}

.kg-width-wide {}

.kg-width-full {}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    min-height: 100vh;
    margin: 0;
}

h1,h2,h3,h4,h5,h6 {
	font-weight: bold;
}

header {
    padding: 2rem 6rem;

    .site-title {
        color: var(--text-header);
        font-size: 1rem;
        text-decoration: none;
    }

    ul.nav {
        float: right;
        padding: 0;
        margin: 0;
        font-size: 1rem;
        li {
            display: inline-block;
            list-style: none;
        }
        a {
            color: var(--text-secondary);
            text-decoration: none;
            padding: 0.5rem;

        }

        a:hover {
            color: var(--accent-blue);
        }
    }
}

main {
    padding: 1rem 6rem;
}

.latest-post {
    cursor: pointer;
    .latest-post-title {
        font-size: 1.5rem;
        font-weight: bold;
        padding: 0;
        margin: 0;
        a {
            text-decoration: none;
        }
    }

    .latest-post-meta {
        color: var(--text-secondary);
    }
    .latest-post-excerpt {
        color: var(--text-secondary);
    }
}

.latest-post:hover > .latest-post-title {
    color: var(--accent-blue);
}

.post-index {
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        li {
            padding: 0.5rem 0;
        }
    }
}

.home-template {
    h2,h3,h4,h5,h6 {
        color: var(--text-secondary);
        font-size: 1rem;
        font-weight: normal;
    }

    section {
        padding: 1rem 0;
    }
}

a.post-index-title {
    color: var(--text-primary);
}

/* Post and Page Styling */
article {
    .post-date {
        color: var(--text-secondary);
    }

    hr {
        border: none;
        height: 1px;
        background-color: var(--accent-gray);
        margin: 1rem 0;
    }

    h2,h3,h4,h5,h6 {
        font-weight: bold;
        color: var(--text-heading);
    }

    h1::before {
        font-size: 2rem;
    }

    h2::before {
        font-size: 1.5rem;
        content: "## "
    }

    h3::before {
        font-size: 1.3rem;
        content: "### "
    }

    h4::before {
        content: "#### "
    }

    h5::before {
        content: "##### "
    }

    h6::before {
        content: "###### "
    }
}