/* ==== RetroCyberDeck theme ================================================ */

/* ---- Fonts --------------------------------------------------------------- */

/*

DejaVuSansMono.ttf
IBMPlexMono-BoldItalic.ttf
IBMPlexMono-Bold.ttf
IBMPlexMono-ExtraLightItalic.ttf
IBMPlexMono-ExtraLight.ttf
IBMPlexMono-Italic.ttf
IBMPlexMono-LightItalic.ttf
IBMPlexMono-Light.ttf
IBMPlexMono-MediumItalic.ttf
IBMPlexMono-Medium.ttf
IBMPlexMono-Regular.ttf
IBMPlexMono-SemiBoldItalic.ttf
IBMPlexMono-SemiBold.ttf
IBMPlexMono-ThinItalic.ttf
IBMPlexMono-Thin.ttf
IBMPlexSans-Italic-VariableFont_wdth,wght.ttf
IBMPlexSans-VariableFont_wdth,wght.ttf
Lordish-Regular.ttf
Metropolis-Regular.ttf
ProggyClean.ttf
ProggyVector-Regular.ttf
ProggyVector-Regular.woff2

*/

@font-face
{
	src: url("/fonts/ProggyVector-Regular.woff2") format("woff2");
	font-family: "ProggyVector";
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face
{
	src: url("/fonts/ProggyClean.ttf");
	font-family: "ProggyClean";
}

@font-face
{
	src: url("/fonts/Metropolis-Regular.ttf");
	font-family: "Metropolis";
}

@font-face
{
	src: url("/fonts/DejaVuSansMono.ttf");
	font-family: "DejaVuSansMono";
}

@font-face
{
	src: url("../fonts/IBMPlexMono-Regular.ttf");
	font-family: "IBMPlexMono-Regular";
}

@font-face
{
	src: url("../fonts/IBMPlexMono-Bold.ttf");
	font-family: "IBMPlexMono-Bold";
}

@font-face
{
	src: url("/fonts/Lordish-Regular.ttf");
	font-family: "Lordish";
}

/* ---- Variables and global definitions ------------------------------------ */

:root
{
	--col-fg: #CCCCCC;
	--col-fg-high: #CC9900;
	--col-bg: #111111;
	--col-bg-alt: #222222;

	--col-interactable: #CC9900;

	--col-emb-light: #444444;
	--col-emb-shadow: #222222;

	--col-separator: #CC9900;

/* ---- Colour palette ------------------------------------------------------ */

	--color-white:  #CCCCCC;
	--color-grey:   #333333;
	--color-black:  #000000;
	--color-red:    #CC0000;
	--color-orange: #CC6600;
	--color-yellow: #CCCC00;
	--color-lime:   #66CC00;
	--color-green:  #009900;
	--color-aqua:   #33CC99;
	--color-cyan:   #009999;
	--color-blue:   #0000CC;
	--color-purple: #990099;

/* -------------------------------------------------------------------------- */

	--font-size-base: 10pt;

	--line-thin: 0.1rem;

	--margin-main-gap: 0.5rem;

	--margin-main-right: 3rem;
	--margin-main-left: 3rem;

	--margin-content-gap: 0.5em;

	--color-accent: #CC9900;
	--color-accent-bright: #FFCC00;
	--color-accent-dim: #CC990099;
	--color-accent-glow: #CC990066;

	--color-text: #CCCCCC;
	--color-text-dim: #AAAAAA;
	--color-text-dimmer: #888888;
	--color-text-accent: #CC9900;
	--color-text-accent-bright: #FFCC00;
	--color-text-title: #990000;

	--color-background: #33333333;
	--color-background-accent: #CC990022;

	--color-decoration: #CC9900;
	--color-decoration-faded: #CC9900CC;

	--color-border-light: #444444;
	--color-border-shadow: #222222;

	--color-border-active: #CC990066;
	--color-border-inactive: #444444;
	--color-border-dim: #CC990099;

	--color-inner-screen: #111111;
	--color-outer-shell: #222222;

	--border-radius: 0.25rem;
	--border-radius-alternate: 10rem;

	--border-light: 3px double var( --col-emb-light );
	--border-shadow: 3px double var( --col-emb-shadow );
}

/*
@media ( min-resolution: 96dpi )
{
	:root
	{
		--line-thin: 0.05rem;
		--color-text: #00CC00;
	}
}

@media ( min-resolution: 144dpi )
{
	:root
	{
		--line-thin: 1px;
		--color-text: #0000CC;
	}
}
*/

/* ---- Main elements ------------------------------------------------------- */

*
{
	box-sizing: border-box;
	border-spacing: 0;

	margin: 0;
	padding: 0;
}

html,
body
{
	width: 100%;
	height: 100%;

	overflow: hidden;
}

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

	padding-bottom: var( --margin-main-gap );

	color: var( --color-text );
	background-color: var( --color-outer-shell );

	font-family: 'IBMPlexMono-Regular', "Courier New";
/*
font-family: "ProggyVector";
font-family: "ProggyClean";
font-family: "Metropolis";
font-family: "DejaVuSansMono";
IBMPlexMono-Regular
font-family: "Lordish";
*/
	font-size: var( --font-size-base );
}

