vodoraslo.xyz/public/style.css

/* @font-face {
	font-family: "FiraCode";
	src: url("/fonts/FiraCode-VF.woff") format('woff');
  } */


:root {
	--bg: #141414;
	--fg: rgb(232, 228, 228);
	--links: #5da0f2;
	--muted_text: rgb(179, 182, 186);
	--h1: rgb(167, 83, 23);
	--h2: rgb(185, 97, 35);
	--h3: rgb(196, 110, 49);
	--h4: rgb(216, 126, 61);
	--h5: rgb(235, 139, 70);
	--h6: rgb(244, 156, 93);
	--strong: #FD6A02;
	--hover-link: yellow;
	--code-background: #282c34;
	--code-fg: #ebf1f5;
	/* --bodyImg: 80%; */
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #fafafa;
		--fg: #2f343f;
		--links: #4084d6;
		--muted_text: rgb(93, 93, 99);
		--h1: rgb(167, 83, 23);
		--h2: rgb(185, 97, 35);
		--h3: rgb(196, 110, 49);
		--h4: rgb(216, 126, 61);
		--h5: rgb(235, 139, 70);
		--h6: rgb(244, 156, 93);
		--strong: #FD6A02;
		--hover-link: rgb(217, 144, 8);
		--code-background: #282c34;
		--code-fg: #ebf1f5;
		/* --bodyImg: 100%; */
	}
}

html,
body {
	padding: 0;
	margin: 0;
}

/* .main-background-image{
	background: url(/img/cat.jpg); */
/* background-image: url(/img/cat.jpg); */
/* filter: brightness(var(--bodyImg)); */
/* } */

body {
	margin: 0%;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	/* 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif */
	/* font-family: 'FiraCode', sans-serif; */
	background: var(--bg);
	/* color: rgb(143, 185, 58) ; */
	color: var(--fg);
}

main {
	max-width: 800px;
	margin: auto;
	background-color: var(--bg);
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}

img {
	max-width: 100%;
}

header h1 {
	text-align: center;
}

footer {
	text-align: center;
	clear: both;
	background-color: var(--bg);
	max-width: 800px;
	margin: auto;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
}

/* For TAGLIST.HTML */
.taglist {
	text-align: center;
	clear: both;
	padding-top: 0.5em
}

/* For NEXTPREV.HTML */
#nextprev {
	/* The container for both the previous and next articles. */
	margin-top: 15px;
}

#prevart {
	float: left;
	text-align: left;
}

#nextart {
	float: right;
	text-align: right;
}

#nextart,
#prevart {
	max-width: 33%;
}

a {
	text-decoration: none;
	color: var(--links);
}

/* Globally */

/* Each state */

a:visited {
	text-decoration: none;
	color: var(--links);
}

a:hover {
	text-decoration: none;
	color: var(--links);
}

/* a:focus {
	text-decoration: none;
	color: yellow;
} */

a:hover,
a:active {
	text-decoration: none;
	color: var(--hover-link);
}

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

h1 {
	color: var(--strong);
}

h2 {
	color: var(--strong);
}

h3 {
	color: var(--strong);
}

h4 {
	color: var(--strong);
}

h5 {
	color: var(--strong);
}

h6 {
	color: var(--strong);
}

pre {
	background: #282c34;
	color: white;
	border: 1px solid var(--strong);
	border-radius: 15px;
	padding: 1em;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	max-width: 800px;
	margin: auto;
	font-family: 'FiraCode';
}

.spanForHeader {
	color: rgba(0, 255, 255, 0);
}

.spanForHeader:hover {
	color: var(--links);
}


.tenRecentPosts li {
	padding-top: 10px;
}

.white_span {
	color: var(--fg);
}


.white_link a {
	color: var(--fg);
}

.muted_text {
	color: var(--muted_text);
}

article p {
	line-height: 1.4em;
}

ul {
	line-height: 1.3em;
}

.footnotes {
	line-height: 0px;
}

ol {
	line-height: 1.5em;
}

/* ol li {
	margin-top: 1em;
} */

ol li::marker {
	color: var(--strong);
}

ul li::marker {
	color: var(--strong)
}

h1:hover .anchor,
h2:hover .anchor,
h3:hover .anchor,
h4:hover .anchor,
h5:hover .anchor,
h6:hover .anchor {
	display: inline-flex;
	color: var(--links);
	margin-inline-start: 8px;
	font-weight: 500;
	user-select: none;
}

