:root {
	/* syntax highlighting colors */
	--ayu-bg: #1F2430;
	--ayu-fg: #707A8C;
	--ayu-yellow: #ffcd66;
	--ayu-cyan: #5ccfe6;
	--ayu-green: #d5ff80;
	--ayu-orange: #ffa659;
	--ayu-grey: #6e7c8f;
	--ayu-red: #f28779;
	--ayu-purple: #dfbfff;
	--light-yellow: #e5c07b;
	--dark-yellow: #d19a66;
	--blue: #61afef;
	--cyan: #56b6c2;
	--light-red: #e06c75;
	--dark-red: #be5046;
	--comment-gray: #5c6370;
	--magenta: #c678dd;
}


/* index styles */
.title {
	color: var(--accent-text);
	filter: url(#eod);
	font-style: oblique;
}

.posts {
	font-style: oblique -15deg;
	a:hover {
		font-style: normal;
	}
}

.date {
	flex-shrink: 0;
	font-size: smaller;
	letter-spacing: 0.1em;
	color: var(--dark-text);
}

.post {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1em;
}



/* regular page styles */
.content {
	max-width: 40ch;
	margin: auto;
}

/* blog post styles */
#prev-next {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 40px;
}

figure {
	align-self: center;
	text-align: center;
	font-style: italic;
}

.post-content {
	display: flex;
	flex-direction: column;
}

.date {
	font-size: smaller;
	letter-spacing: 0.1em;
	color: var(--dark-text);
}

main {
    .title {
        filter: url(#eor);
    }
    .post {
        	h1, h2, h3, h4 {
    		font-style: oblique;
    	}

    	h1 {
    		filter: url(#eor);
    	}

    	h2 {
    		filter: url(#eor);
    		color: var(--surreal-red);
    		font-size: 200%;
    	}

    	h3 {
    		filter: url(#eor);
    		color: var(--gentian-blue);
    		font-size: 150%;
    	}

    	h4 {
    		filter: url(#eor);
    		color: var(--surreal-red);
    		font-size: 125%;
    	}
    }
}

/* syntax highlighting styles */

pre {
  background-color: var(--ayu-bg);
  border: 1px solid var(--ayu-fg);
  padding: 10px 5px;
  overflow-x: auto;
  width: 100%;
}

code.sh {
    color: lightgrey;
}

code.c {
    color: var(--primary-text);
}

code.c .type {
    color: var(--ayu-green);
}

code.c .function {
    color: var(--ayu-yellow);
}

code.c .operator {
    color: var(--ayu-orange);
}

code.c .comment {
    color: var(--ayu-grey);
}

code.zig {
    color: var(--primary-text);
}

code.zig .function, .function_builtin, .function_call {
    color: var(--ayu-yellow);
}

code.zig .operator{
    color: var(--ayu-red);
}

code.zig .keyword, .keyword_modifier, .keyword_function, .type_builtin  {
    color: var(--ayu-orange);
}

code.zig .string {
    color: var(--ayu-green);
}

code.zig .variable_parameter, .number {
    color: var(--ayu-purple);
}

code.zig .comment {
    color: var(--ayu-grey);
}