header
{
	display: flex;
	flex-direction: row;
	flex: 0 0 auto;

	margin: var( --margin-main-gap ) var( --margin-main-right ) 0 var( --margin-main-left );
	padding: 0.5rem 1rem 0.5rem 1rem;

	border-top: var( --border-shadow );
	border-right: var( --border-light );
	border-bottom: var( --border-light );
	border-left: var( --border-shadow );
	border-radius: var( --border-radius );

/*	background-color: var( --color-inner-screen );*/
	background: url(../images/crt_mask.png);

	justify-content: center;
	align-items: center;
}

main
{
	display: flex;
	flex-direction: row;
	flex: 1 1 auto;
	gap: var( --margin-main-gap );

	margin: var( --margin-main-gap ) var( --margin-main-right ) 0 var( --margin-main-left );
	padding: 0.5rem 1rem 0.5rem 1rem;

	border-top: var( --border-shadow );
	border-right: var( --border-light );
	border-bottom: var( --border-light );
	border-left: var( --border-shadow );
	border-radius: var( --border-radius );

/*	background-color: var( --color-inner-screen );*/
	background: url(../images/crt_mask.png);

	overflow: auto;
}

footer
{
	display: flex;
	flex-direction: row;
	flex: 0 0 auto;

	margin: var( --margin-main-gap ) var( --margin-main-right ) 0 var( --margin-main-left );
	padding: 0.5rem 1rem 0.5rem 1rem;

	border-top: var( --border-shadow );
	border-right: var( --border-light );
	border-bottom: var( --border-light );
	border-left: var( --border-shadow );
	border-radius: var( --border-radius );

/*	background-color: var( --color-inner-screen );*/
	background: url(../images/crt_mask.png);

	justify-content: center;
	align-items: center;
}

/* ---- Basic elements ------------------------------------------------------ */

::selection,
::-moz-selection
{
	color: var( --color-inner-screen );
	background-color: var( --color-decoration-faded );
}

p
{
	margin: var( --margin-content-gap ) 0 0 0;

	text-align: justify;
}

a
{
	color: var( --color-text-accent );
	text-decoration: none;
	border-bottom: var( --line-thin ) var( --color-accent ) dotted;
}

a:hover
{
	color: var( --color-text-accent-bright );
	border-bottom: var( --line-thin ) var( --color-accent-bright ) solid;
}

hr
{
	clear: both;

	margin: var( --margin-content-gap ) 0.5em 0 0.5em;
	border: 0.2em double var( --color-decoration-faded );
}

ul,
ol
{
	margin: var( --margin-content-gap ) 0 0 0;
}

li
{
	list-style: none;
}

li::before
{
	content: "»";
	padding: 0 0.5em 0 0.5em;
	color: var( --color-accent );
	font-weight: bold;
}

/* ---- Headers ------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6
{
	margin: var( --margin-content-gap ) 0 0 0;

	color: var( --color-text-accent );

	font-weight: bold;
}

h1
{
	border-bottom: var( --line-thin ) solid var( --color-accent );

	font-size: 1.50em;
/*	text-align: center;*/
}

h2
{
	border-bottom: var( --line-thin ) dashed var( --color-accent );
	font-size: 1.40em;
}

