/* DYNIX STYLE 2025-03-03 */
@charset "utf-8";

/* ----- import fonts css ----- */
@import url('/styles/fonts/fontawesome/css/fontawesome.css');
@import url('/styles/fonts/fontawesome/css/brands.css');
@import url('/styles/fonts/fontawesome/css/solid.css');

/* Phosphor-icons */
/* Phosphor style.css: leave only woff2 enabled. */
@import url('/styles/fonts/phosphor-icons/regular/style.css');
/* Phosphor is not line centered as well as FA. */
/* NOT USED. phosphor wrapper sets postion:relative and display:inline-block, while interior i sets position:absolute and top property for location */
/*i:has(> i.ph),
i:has(> i.ph-thin),
i:has(> i.ph-light),
i:has(> i.ph-bold),
i:has(> i.ph-fill),
i:has(> i.ph-duotone) {
	position: relative;
    display: inline-block;
}*/

/* main phosphor icon elements */
i.ph,
i.ph-thin,
i.ph-light,
i.ph-bold,
i.ph-fill,
i.ph-duotone {
	padding: 0em 0.3em;
	font-size: 1.3em;
	position: relative; /*  */
	top: 0.16em; /* Adjust to control vertical position */
    /*display: inline-block;*/  /* --if other formatting isn't working, enable inline-block or inline-- */
}

/* font-face must go after import*/
@font-face {
	font-family: JetBrainsMono-VariableFont;
	src: url(/styles/fonts/JetBrainsMono-VariableFont_wght.ttf);
}


/* ----- variables ----- */
/* value is called forth  with "var(--maintextcolor)" */
:root {
	--maintextcolor: LimeGreen; /* LimeGreen is #32CD32 */
	--maintextshadowglow: Green 0px 0 0.7em; /* Green is #008000 */
	--linkcolor: Chartreuse;
	--hovercolor: lime; /*  */
	--uicolor: limegreen;
	--codebkgcolor: #202020e8; /*#202020e8*/
}


body {
	max-width: 800px;
	margin: 0 auto; /* Center the content */
	margin-bottom: 15px;
	padding: 0px 0.7em /* 0px 15px */; /* Gives a little side padding on filled screens */
	/* crt effects will darken background color */
	/* background: darkgreen; */
	background-color: black;
	background: radial-gradient(
        farthest-corner at 50% 20%,
        #111614 0%,
        #010f07 100%
      );
	background-attachment: fixed; /* fixed=background does not repeat */
	background-size: cover; /* cover=spaces not covered by background are filled with background-color */
	/* https://www.cssfontstack.com */
	font-family: 'Courier New', monospace; /* Websafe fonts: 'Lucida Console', 'Consolas', 'Courier New', 'Helvetica', monospace */
	font-size: 12pt;
	color: var(--maintextcolor);
	text-shadow: var(--maintextshadowglow);
}

/* Seems like it needs to go after body's max-width */
@media only screen and (max-width: 750px) { /* Adjust the maximum width for phones */
    body {
        max-width: 100%; /* Set the content width to 100% for phones */
    }
}

/* scanlines 2024-02-05 simpler scan lines */
/* https://aleclownes.com/2017/02/01/crt-display.html */
/* could do body::before */
.scanlines::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 4px 100%;
    pointer-events: none;
}

/* ----- SCREEN BORDER ----- */
/* https://gist.github.com/lukehedger/8560101 */
/* https://generatepress.com/forums/topic/fixed-width-border-around-complete-site/ */
/* https://docs.generatepress.com/article/adding-a-container-wrapper/ */
/* https://css-tricks.com/body-border/ */

/* empty div right after opening body tag */
div.screen-border { /* empty div right after opening body tag */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 3px solid var(--uicolor); /* Adjust the border size and color as needed */
	pointer-events: none; /* Allow interaction with underlying content */
	box-sizing: border-box; /* Ensure border is included in the element's total width and height */
}

/* ----- HEADER ----- */

header {
	margin-bottom: 2px;
}

