@font-face {
  font-family: 'Roboto';
  src: url('../../fonts/roboto.ttf');
}

/* Theme */
:root {
  --main-bg-color: #141414;
  --main-fg-color: #e1e1e1;
  --link-color: #58e487;
  --pagination-color: aliceblue; /* pagination links */
}

/* Bold text brighter than normal */
strong,
b {
  color: color-mix(in srgb, var(--main-fg-color) 60%, aliceblue);
  font-weight: bold;
}

html { scrollbar-color: var(--main-fg-color) var(--main-bg-color); }

body {
  background: var(--main-bg-color) center/cover no-repeat fixed;
  color: var(--main-fg-color);
  font-family: 'Roboto', 'sans-serif';
}


/* Containers */
nav,
footer,
#pagination,
main {
  border: none;
  background: transparent;
}

nav,
footer,
a { color: aliceblue; }

/* Pagination text vs links */
.pagectrl {
  color: var(--main-fg-color); /* plain text */
}

.pagectrl a {
  color: aliceblue;            /* links */
  text-decoration: none;
}

.pagectrl a:hover,
.pagectrl a:focus {
  opacity: 0.7;
}

/* Links */
a { color: var(--link-color); }
a:hover,
a:focus { opacity: 0.5; }

/* Headings */
h1, h2, h3, h4, h5, h6 { color: aliceblue; }

/* Lists */
ul li ul,
ol li ul { list-style-type: square; }

ul li ul li::marker,
ol li ul li::marker { color: var(--link-color); }

/* Tag links */
.tagList a {
  color: var(--main-fg-color);
  text-decoration: none;
}

.tagList a:hover,
.tagList a:focus {
  color: var(--link-color);
  opacity: 1; /* override global fade */
}

/* Latest post links on home */
#latest_posts a {
  color: var(--main-fg-color);
  text-decoration: none;
}

#latest_posts a:hover,
#latest_posts a:focus {
  color: var(--link-color);
  opacity: 1; /* override global fade */
}

/* Content */
blockquote {
  margin-left: 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--main-fg-color);
}

code {
  background-color: var(--main-fg-color);
  color: var(--main-bg-color);
  padding: 0.1rem;
}

pre:has(code) { background-color: var(--main-fg-color); }

footer a { color: aliceblue; }



/* Meta */
.lastupdate::after { content: " ▣ "; }

.commentbox,
#disqus_thread {
  border-left: 2px solid var(--main-fg-color);
  border-right: 2px solid var(--main-fg-color);
}

main { position: relative; }