h3
{
	border-bottom: var( --line-thin ) dotted var( --color-accent );
	font-size: 1.30em;
}

h4
{
	font-size: 1.25em;
}

h5
{
	font-size: 1.1em;
}

h6
{
	font-size: 1em;
}

h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a
{
	border-bottom: none;
}

h1 > a:hover, h2 > a:hover, h3 > a:hover, h4 > a:hover, h5 > a:hover, h6 > a:hover
{
	color: var( --color-text-accent-bright );
	border-bottom: none;
}

/* ---- Form elements ------------------------------------------------------- */

form
{
}

/*
form:valid
{
	border-color: #00CC00;
}

form:invalid
{
	border-color: #CC0000;
}
*/

fieldset
{
	padding: 0.5em 1em 0.5em 1em;

	border: var( --line-thin ) solid var( --color-border-inactive );
	border-radius: var( --border-radius );
}

fieldset:focus-within
{
	border: var( --line-thin ) solid var( --color-border-active );
}

fieldset > fieldset
{
	display: inline-block;
}

legend
{
	color: var( --color-text-accent );
}

label
{
}

button
{
	padding: 0.5em 0.5em 0.5em 0.5em;

	border: var( --line-thin ) solid var( --color-border-inactive );
	border-radius: var( --border-radius );
	outline: none;

	color: var( --color-text );
	background-color: var( --color-background );
}

button:focus
{
	border: var( --line-thin ) solid var( --color-border-active );
	box-shadow: inset 0px 0px 1px 0px var( --color-accent-glow ), 0px 0px 4px 0px var( --color-accent-glow );

	color: var( --color-text-accent );
	background-color: var( --color-background-accent );
}

input
{
	padding: 0.5em 0.5em 0.5em 0.5em;

	border: var( --line-thin ) solid var( --color-border-inactive );
	border-radius: var( --border-radius );
	outline: none;

	color: var( --color-text );
	background-color: var( --color-background );
}

input:focus
{
	border: var( --line-thin ) solid var( --color-border-active );
	box-shadow: inset 0px 0px 1px 0px var( --color-accent-glow ), 0px 0px 4px 0px var( --color-accent-glow );

	color: var( --color-text-accent );
	background-color: var( --color-background-accent );
}

/*
input:valid
{
	border-color: #00CC00;
}
*/

input:invalid
{
	border-color: #CC0000;
}

input[ type = text ]
{
}

input[ type = password ]
{
}

input[ type = search ]
{
	flex: 1 1 auto;

	height: min-content;
}

input[ type = number ]
{
}

input[ type = range ]
{
}

input[ type = color ]
{
}

input[ type = date ]
{
}

input[ type = time ]
{
}

input[ type = file ]
{
}

input[ type = checkbox ]
{
}

input[ type = radio ]
{
}

meter
{
}

progress
{
}

select
{
	padding: 0.5em 0.5em 0.5em 0.5em;

	border: var( --line-thin ) solid var( --color-border-inactive );
	border-radius: var( --border-radius );
	outline: none;

	color: var( --color-text );
	background-color: var( --color-background );
}

select:focus
{
	border: var( --line-thin ) solid var( --color-border-active );
	box-shadow: inset 0px 0px 1px 0px var( --color-accent-glow ), 0px 0px 4px 0px var( --color-accent-glow );

	color: var( --color-text-accent );
	background-color: var( --color-background-accent );
}

textarea
{
	padding: 0.5em 0.5em 0.5em 0.5em;

	border: var( --line-thin ) solid var( --color-border-inactive );
	border-radius: var( --border-radius );
	outline: none;

	color: var( --color-text );
	background-color: var( --color-background );
}

textarea:focus
{
	border: var( --line-thin ) solid var( --color-border-active );
	box-shadow: inset 0px 0px 1px 0px var( --color-accent-glow ), 0px 0px 4px 0px var( --color-accent-glow );

	color: var( --color-text-accent );
	background-color: var( --color-background-accent );
}

details
{
	margin: var( --margin-content-gap ) 0 0 0;

	border: var( --line-thin ) solid var( --color-border-dim );
	border-radius: var( --border-radius );
}