header:has(.dynix) { /* https://stackoverflow.com/a/1014958 */
	margin-top: 2em;
}

header div.dynix {
	position: fixed; /* https://www.shecodes.io/athena/27153-how-to-make-a-header-stay-in-place-when-scrolling-with-css */
	top: 0;
	left: 1em;
	right: 1em;
	background: var(--uicolor); /* limegreen */
	color: black;
	text-align: center;
}

header table.dynix { /* https://websitereview.neocities.org/ */
	position: fixed; /* https://www.shecodes.io/athena/27153-how-to-make-a-header-stay-in-place-when-scrolling-with-css */
	top: 0;
	left: 1em; /*auto or 1em*/
	right: 1em;
	width: calc(100% - 2em); /*calc(100% - 2em)*/ /* Adjust width to account for the margins */
	border: 0px;
	border-collapse: collapse;
	/* background: limegreen; */
	margin-top: 0;
	padding-top: 0;
	padding-bottom: 0;
	height: 1.5em;
	table-layout: fixed;
	color: black;
}

header table.dynix thead {
	vertical-align: middle; /* Won't work in table; it can work here */
}

header table.dynix tr:nth-child(1) {
	background: var(--uicolor);
}

header table.dynix td:nth-child(1) {
	text-align: left;
	padding-left: 1ch; /* no longer need   in html */
	width: 2em;
}

header table.dynix td:nth-child(2) {
	text-align: center;
	/* https://stackoverflow.com/questions/1457563/equal-sized-table-cells-to-fill-the-entire-width-of-the-containing-table */
	width: auto; /* calc(100%/2) */
}

header table.dynix td:nth-child(3) {
	text-align: right;
	padding-right: 1ch;
	width: 2em;
}

/* Second row, single td colspan 3 */
header table.dynix tr:nth-child(2) td {
	text-align: center;
}

/* single td has a span within it, BUT it isn't centered for some reason... */
header table.dynix tr:nth-child(2) td span {
	background: var(--uicolor);
	padding: 0.1em 0.5em;
}

/* stores the link character, or text */
/* ◀▣◼ https://www.unicode.org/charts/nameslist/n_25A0.htm */
/* https://stackoverflow.com/questions/12366516/is-it-possible-to-display-text-from-a-css-file */
header table.dynix thead td:nth-child(1) a:before {
	content: "◀"; /* ◀ "javascript:window.history.back();" */
	color: black;
}

header table.dynix thead td:nth-child(3) a:before {
	content: "◼"; /* ▣ */
	color: black;
}

/* ascii art text */
.ascii {
	white-space: pre; /* necessary for ascii to render properly */
	font-family: 'Courier New', monospace;
	font-size: 12pt;
}

header .ascii {
	white-space: pre; /* necessary for ascii to render properly */
	text-align: center;
	margin-top: -1em; /* ascii banner may */
	font-family: 'Courier New', monospace;
	font-size: 12pt;
}

header .ascii a:link ,
header .ascii a:visited {
	text-decoration: none; /* Remove underlines from links */
	/* if a:link and a:visited are located here, hover won't work */
	color: var(--maintextcolor);
}

header .ascii a:hover {
	color: var(--hovercolor);
	/* text-decoration: underline; */
	box-shadow: none !important;
	background: none !important;
	text-shadow: var(--maintextshadowglow);
}

/* ----- NAV ----- */

.linktree {
	text-align: center;
}

