/* Custom Theme Implementation */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Fira+Sans+Condensed:wght@400;600&display=swap');
@import 'variables.css';
@import 'layout.css';

/* General styling */
html, body {
  font-family: var(--font-text-theme), monospace;
  font-weight: 300;
  background-color: var(--background-primary);
  color: var(--text-normal);
  line-height: var(--line-height-normal);
}

body {
  text-shadow: var(--text-shadow);
}

p {
  font-weight: 300;
}

.site-description {
  text-align: left;

}

/* Links */
a, a:visited {
  color: var(--highlight-color);
  text-decoration: var(--link-decoration);
  text-shadow: var(--text-shadow);
}

a:hover {
  text-decoration: underline;
}

a {
  font-style: italic;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--h1-color);
  font-size: var(--font-size);
  font-family: var(--font-interface-theme), monospace;
  font-style: italic;
  font-weight: 400;
}

/* Code and pre formatting */
code, pre {
  font-family: var(--font-monospace-theme), monospace;
  background-color: var(--code-background);
  color: var(--code-normal);
  font-size: 95%;
}

pre {
  border: 1px solid var(--background-modifier-border);
}

pre code {
  font-family: var(--font-monospace-theme), monospace;
  font-size: 80%;
  background: transparent;
  border: none;
  color: var(--code-normal);
}

:not(pre) > code {
  border: 1px solid var(--background-modifier-border);
}

/* Selection color */
::selection {
  background-color: var(--text-selection);
  color: var(--text-normal);
}

.post-title {
  text-align: right;
}



article {
  text-align: left;
}

article code {
  font-family: var(--font-monospace-theme), monospace;
  width: 100%;
  font-size: 80%;
}

article .block {
  background-color: var(--background-primary-alt);
}

/* Site header and footer styling */
.site-header {
  background-color: var(--background-secondary);
}

.site-title, .site-title:visited {
  color: var(--h1-color);
  font-family: var(--font-interface-theme), monospace;
}

.site-nav {
  background-color: var(--background-primary);
  border: none;
}

.site-nav .page-link {
  color: var(--text-normal);
}

.site-footer {
  background-color: var(--background-secondary);
  color: var(--text-muted);
}

.footer-col-wrapper, .footer-col, .contact-list, .social-media-list {
  color: var(--text-muted);
}

/* Post styling */
.post-meta {
  color: var(--text-muted);
  font-family: var(--font-text-theme), monospace;
}

main ul li span {
  color: var(--text-muted);
  margin-right: 0.5rem;
}

/* List styling */
li::marker {
  color: var(--list-marker-color);
}

/* Horizontal rule */
hr {
  border-color: var(--hr-color);
}

/* SVG icons */
.svg-icon {
  fill: var(--text-muted);
}

/* Menu icon in mobile view */
.site-nav .menu-icon > svg {
  fill: var(--text-normal);
}

/* Table styling */
table, th, td {
  color: var(--text-normal);
}

table th {
  background-color: var(--code-background);
}

table tr:nth-child(even) {
  background-color: var(--background-secondary-alt);
}

/* Page content */
.page-content {
  background-color: var(--background-primary);
}

/* Bold text */
strong, b {
  color: var(--bold-color);
}


/* Tag styling */
.tag-link, .tag-link:visited {
  border: 1px solid var(--background-modifier-border);
  background-color: var(--background-primary-alt);
  color: var(--text-normal);
  text-decoration: none;
}

.tag-link:hover {
  background-color: var(--background-modifier-hover);
  text-decoration: none;
}

/* Button styling */
button {
  background-color: var(--background-primary-alt);
  color: var(--fg-color);
  border: 1px solid var(--background-modifier-border);
  font-family: var(--font-interface-theme), monospace;
}

button:hover {
  background-color: var(--background-modifier-hover);
}

button:active {
  background-color: var(--background-modifier-active);
}

/* Highlight.js Theme using site variables */
.hljs { background: transparent; padding: 0; }

.hljs-comment,
.hljs-quote,
.hljs-doctag,
.hljs-meta {
  color: var(--code-comment);
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-tag,
.hljs-name {
  color: var(--h1-color);
  font-weight: var(--h3-weight);
}

.hljs-attribute,
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-property {
  color: var(--text-muted);
}

.hljs-string,
.hljs-regexp,
.hljs-meta-string {
  color: var(--h3-color);
}

.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-built_in,
.hljs-number {
  color: var(--h2-color);
}

/* Force literal to be blue */
.hljs-literal {
  color: var(--h3-color);
}

/* Force title to be maroon and bold */
.hljs-title,
.hljs-class,
.hljs-title.class,
.hljs-title.class.inherited,
.hljs-title.function {
  color: var(--h1-color);
  font-weight: var(--h2-weight);
}

.hljs-section,
.hljs-selector-id,
.hljs-type {
  color: var(--h2-color);
  font-weight: var(--h2-weight);
}

.hljs-selector-class {
  color: var(--h3-color);
}

.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-formula {
  background-color: var(--background-primary-alt);
  padding: 0.1em 0.2em;
  border-radius: var(--border-radius);
}

.hljs-deletion {
  color: var(--text-muted);
  background-color: var(--background-modifier-hover);
}

.hljs-addition {
  color: var(--h2-color);
  background-color: var(--background-primary-alt);
}

.hljs-operator,
.hljs-punctuation {
  color: var(--text-normal);
}