/* Root | Font/Text */

:root {
--font-main: system-ui;
--font-secondary: system-ui;
--h1-size: 2.0rem;
--h2-size: 1.6rem;
--text-size: 1rem;
--footer-size: .8rem;
--text-indent: 10px;
}

/* Root | Colors */

:root {
--bg-color: #121212;
--link-color: #00ff00;
--link-hover: #19b5e7;
--color: #DCDCDC;
--color2: #00fefc30;
}

/* Main Content */

body {
font-family: var(--font-secondary);
font-size: var(--text-size);
max-width: 650px;
text-align: left;
word-wrap: break-word;
overflow-wrap: break-word;
padding-top: 10px;
padding-bottom: 10px;
background: var(--bg-color);
}

main {
line-height: 1.5;
}

header, main, footer {
color: var(--color);
padding: 10px;
margin: 5px;
border: 1px solid var(--color);
}

/* Nav/Links */

nav a {
margin-right: 5px;
}

nav a:hover {
color: var(--link-hover);
}

a {
color: var(--link-color);
cursor: pointer;
text-decoration: none;
}

a:hover {
color: var(--link-hover);
}

a:visited {
color: purple;
}

/* Text */

h1, h2 {
font-family: var(--font-main);
color: var(--color);
text-transform: uppercase;
}

h1 {
font-size: var(--h1-size);
}

h2 {
font-size: var(--h2-size);
}

/* Code */

code {
font-family: var(--font-secondary);
padding: 2px;
border-radius: 1px;
}

.highlight, .code {
padding: 1px 15px;
background-color: var(--color2);
color: var(--color);
border-radius: 1px;
margin-block-start: 1em;
margin-block-end: 1em;
overflow-x: auto;
}

/* Blog Post List */

time:before {
content: "Published:";
}

.blog-posts time:before {
content: "Pub:";
}

.blog-posts time {
float: right;
}

.blog-posts li:hover {
background: var(--color2);
}

ul.blog-posts {
list-style-type: none;
padding: unset;
}

ul.blog-posts li {
display: flex;
flex-direction: row-reverse;
white-space: nowrap;

&::before {
border-bottom: 0.125rem solid var(--color);
content: "";
flex-grow: 1;
height: 0.8em;
order: 0;
margin: 0.125em 1em 0;
}

span {
order: -1;
}

a {
overflow: hidden;
text-overflow: ellipsis;
}
}

/* Tags */

.tags {
border-top: 1px solid var(--color);
padding-top: 10px;
}

.tags:before {
content: "Tags:";
}

.tags a {
font-size: var(--text-size);
color: var(--link-color);
}

.tags a:hover {
color: var(--link-hover);
background: var(--bg-hover);
}

/* Upvote Button */

.upvote-count,
.upvote-button svg {
display: none;
}

.upvote-button {
background: var(--color2);
color: var(--color);
}

.upvote-button:hover {
background: var(--bg-color);
color: var(--link-hover);
}

.upvote-button:after {
content: 'Like this post?';
font-size: var(--text-size);
}

.upvote-button:disabled::after {
content: 'Liked!';
}

/* Title */

.title:hover {
text-decoration: none;
}

.title h1 {
font-size: 1.5em;
}

/* Footer */

footer {
text-indent: var(--text-indent);
}

/* Misc Code */

button {
margin: 0;
cursor: pointer;
}

time {
font-family: var(--font-secondary);
font-style: normal;
font-size: 15px;
}

table {
width: 100%;
}

blockquote {
border-left: 1px solid var(--color);
color: var(--color);
padding-left: 20px;
font-style: italic;
}

.inline {
width: auto !important;
}

::selection {
color: var(--color);
background: var(--color2);
}