.post-content a {
	box-shadow: 0 1px 0;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.category-links {
	font-size: 1.3em;
}

.index-links a,
.tenRecentPosts a,
.footnote-ref {
	text-decoration: none;
	box-shadow: none;
}

.post-content blockquote {
	margin: 20px 0;
	padding: 0 14px;
	border-inline-start: 3px solid var(--fg);
}

ul li {
	padding-top: 0.1em;
}

.rssSvg {
	padding-top: 0.5em;
}

p code,
li code {
	background: var(--code-background);
	color: var(--code-fg);
	padding: 0.1rem 0.2rem;
}

.indexImage {
	margin: auto;
	display: inline-block;
	max-width: 25%;
	width: 35%;
	min-width: 275px;
}

.indexImage img {
	max-width: 70%;
}


.indexImage figcaption {
	padding-top: 0.5em;
	font-size: 1.05em;
}


#tagcloud {
	clear: both;
	padding: 0;
	border-radius: 10px;
	text-align: center;
	margin: 0 auto;
	border: solid 1px;
	border-style: dashed;
	list-style: none;
}

#tagcloud li {
	display: inline-block;
}

#tagcloud a {
	display: block;
	width: auto;
	border-radius: 10px;
	padding: .25em;
	margin: 2px;
}

#tagcloud a:hover {
	box-shadow: 2px 2px 2px 2px black;
}


/* figcaption {
	text-align: center ;
	display: block ;
	font-style: italic ;
}
 */

.removeLineHeight p {
	line-height: 0.5em;
}

.breadcrumbs {
	font-size: smaller;
}

article {
	padding: 0 0.5em;
	padding: 2%;
	/* min-height: 77.02vh; */
}

.footnotes ol li::marker {
	color: var(--fg);
}

.footnotes ul li::marker {
	color: var(--fg)
}

.highlight-title {
	background: #282c34;
	color: white;
	/* border: 1px solid var(--strong); */
	border-radius: 20px;
	padding: .55em;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	max-width: 800px;
	margin: auto;
	font-family: 'FiraCode';
	font-weight: 600;
}

summary::marker {
	color: var(--strong);
}

details p {
	padding-left: 2em;
}

#tag_blog:before {
	content: "📜";
}

#tag_updates:before {
	content: "🆕";
}

#tag_library:before {
	content: "📚";
}

#tag_hackbook:before {
	content: "📖";
}

#tag_ted\ kaczynski:before {
	content: "💣";
}

#tag_ted-kaczynski:before {
	content: "💣";
}

#tag_Blog:before {
	content: "📜";
}

#tag_Updates:before {
	content: "🆕";
}

#tag_Library:before {
	content: "📚";
}

#tag_Hackbook:before {
	content: "📖";
}

#tag_Ted\ Kaczynski:before {
	content: "💣";
}

#tag_Ted-Kaczynski:before {
	content: "💣";
}

#tag_BLOG:before {
	content: "📜";
}

#tag_UPDATES:before {
	content: "🆕";
}

#tag_Library:before {
	content: "📚";
}

#tag_HACKBOOK:before {
	content: "📖";
}

#tag_TED\ KACZYNSKI:before {
	content: "💣";
}

#tag_TED-KACZYNSKI:before {
	content: "💣";
}

#tag_personal:before {
	content: "😎";
}

#tag_Personal:before {
	content: "😎";
}

/* https://learn.netlify.app/en/shortcodes/notice/ */
div.notices {
	margin: 2rem 0;
	position: relative;
}

div.notices p {
	padding: 15px;
	display: block;
	font-size: 1rem;
	margin-top: 0rem;
	margin-bottom: 0rem;
	color: #141414;
	border-radius: 15px;
}

div.notices p:first-child:before {
	position: absolute;
	top: 2px;
	color: #fff;
	/* font-family: "Font Awesome 5 Free"; */
	font-weight: 900;
	content: "!";
	left: 10px;
}

div.notices p:first-child:after {
	position: absolute;
	top: 2px;
	color: #fff;
	left: 2rem;
}

div.notices.info p {
	border-top: 30px solid #F0B37E;
	background: #FFF2DB;
}

div.notices.info p:first-child:after {
	content: 'Info';
}

div.notices.warning p {
	border-top: 30px solid rgba(217, 83, 79, 0.8);
	background: #FAE2E2;
}

div.notices.warning p:first-child:after {
	content: 'Warning';
}

div.notices.warning p:first-child:before {
	content: "!!!";
}

div.notices.note p {
	border-top: 30px solid #6AB0DE;
	background: #E7F2FA;
}

div.notices.note p:first-child:after {
	content: 'Note';
}

div.notices.tip p {
	border-top: 30px solid rgba(92, 184, 92, 0.8);
	background: #E6F9E6;
}

div.notices.tip p:first-child:after {
	content: 'Tip';
}