/* CUSTOM FONTS */
/* @font-face {
	font-family: "Perfect DOS VGA 437 Win";
	src: url(/static/fonts/perfect-dos-vga-437-win.ttf);
} */

@font-face {
	font-family: "Video Terminal Screen";
	src: url(/static/fonts/vtsr.ttf);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif /*rtl:Amiri, Georgia, "Times New Roman", serif*/;
}

div.navbar .navbar-brand {
	font-family: "Video Terminal Screen", "Courier New", serif;
	font-size: 2.25rem;
}

.font-brand {
	font-family: "Video Terminal Screen", "Courier New", serif;
}

/* FOR STICKY FOOTER */
html,
body {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
}

/* PAGE CONTENT / ARTICLE */
article .table {
	width: unset !important;
}

article * {
	/* make everything fit inside the article */
	max-width: 100%;
}

article img,
article video {
	/* max height for portrait images, videos */
	max-height: 300px;
}

article div.image {
	display: inline-block;
	text-align: center;
}

article div.image > small {
	display: block;
	font-style: italic;
}

article > p:first-of-type {
	font-size: 1.25rem;
	font-weight: 300;
}

article blockquote {
	border-left: 3px var(--bs-border-style) var(--bs-border-color);
}

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
	border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
	padding-bottom: 0.5rem !important;
}

article h2::before,
article h3::before,
article h4::before {
	font-family: "Video Terminal Screen";
	font-size: 2.5rem;
	padding-right: 0.5rem;
	color: #50FA7B;
}

article h2::before {
	content: "#";
}

article h3::before {
	content: "##";
}

article h4::before {
	content: "###";
}

article .heading-link {
	display: none;
}

article h1:hover .heading-link,
article h2:hover .heading-link,
article h3:hover .heading-link,
article h4:hover .heading-link,
article h5:hover .heading-link,
article h6:hover .heading-link {
	display: inline;
}

div.highlight {
	margin-bottom: 1rem;
	background-color: var(--bs-dark-bg-subtle);
}

div.highlight pre {
	margin-bottom: 0;
}

/* ICONS */

.bi {
	fill: currentColor;
}

.icon-link > .bi {
	height: unset !important;
}

[data-bs-theme="dark"] a[href^="http"]::after,
[data-bs-theme="dark"] a[href^="https://"]::after
{
	filter: invert(1);
}

/* HEADER / NAVIGATION BAR */
/* navbar top-level dropdown - underline on focus/hover */
nav.navbar .dropdown:hover > .nav-link,
nav.navbar .dropdown:focus-within > .nav-link {
	border-bottom-color: currentcolor;
}

/* navbar dropdown - open on focus/hover */
nav.navbar .dropdown:focus-within > .dropdown-menu,
nav.navbar .dropdown:focus > .dropdown-menu {
	display: block;
}
@media (min-width: 768px) {
	nav.navbar .dropdown:hover > .dropdown-menu {
		display: block;
	}

	/* move submenus to right */
	nav.navbar .nav-item .dropdown:focus-within > .dropdown-menu,
	nav.navbar .nav-item .dropdown:hover > .dropdown-menu {
		top: 0;
		left: 100%;
	}
}

/* navbar dropdown - colorize item on focus/hover */
nav.navbar .dropdown:focus-within > .dropdown-item {
	color: var(--bs-dropdown-link-hover-color);
	background-color: var(--bs-dropdown-link-hover-bg);
}
@media (min-width: 768px) {
	nav.navbar .dropdown:hover > .dropdown-item {
		color: var(--bs-dropdown-link-hover-color);
		background-color: var(--bs-dropdown-link-hover-bg);
	}
}

div.navbar > div {
	flex: 1;
}

div.navbar .input-group {
	max-width: 75%;
}
@media (min-width: 992px) {
	div.navbar .input-group {
		max-width: 300px;
	}
}

nav.navbar .input-group {
	max-width: 300px;
	margin: 0 auto;
}

/* BLOG SIDEBAR - CONTENTS */
.page-contents span {
	font-family: "Video Terminal Screen";
	padding-right: 0.5rem;
	color: #50FA7B;
}

details.page-contents summary {
	color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
}

details.page-contents summary:hover {
	--bs-link-color-rgb: var(--bs-link-hover-color-rgb);
}

/* BLOG SIDEBAR - TAG CLOUD */
/* https://dev.to/alvaromontoro/create-a-tag-cloud-with-html-and-css-1e90 */
.tag-cloud ol {
	line-height: 2.5rem;
}

.tag-cloud li {
	text-align: center;
}

.tag-cloud a {
	padding: 0.125rem 0.25rem;
	position: relative;
	font-size: calc(var(--size) * 0.15rem + 0.75rem);
	opacity: calc((15 - (9 - var(--size))) / 15);
}

/* PAGE LEAD */
div.page-lead {
	min-height: 200px;
}

@media (min-width: 768px) {
	div.page-lead {
		min-height: 300px;
	}
}

@media (min-width: 992px) {
	div.page-lead {
		min-height: 400px;
	}
}

div.page-lead img {
	width: 100%;
}

div.page-lead > div {
	background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
}

/* MISC STYLES */
.text-decoration-hover {
	text-decoration: none;
}
.text-decoration-hover:hover {
	text-decoration: underline;
}

/* MONOSPACE CODE STYLES FROM GITHUB */
code {
	padding: 0.2em 0.4em;
	margin: 0;
	font-size: 85%;
	white-space: break-spaces;
	background-color: var(--bs-secondary-bg);
	border-radius: 6px;
}

pre code {
	padding: unset;
	margin: unset;
	font-size: unset;
	white-space: unset;
	background-color: unset;
	border-radius: unset;
}