.linktree ul { /* remove tab styling */
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.linktree li {
	margin: 1em;
}

.linktree a ,
.linktree a:link ,
.linktree a:visited {
	text-decoration: none; /* Remove normal a tag styling */
	/* if a:link and a:visited are located here, hover won't work */
	color: var(--maintextcolor);
}

.linktree a:hover {
	color: var(--hovercolor);
	/* text-decoration: underline; */
	box-shadow: none !important;
	background: none !important;
	text-shadow: var(--maintextshadowglow);
}

.linktree i.fa-brands , i.fa-solid , i.fa-regular {
	padding-left: 0.5em;
	padding-right: 0.5em;
}

/* ----- TEXT ----- */

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.indent {
	text-indent: 2em;
}

/* first letter in an element is large */
.drop-cap::first-letter {
	initial-letter: 2 2;
	margin-right: 0.3em;
}

mark { /* highlight */
	background: var(--maintextcolor);
	color: black;
}


/* link hyperlink  href*/
a:link , a:visited{
	color: var(--linkcolor);
	text-decoration: none; /* Remove underlines from links */
}

a:hover {
	/* rgb(18, 92, 28) */
	background: rgb(14, 77, 22);
	box-shadow: 0px 0px 10px 1px rgb(14, 71, 2);
	/*text-shadow: 
    -1px -1px 0.5em rgba(0, 255, 0, 0.999),
    1px 1px 0.5em rgba(10, 73, 26, 0.966);*/
}

/* old hover just changed the text color */
/*a:hover {
	color: rgb(181, 255, 107);
}*/

hr {
	border: 1px solid var(--uicolor);
	/*border-radius: 5px;*/
	width: 95%;
}

article hr,
section hr {
	width: 60%;
}

h1 {
	text-decoration-line: none;
	text-decoration-style: dashed;
	font-size: 1.75em;
}

hgroup p {
	margin-top: -1em;
	padding-left: 0.5em;
	font-size: 1.5em;
	font-style: italic;
}

/* list */
ul li {
	margin-bottom:1em;
}

ol li {
	margin-bottom:1em;
}

/* description list tags dl dt dd */
dl dt {
	font-style: italic;
	font-weight: bold;
}

kbd { /* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd */
	background-color: transparent;
	border-radius: 3px;
	border: 1px solid darkgreen;
	box-shadow:
	  0 1px 0.2em darkgreen/*rgba(0, 0, 0, 0.2)*/,
	  0 2px 0 0 limegreen inset;
	color: var(--maintextcolor);
	display: inline-block;
	font-size: 0.85em;
	font-weight: 700;
	line-height: 1;
	padding: 2px 4px;
	white-space: nowrap;
}


/* blockquotes */
blockquote {
	/*float: left;*/
	font-weight: normal;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 50px;
	border-left: 2px solid var(--uicolor);
	padding-left: 1em;
}


figure blockquote {
	display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
	border: 2px dashed var(--uicolor); /*#238f19*/
    padding-left: 1em;
    padding-right: 1em;
    box-shadow: -.5em .5em rgb(2, 48, 6);
}


/*  < is &lt; -- > is &gt; -- ≤ is &le; -- ≥ is &ge; -- & is &amp; -- " is &quot;*/
code {
	font-family: monospace;
	background: var(--codebkgcolor); /*#202020e8*/
	padding: 0.1em 0.2em 0.1em; /* top, side, bottom */
}


/* ----- code block methods ----- */
/* idea: https://stackoverflow.com/questions/40842277/create-line-numbers-on-pre-with-css-only */
/* idea: https://stackoverflow.com/a/78379918 */
/* https://highlightjs.org/ */

pre.wrap {
	white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
	font-family: monospace;
	position: relative;
  	padding-left: 1em; /* was 20px. Add some space for the divider */
}

pre.codeblock {
	white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
	font-family: monospace;
	position: relative;
  	/*padding-left: 1em;*/ /* was 20px. Add some space for the divider */
	font-family: monospace;
	border: 2px solid var(--uicolor); /*#1fa51a*/
	/*background-color: var(--codebkgcolor);*/ /* #303030 or #202020e8*/
	/*box-shadow: inset 0 0 10px #000;*/
	padding: 1em 1em;
	/*border-top: 4px solid #1fa51a;*/
    border-radius: 3px;
	margin: 1em;
}


/* basically https://stackoverflow.com/a/78379918 , but converted scss to css, then changed line separation from span something else */
/* x element is unofficial. Chatgpt recommends adding the following javascript:
customElements.define('x', class extends HTMLElement {});
*/
div.codeblock {
    font-size: 1em; /* 16px */
    font-family: monospace;
    background-color: var(--codebkgcolor); /* #303030 */
	box-shadow: inset 0 0 10px #000;
    color: #32CD32;   /*var(--maintextcolor)   #e6be49*/
    padding: 1em 1em; /* 2nd value was 20px, coincides with ::after left:*/
	border-top: 4px solid #1fa51a;
    border-radius: 3px;
    counter-reset: line;
    position: relative;
    line-height: 1.;
    text-align: left !important;
    margin: 0 !important;
}

div.codeblock::after {
    content: "";
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 2.5em; /* was 40px, double of .codeblock padding's second value */
    border-right: 1px solid #5e5e5e; /* vertical line #5e5e5e */
}

div.codeblock s { /* line separator element */
    display: block;
    counter-increment: line;
    padding-left: 35px;
    margin: 0;
	text-decoration: none; /* Removes s- strikethrough and u- underline */
}

div.codeblock s::before { /* define line separator here too */
    content: counter(line);
    display: inline-block;
    margin-left: -34px;
    margin-right: 25px;
    color: #a0a0a0; /* line number color #a0a0a0 */
}


/* https://stackoverflow.com/a/78379918 */
/* lines separated by spans */
div.codeblock2 {
    font-size: 16px;
    font-family: monospace;
    background-color: #303030;
    color: #e6be49;
    padding: 15px 20px;
    border-radius: 3px;
    counter-reset: line;
    position: relative;
    line-height: 1.3;
    text-align: left !important;
    margin: 0 !important;
}

div.codeblock2::after {
    content: "";
    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 40px;
    border-right: 1px solid #5e5e5e;
}

div.codeblock2 span {
    display: block;
    counter-increment: line;
    padding-left: 35px;
}

div.codeblock2 span::before {
    content: counter(line);
    display: inline-block;
    margin-left: -34px;
    margin-right: 25px;
    color: #a0a0a0;
}


/* Github Gist container - https://stackoverflow.com/questions/45766609/embed-a-short-compact-version-of-a-gist-in-html*/
/*
<div class="github-gist" id="gistDynamicHTML"><a href="#gistDynamicHTML" class="show">Expand view...</a><script src=""></script></div>
*/
.github-gist {
	max-height: 200px;
	overflow: auto;
}
.github-gist:target .show {display:none;}
.github-gist:target {max-height:none;}


pre.github-content {
	padding: 10px;
	border-radius: 5px;
	overflow-x: auto;
	white-space: pre-wrap;
	background: #2d2d2d;
	color: #d4d4d4;
	margin-bottom: 10px;
}


/* Green Button Styling */
.buttongreen {
	display: inline-block;
	padding: 0.5em 0.5em;
	font-size: 1em;
	font-family: monospace;
	font-weight: bold;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	outline: none;
	color: var(--maintextcolor); /*#fff*/
	background-color: rgb(1, 71, 1);
	border: none;
	border-radius: 5px;
	box-shadow: 0 5px 0px 0px #2c2c2ce8; /* DarkSlateGray #202020e8 */
	filter: drop-shadow(0 0 0.3em rgb(2, 66, 2));
	margin: 0.5em;
}

/* Not needed anymore with .button's filter 
span:has(> .buttongreenn) { 
	box-shadow:
	  0 0.1em 0.8em 0.3em rgb(6, 70, 6);
}*/
  
.buttongreen:hover {
	color: black;
	background-color: var(--hovercolor);
	box-shadow: 0 5px 0px 0px #2c2c2ce8;
	filter: drop-shadow(0 0 0.3em rgb(2, 66, 2));
}

.buttongreen:active {
	background-color: darkolivegreen; /*#3e8e41*/
	box-shadow: 0 2px rgb(28, 48, 48); /* (.button box-shadow) - (transform distance) = (.button:active box-shadow) */
	transform: translateY(3px);
}