/* TERMINAL STYLE 2024-08-02 */

@charset "utf-8";

/* ----- 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; /*  */
}

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 with this class goes right after body opening tag, and before content */
.screen-border {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 3px solid limegreen; /* 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: limegreen; /* 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: limegreen;
}

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: limegreen;
	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;
}

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; */
}

/* ----- 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 underlines from links */
	/* 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; */
}

.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;
}

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

a:hover {
	color: rgb(181, 255, 107);
}

hr {
	text-decoration-style: dashed;
}

h1 {
	text-decoration-line: underline;
	text-decoration-style: dashed;
}

li {
	margin-bottom:1em;
}

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;
}

/* Green Button Styling */
/* Button element requires button class for this to work */
.button {
	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 DarkSlateGray;
	filter: drop-shadow(0 0 0.3em rgb(2, 66, 2));
}

.buttonglow { /* to be placed in a span around the button element, though not needed anymore with .button's filter */
	box-shadow:
	  0 0.1em 0.8em 0.3em rgb(6, 70, 6)/*rgba(0, 0, 0, 0.2)*/;
}
  
.button:hover {
	color: black;
	background-color: var(--hovercolor);
}
  
.button: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);
}