/* ibm-plex-mono-latin-100-normal*/
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100;
  src: url('./files/ibm-plex-mono-latin-100-normal.woff2') format('woff2'), url('./files/ibm-plex-mono-latin-100-normal.woff') format('woff');
  
}
/* ibm-plex-mono-latin-200-normal*/
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 200;
  src: url('./files/ibm-plex-mono-latin-200-normal.woff2') format('woff2'), url('./files/ibm-plex-mono-latin-200-normal.woff') format('woff');
  
}
/* ibm-plex-mono-latin-300-normal*/
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url('./files/ibm-plex-mono-latin-300-normal.woff2') format('woff2'), url('./files/ibm-plex-mono-latin-300-normal.woff') format('woff');
  
}
/* ibm-plex-mono-latin-400-normal*/
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('./files/ibm-plex-mono-latin-400-normal.woff2') format('woff2'), url('./files/ibm-plex-mono-latin-400-normal.woff') format('woff');
  
}
/* ibm-plex-mono-latin-500-normal*/
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('./files/ibm-plex-mono-latin-500-normal.woff2') format('woff2'), url('./files/ibm-plex-mono-latin-500-normal.woff') format('woff');
  
}
/* ibm-plex-mono-latin-600-normal*/
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('./files/ibm-plex-mono-latin-600-normal.woff2') format('woff2'), url('./files/ibm-plex-mono-latin-600-normal.woff') format('woff');
  
}
/* ibm-plex-mono-latin-700-normal*/
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('./files/ibm-plex-mono-latin-700-normal.woff2') format('woff2'), url('./files/ibm-plex-mono-latin-700-normal.woff') format('woff');
  
}
:root {
	--phospor: hsl(120, 100%, 40%);
	--phospor2: hsl(120, 100%, 16%);
	--phospor3: hsl(120, 100%, 4%);
	--amber: hsl(42, 100%, 50%);
	--amber2: hsl(29, 97%, 52%);
	--amber3: hsl(23, 100%, 10%);
	--gap: 16px;
	--border: 1px solid var(--amber);
	--shadow: 0 0 1px var(--amber2), 0 0 3px var(--amber2);
	color-scheme: dark;
}

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html,
body {
	height: 100%;
}

body {
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

body {
	font-size: large;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	color: var(--amber);
	background-color: var(--amber3);
	text-shadow: var(--shadow);
}

/* 
  Scanline effect
  https://css-tricks.com/old-timey-terminal-styling/ 
*/

body::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: repeating-linear-gradient(
		0deg,
		rgba(0, 0, 0, 0.15),
		rgba(0, 0, 0, 0.15) 1px,
		transparent 1px,
		transparent 2px
	);
	pointer-events: none;
}

::selection {
	color: var(--amber3);
	background-color: var(--amber2);
	text-shadow: none;
}

a {
	color: var(--amber);
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

hr {
	border: var(--border);
	box-shadow: var(--shadow);
	margin: var(--gap) 0;
}

pre {
	white-space: pre-wrap;
}

header {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	background-color: var(--amber);
	padding: 3px var(--gap);
	margin-bottom: var(--gap);
}

header nav ul {
	display: flex;
	flex-direction: row;
	gap: var(--gap);
}

header a {
	color: var(--amber3);
	font-weight: 700;
}

header > a {
	text-decoration: none;
}

main {
	max-width: 120ch;
	margin: auto;
	padding: var(--gap);
}

main img,
main picture,
main video,
main iframe,
main svg,
main table {
	margin: var(--gap) auto;
	border: var(--border);
	box-shadow: var(--shadow);
}

main p {
	margin-bottom: var(--gap);
}

/* Tables */
table {
	border-collapse: separate;
	border-spacing: 3px;
	border: var(--border);
	margin: var(--gap) auto;
}

td,
th {
	padding-left: 15px;
	padding-right: 15px;
	box-shadow: 1px 0 0 var(--amber);
	line-height: 0.8;
}

td:last-child,
th:last-child {
	box-shadow: none;
}

th {
	text-align: left;
	border-bottom: 1px solid;
	padding-top: 5px;
}

td {
	padding-top: 3px;
	padding-bottom: 3px;
}

tbody tr:nth-child(odd) {
	background: var(--amber);
	color: var(--amber3);
}

tr:hover,
tbody tr:nth-child(odd):hover {
	background: var(--amber2);
	color: var(--amber3);
}

td:hover,
th:hover {
	font-weight: bold;
}

blockquote {
	border-left: var(--border);
	padding-left: var(--gap);
	margin-bottom: var(--gap);
}

footer {
	text-align: center;
	padding: var(--gap);
}

.box {
	border: var(--border);
	box-shadow: var(--shadow);
	padding: var(--gap);
}

.grid {
	display: grid;
	gap: var(--gap);
	margin: var(--gap) 0;
	grid-template-columns: 1fr 1fr 1fr;
}@media (prefers-contrast: more) {
	body {
		color: unset;
		background-color: unset;
		text-shadow: none;
	}
	body::after {
		display: none;
	}
}