summary
{
	display: flex;
	align-items: center;

	border-top-right-radius: var( --border-radius );
	border-top-left-radius: var( --border-radius );

/*	color: var( --color-accent );*/
	background-color: var( --color-background-accent );

	text-align: right;

	list-style: none;

	cursor: pointer;
}

summary::before
{
/*
	content: "ChangelogIcon";
	flex-grow: 1;

	padding: 0.5em 1em 0.5em 1em;

	text-align: left;
*/
}

summary::after
{
	content: "▼";

/*	margin-left: auto;*/
	padding: 0.5em 1em 0.5em 1em;

/*
	background-color: #CC9900CC;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-image: url('/images/icons/expander-indicator.svg');
	mask-size: contain;
	transform: rotate( 90deg );
*/
	transition: transform 0.1s;
}

details:not([ open ]) > summary
{
	border-radius: var( --border-radius );
}

details[ open ] > summary::after
{
	transform: rotate( -180deg );
}

details > p
{
	padding: 0 1em 0.5em 1em;
}

details > ul
{
	margin-bottom: var( --margin-content-gap );
}

li > time
{
	color: var( --color-text-dimmer );
	font-weight: bold;
}

svg
{
	margin: 0;
	padding: 0;
}

/* ---- SVG colours from palette -------------------------------------------- */

.stroke_white
{
	stroke: var( --color-white );
}

.fill_white
{
	fill: var( --color-white );
}

.stroke_grey
{
	stroke: var( --color-grey );
}

.fill_grey
{
	fill: var( --color-grey );
}

.stroke_black
{
	stroke: var( --color-black );
}

.fill_black
{
	fill: var( --color-black );
}

.stroke_red
{
	stroke: var( --color-red );
}

.fill_red
{
	fill: var( --color-red );
}

.stroke_orange
{
	stroke: var( --color-orange );
}

.fill_orange
{
	fill: var( --color-orange );
}

.stroke_yellow
{
	stroke: var( --color-yellow );
}

.fill_yellow
{
	fill: var( --color-yellow );
}

.stroke_lime
{
	stroke: var( --color-lime );
}

.fill_lime
{
	fill: var( --color-lime );
}

.stroke_green
{
	stroke: var( --color-green );
}

.fill_green
{
	fill: var( --color-green );
}

.stroke_aqua
{
	stroke: var( --color-aqua );
}

.fill_aqua
{
	fill: var( --color-aqua );
}

.stroke_cyan
{
	stroke: var( --color-cyan );
}

.fill_cyan
{
	fill: var( --color-cyan );
}

.stroke_blue
{
	stroke: var( --color-blue );
}

.fill_blue
{
	fill: var( --color-blue );
}

.stroke_purple
{
	stroke: var( --color-purple );
}

.fill_purple
{
	fill: var( --color-purple );
}

.bento_box
{
	display: grid;

/*	grid-template-columns: repeat( 9, 1fr );*/
	grid-auto-rows: min-content;
/*	grid-auto-columns: 1fr;*/
/*	grid-auto-flow: dense;*/

	gap: var( --margin-content-gap );
}

.bento_box > *
{
/*
	display: flex;
	flex-direction: column;
*/

/*	align-items: flex-start;*/

/*	overflow: hidden;*/
}

.bento_box .tall
{
	grid-row: span 3;
}

.bento_box .tallest
{
	grid-row: span 9;
}

.bento_box .wide
{
	grid-column: span 3;
}

.bento_box .widest
{
	grid-column: span 6;
}

.icolink
{
	display: inline-block;

	width: fit-content;

	margin: 0 0 var( --margin-content-gap ) 0;
	padding: 0.25em 0.5em 0.25em 0.5em;

	border: 1px solid var( --color-text-accent );
	border-radius: var( --border-radius );

	color: var( --color-text-accent );

	line-height: 1.5em;
	font-size: 0.8em;
	font-weight: bold;
	white-space: nowrap;

	cursor: pointer;
}

.icolink:hover
{
	border: 1px solid var( --color-text-accent );
	box-shadow: inset 0 0 0.5em 0.1em var( --color-accent );
}

.icolink > img
{
	width: 16px;
	height: 16px;

	margin-right: var( --margin-content-gap );

	vertical-align: middle;
}

.flex
{
	display: flex;
	gap: var( --margin-main-gap );
	align-items: end;
}