:root
{
    --term-fg: #b5aba8;
    --term-bg: #2b2b2b;
    --term-black: #515151;
    --term-red: #cc6666;
    --term-green: #b5bd68;
    --term-yellow: #f0c674;
    --term-blue: #81a2be;
    --term-magenta: #b294bb;
    --term-cyan: #8abeb7;
	--term-white: #b5aba8;
}

[used-theme="light"] {
    --term-fg: #515151;
    --term-bg: #f3f3f3;
    --term-black: #515151;
    --term-red: #ff001e;
    --term-green: #5eaa0c;
    --term-yellow: #f29b00;
    --term-blue: #0098ca;
    --term-magenta: #d52ad2;
    --term-cyan: #00dad5;
    --term-white: #f3f3f3;
}

a[class*="theme-selector"] {
    color: var(--term-green);
}

html:not([used-theme]) .theme-selector-dark,
html[used-theme="dark"] .theme-selector-dark,
html[used-theme="light"] .theme-selector-light {
    display: none;
}

header, .icon-text {
    display: flex;
    flex-flow: row;
    align-items: center;
}

.icon-text {
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}

.icon-text > :first-child {
    margin-right: 0.3rem;
}

header {
    margin-top: 0rem;
    margin-bottom: 1rem;
}

header div {
    flex: 1;
}

header span {
    flex: 0.2;
}

.blog-title {
    margin-top: 0rem;
}

.ascii-art {
    font-size: 0.6rem;
    white-space: pre;
}

hr {
    width: 90%;
	color: var(--term-bg);
}

.nobr,
.icon-text p,
.icon-text span {
    white-space: nowrap;
}

.force-wrap p, .force-wrap {
    word-wrap: break-word;
}

.quote {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin: 1.2rem 0rem;
    gap: 1rem;
}

.quote p {
    margin-top: 0rem;
    margin-bottom: 0rem;
    color: var(--term-yellow);
}

.quote p:first-child{
    margin-left: auto;
    font-size: 2rem;
}

.quote p:last-child{
    margin-right: auto;
    font-size: 2rem;
}

.quote p:not(:first-child):not(:last-child) {
    font-style: italic;
}

.code-block,
.code-block-wrap {
    border-style: solid;
    border-color: var(--term-fg);
    border-width: 0.1rem;
    padding: 0.7rem;
}

.code-block {
    overflow-x: auto;
}

figure {
    margin-left: 0;
    margin-right: 0;
}

figcaption {
    text-align: center;
    color: var(--term-fg);
}

h1 {
    font-size: 2rem;
    margin-top: 2rem;
}

h2 {
    font-size: 1.5rem;
    margin-top: 1.5rem;
}

h3 {
    font-size: 1.2rem;
    margin-top: 1.2rem;
}

p {
    font-size: 1rem;
    margin-top: 0.8rem;
}

.code-block p,
.code-block-wrap p {
    margin: 0;
}

.code-block p {
    white-space: pre;
}

body {
    background-color: var(--term-bg);
}

p, h1, h2, h3 {
    color: var(--term-fg);
    margin-bottom: 0.8rem;
}

h2.index-title {
    margin-top: 0.8rem;
}

img
{
	max-width: 100%;
	max-height: 100%;
	border-style: solid;
    border-color: var(--term-bg);
    border-width: 0.1rem;
    width: 100%;
}

.svg-icon {
	max-width: 1.5rem;
	max-height: 1.5rem;
	border: none;
    width: 1.5rem;
	height: 1.5rem;
}

a.dont-bother {
	color: var(--term-fg);
	font-weight: normal;
}

a.dont-bother:hover {
	text-decoration: none; 
}

strong {
    color: var(--term-yellow);
}

a {
	font-weight: bold;
	color: var(--term-blue);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a.posts-listing-link:hover :is(h2, h3)
{
	text-decoration: underline;
}

@media (min-width: 768px) {
    main {
        border-width: 0.15rem;
        border-color: var(--term-bg);
        border-style: none solid none solid;
    }
}

main :is(h1, h2, h3) {
    color: var(--term-yellow);
    margin-top: 2rem;
}

.other_post {
    display: flex;
    flex-flow: row;
    align-items: center;
    margin: 2rem 0rem;
    gap: 1rem;
}

.other_post div {
    flex: 1;
}

.other_post img {
    max-width: 100%;
    max-height: 100%;
}

.first-element {
    margin-top: 0;
}

.last-element {
    margin-bottom: 0;
}

div.huge-vertical-spacer-at-the-bottom {
    height: 10rem;
}

@media (max-width: 767px) {
    div.sidebar-spacing {
        height: 10rem;
    }
}

div.blog-content-spacer {
    height: 2rem;
}

/* Extra "terminal" colors */
.fg {
	color: var(--term-fg);
}

.bg {
    color: var(--term-bg);
}

.black {
	color: var(--term-black);
}

.red {
	color: var(--term-red);
}

.green {
	color: var(--term-green);
}

.yellow {
	color: var(--term-yellow);
}

.blue {
	color: var(--term-blue);
}

.magenta {
	color: var(--term-magenta);
}

.cyan {
	color: var(--term-cyan);
}

.white {
	color: var(--term-white);
}