/* root settings */

:root {

	/* General Colors */
	--Black: #020605;
	--Grey: #24211c;
	--White: #f2ead4;
	--Red: #8b0000;
	--Green: #009e87;
	--Amber: #f99b36;

	/* border and box shadow colours */
	--colorBorder: var(--Black);
	--colorShadow: var(--Black);

	/* background colour for the sections */
	--colorSection: var(--White);
	--colorBoldSection: var(--Grey);

	--colorText: var(--Black);
	--colorBoldText: var(--White);

	/* column widths */
	--widthSidebar: 200px;
	--widthContent: 800px;

	/* fonts */
	--fontText: 'w95fa', monospace;
	--fontTitle: 'gortondigital', monospace;
	--fontBold: 'dymo';

	/* borders */
	--borderSolid: 4px solid var(--Black);
	--borderDotted: 4px dotted var(--Black);
	--borderTree: 4px solid var(--Black);

	/* rounded corners */
	--borderRadius: 2em;

	/* gallery settings */
	--columnCount: 2;
	--columnGap: 8px;

	/* general page and text colours */
	--colorBackground: var(--White);
	--colorLink: var(--Red);
	--colorBoldLink: var(--Red);

	/* accent colours */
	--colorPrimary: var(--Black);
	--colorSecondary: var(--Red);
	--colorTertiary: var(--White);
	--colorMarquee: var(--Black);
	--colorSelection: var(--Red);
}

.themeWhite {

	/* general page and text colours */
	--colorBackground: var(--White);
	--colorLink: var(--Red);
	--colorBoldLink: var(--Red);

	/* accent colours */
	--colorPrimary: var(--Black);
	--colorSecondary: var(--Red);
	--colorTertiary: var(--White);
	--colorMarquee: var(--Black);
	--colorSelection: var(--Red);
}

.themeRed {

	/* general page and text colours */
	--colorBackground: var(--Red);
	--colorLink: var(--Black);
	--colorBoldLink: var(--White);

	/* accent colours */
	--colorPrimary: var(--Black);
	--colorSecondary: var(--Black);
	--colorTertiary: var(--Black);
	--colorMarquee: var(--White);
	--colorSelection: var(--Red);
}

.themeGreen {

	/* general page and text colours */
	--colorBackground: var(--Green);
	--colorLink: var(--Black);
	--colorBoldLink: var(--White);

	/* accent colours */
	--colorPrimary: var(--Black);
	--colorSecondary: var(--Black);
	--colorTertiary: var(--Black);
	--colorMarquee: var(--White);
	--colorSelection: var(--Green);
}

/* title font - w95fa */
@font-face {
	font-family: 'w95fa';
	src: url('../fonts/w95fa/w95fa.woff') format('woff'),
		url('../fonts/w95fa/w95fa.woff2') format('woff2'),
		url('../fonts/w95fa/w95fa.otf');
}

/* body font - DM mono */
@font-face {
	font-family: 'DM Mono';
	font-style: normal;
	src: url('../fonts/DM Mono/dm-mono-v11-latin-regular.woff') format('woff'),
		url('../fonts/DM Mono/dm-mono-v11-latin-regular.woff2') format('woff2'),
		url('../fonts/DM Mono/dm-mono-v11-latin-regular.ttf');
}

@font-face {
	font-family: 'DM Mono';
	font-style: italic;
	src: url('../fonts/DM Mono/dm-mono-v11-latin-italic.woff') format('woff'),
		url('../fonts/DM Mono/dm-mono-v11-latin-italic.woff2') format('woff2'),
		url('../fonts/DM Mono/dm-mono-v11-latin-italic.ttf');
}

@font-face {
	font-family: 'DM Mono';
	font-style: normal;
	font-weight: bold;
	src: url('../fonts/DM Mono/dm-mono-v11-latin-500.woff') format('woff'),
		url('../fonts/DM Mono/dm-mono-v11-latin-500.woff2') format('woff2'),
		url('../fonts/DM Mono/dm-mono-v11-latin-500.ttf');
}

@font-face {
	font-family: 'DM Mono';
	font-style: italic;
	font-weight: bold;
	src: url('../fonts/DM Mono/dm-mono-v11-latin-500.woff') format('woff'),
		url('../fonts/DM Mono/dm-mono-v11-latin-500.woff2') format('woff2'),
		url('../fonts/DM Mono/dm-mono-v11-latin-500.ttf');
}

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on January 13, 2025 */
@font-face {
	font-family: 'gortondigital';
	src: url('fonts/webfontkit-gortondigital/gortondigitalregular-webfont.woff2') format('woff2'),
		url('fonts/webfontkit-gortondigital/gortondigitalregular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'dymo';
	src: url('fonts/webfontkit-dymo/impact_label_reversed-webfont.woff2') format('woff2'),
		url('fonts/webfontkit-dymo/impact_label_reversed-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/* global site structure */

* {
	box-sizing: border-box;
}

body {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	margin: 0;
	height: 100vh;
	font-family: var(--fontText);
	color: var(--colorText);
	background-color: var(--colorBackground);
	overflow-x: hidden;
}


header {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 100%;
	border-bottom: var(--borderSolid);
	background-color: var(--colorBackground);
	padding: 0 1em;
	font-size: 1em;
	color: var(--colorText);
	font-family: var(--fontTitle);
}


main {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
}

main>.sidebar {
	margin-left: auto;
	flex: 2 2 10em;
	max-width: calc(var(--widthSidebar) + 2em);
	padding: 1em;
}

main>.techbar {
	margin-right: auto;
	margin-top: 1em;
	margin-bottom: 1em;
	flex: 2 2 10em;
	max-width: var(--widthSidebar);
	padding: 0.1em;
	width: 100%;
	border: 4px solid var(--colorBorder);
	background-color: var(--colorBoldSection);
	box-shadow: 0.5em 0.5em var(--colorShadow);
	border-radius: var(--borderRadius);
}

main>.content {
	display: flex;
	flex-flow: row wrap;
	flex: 1 1 10em;
	max-width: var(--widthContent);
	padding: 1em;
}

footer {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 100%;
	border-top: var(--borderSolid);
	background-color: var(--colorBackground);
	padding: 0 1em;
	font-size: 0.7em;
	color: var(--colorText);
}

/* global text settings */

::selection {
	background: var(--colorSelection);
	color: var(--colorText);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--fontTitle);
	word-wrap: break-word;
}

p {
	font: var(--fontText);
}

center {
	font: var(--fontText);
	text-align: center;
}

b {
	color: var(--colorSecondary);
}

a {
	color: var(--colorLink);
}

a:hover {
	color: var(--colorPrimary);
	background-color: var(--colorBackground);
}

button,
.button {
	font-family: var(--fontTitle);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--colorText);
	background-color: var(--colorBackground);
	border: 1px solid var(--colorBorder);
	padding: 8px 12px;
}

button:hover,
.button:hover {
	background-color: var(--colorBackground);
	color: var(--colorTertiary);
}

.button:after {
	content: '';
}

hr {
	border: 0;
	border-top: var(--borderDotted);
	margin: 1em 0;
	width: 100%;
}

blockquote {
	margin: 1.5em;
	padding-left: 1.5em;
	border-left: 1px solid var(--colorSecondary);
}

pre,
code {
	width: calc(var(--widthContent) - 200px);
	background: var(--colorPrimary);
	padding: 4px 8px;
	margin: 1em auto;
	max-height: 300px;
	overflow: scroll;
}

figure>figcaption:before {
	content: '↳ ';
}

figure>figcaption {
	font-size: 12px;
}

audio,
video,
iframe {
	display: block;
	margin: auto;
	border: var(--borderSolid);
	box-shadow: 0.3em 0.3em var(--colorShadow);
}

details>summary {
	padding: 0.2em 0;
	margin: 0 2em;
	border-bottom: 1px solid var(--colorPrimary);
	cursor: pointer;
}

select,
.select {

	display: block;
	position: relative;
	padding: 0.5em;
	padding-inline: 1.15em;
	margin: 0.5em 0;

	font-family: var(--fontBold);
	color: var(--colorBoldText);
	background-color: var(--colorPrimary);
	font-size: 20px;

}

/* nav specific */

nav {
	padding: 8px 0;
	border-top: var(--borderDotted);
	border-bottom: var(--borderDotted);
}

nav .category {

	display: block;
	position: relative;
	padding: 0.5em;
	margin: 0.5em 0;

	font-family: var(--fontBold);
	color: var(--colorBoldText);
	background-color: var(--colorPrimary);
	font-size: 20px;

}

nav .category:hover {
	color: var(--colorTertiary);
	background-color: var(--colorBoldLink);
	cursor: pointer;
}

nav .category::-webkit-details-marker {
	display: none;
}

nav details[open] .category {
	background-color: var(--colorBorder);
	color: var(--colorBoldText);
}

nav>details>.category::after {
	content: '[open]';
	color: var(--colorBoldText);
	position: absolute;
	right: 0.5em;
}

nav>details[open]>.category::after {
	content: '[close]';
	color: var(--colorBoldText);
	position: absolute;
	right: 0.5em;
}

nav ul li {
	font-family: var(--fontText);
	color: var(--colorBoldText);
	/* background-color: var(--colorDarkText); */
	font-size: 16px;

}

/* sidebar widgets */

.sidebar>.widget {
	display: flex;
	flex-flow: column;
	padding: 8px 0;
	border-bottom: var(--borderDotted);
}


/* sections */

boldsection {
	border: 4px solid var(--colorBorder);
	background-color: var(--colorBoldSection);
	color: var(--colorBoldText);
	padding: 1em;
	box-shadow: 0.5em 0.5em var(--colorShadow);
	margin: 0 1em 2em 1em;
	width: 100%;
	border-radius: var(--borderRadius);
}

boldsection a {
	color: var(--colorBoldLink);
}

section {
	border: 4px solid var(--colorBorder);
	background-color: var(--colorSection);
	color: var(--colorText);
	padding: 1em;
	box-shadow: 0.5em 0.5em var(--colorShadow);
	margin: 0 1em 2em 1em;
	width: 100%;
	border-radius: var(--borderRadius);
}

section h1 {
	/* text-transform: uppercase;
	padding: 0 1em;
	color: var(--colorDarkText);
	background: var(--colorPrimary); */

	padding: 0 1em;
	font-family: var(--fontBold);
	color: var(--colorBoldText);
	background: var(--colorSecondary);
}

section h2 {
	border-bottom: 1px solid var(--colorBorder);
}

section a::after {
	content: '\21F2';
	padding: 0;
	display: inline-block;
	transform: rotate(-90deg);
	vertical-align: super;
	font-style: normal;
	font-weight: bold;
	font-size: 0.7em;
	color: var(--colorLink);
}

section img {
	width: 100%;
	image-rendering: pixelated;
}

section p {
	padding: 0 1em;
	max-inline-size: 700px;
}

section b {
	color: var(--colorSecondary)
}

section>ul li,
section>ol li {
	padding: 0.2em 0;
	border-bottom: 1px solid var(--colorBorder);
	list-style-position: outside;
}

.half-width {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	min-height: 300px;
}

.half-width section {
	width: calc(50% - 2em);
	margin: 0 1em 2em 1em;
}

section.half-width pre {
	width: unset;
}

section .scrollbox {
	max-height: 250px;
	overflow: scroll;
	border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAo0lEQVRYR+2YsQ2AMAwE8XB0rMFUrEHHcECQQkdh6w2yODcRUnI4n6MINs7TPpy1Lau10fvc1njKy+/zLbqwb8zTZCSIu1Hvi76afx13hapz9Dgq9glHnwKNqlbnYxKrlIbDURxNk0sEruOoaMPpGBJVR0yiJKpOQM3DURJVJ6Dm1XE0eod5/ZdOmUbVLmXxcJQ7U5ZbKi6O4qjKpSwOjv7W0QOMUt+K9QUh9QAAAABJRU5ErkJggg==") 14 / 14px / 0 round;
	border-width: 14px;
	border-style: solid;
}

/* in-section flex settings */

boldsection>.flex-columns {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

section>.flex-columns {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

.flex-columns>.flex-text {
	width: 60%;
}

.flex-columns>.flex-image {
	width: 40%;
}

.flex-columns>.flex-image>img {
	width: 100%;
	padding: 0 1em;
	image-rendering: pixelated;
	border-radius: var(--borderRadius);
}

/* preview frames */
.preview-frame {
	display: flex;
	flex-flow: row wrap;
	border: 1px solid var(--colorSecondary);
	border-radius: 0 0 1em 0;
	margin: 1em;
}

.preview-frame a {
	max-width: 250px;
}


.preview-frame a:after {
	content: '';
}

.preview-frame a img {
	height: 100%;
	object-fit: contain;
	flex-basis: 0;
	padding: 10px;
}

.preview-frame>div {
	border-left: 1px solid var(--colorSecondary);
	width: calc(100% - 250px);
	flex-basis: 1 1 auto;
}

.preview-frame h3 {
	padding: 8px 0;
	margin: 0;
	border-bottom: 1px solid var(--colorSecondary);
}

.preview-frame h3,
.preview-frame p {
	padding-left: 12px;
}

.preview-frame button {
	margin-left: 12px;
	margin-bottom: 12px;
}

/* gallery */

.gallery {
	/* Prevent vertical gaps */
	line-height: 0;

	-webkit-column-count: var(--columnCount);
	-webkit-column-gap: var(--columnGap);
	-moz-column-count: var(--columnCount);
	-moz-column-gap: var(--columnGap);
	column-count: var(--columnCount);
	column-gap: var(--columnGap);
}

.gallery div,
.gallery img {
	/* Just in case there are inline attributes */
	width: 100% !important;
	height: auto !important;
	margin-bottom: var(--columnGap);
}


/* tree view */

.tree-view {
	margin-bottom: 12px;
}

.tree-view ul>li::before {
	content: '';
	border-bottom: var(--borderTree);
	display: block;
	width: 24px;
	/*	transform: translate(0, 25px);*/
}

nav .tree-view ul {
	display: flex;
	flex-flow: column;
	border-left: var(--borderTree);
	transform: translate(0, -8px);
	margin: 0 0 0 24px;
	padding: 0;
}

nav .tree-view ul li {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-end;
	list-style-type: none;
	min-height: 32px;
}

nav .tree-view a {
	display: block;
	margin-left: 8px;
	transform: translate(0, 8px);
	padding: 2px;
	text-decoration: none;
	width: 100%;
}

section .tree-view ul {
	border-left: var(--borderTree);
	transform: translate(24px, 0px);
	margin: 0 0 0 24px;
	padding: 0;
}

section .tree-view ul li {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-end;
	padding: 0;
	min-height: 32px;
	list-style-type: none;
	max-width: 500px;
}

section .tree-view ul>ul>li {
	margin-top: 10px;
}

section .tree-view a,
section .tree-view li p {
	margin: 0 0 0 8px;
	transform: translate(0, 8px);
	padding: 2px;
	text-decoration: none;
	width: 100%;
}

section .tree-view>p {
	margin: 0;
	padding: 8px;
	border: var(--borderTree);
}


/* arrow list */

.arrow-list>li {
	padding: 0.2em 0;
	border-bottom: 1px solid var(--colorBorder);
	list-style-position: outside;
	list-style-type: '→ ';
	/* for Safari/iOS/whatever other browser that hates ::marker */
}

.arrow-list>li::marker {
	content: '→ ';
	font-family: sans-serif;
}

/* to do list */

.todo-list li {
	padding: 0.2em 0;
	border-bottom: 1px solid var(--colorPrimary);
	list-style-position: outside;
	list-style-type: '☐ ';
	/* for Safari/iOS/whatever other browser that hates ::marker */
}

.todo-list>li::marker {
	content: '☐ ';
	font-family: sans-serif;
}

.todo-list>.task-done {
	color: var(--colorPrimary);
	text-decoration: line-through;
	list-style-position: outside;
	list-style-type: '☒ ';
	/* for Safari/iOS/whatever other browser that hates ::marker */
}

.todo-list>.task-done::marker {
	content: '☒ ';
	font-family: sans-serif;
}

/* not found page */

.not-found {
	display: flex;
	flex-flow: column;
	max-width: 800px;
	height: 500px;
	justify-content: center;
	margin: auto;
	padding: 2em;
}

/* marquee scrolling text */

.marquee {
	--gap: 1rem;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
}

.marquee-content {
	flex-shrink: 0;
	display: flex;
	justify-content: space-around;
	min-width: 100%;
	gap: var(--gap);
	animation: scrolling 25s linear infinite;
	color: var(--colorMarquee);
}

@keyframes scrolling {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-100% - var(--gap)));
	}
}

.marquee-content li {
	list-style-type: none;
}

/* buttons */
#button-gallery,
.table-frame {
	display: none;
	border: 4px solid var(--colorPrimary);
	border-radius: 12px;
	padding: 12px;
	margin: 16px 0;
	width: 100%;
}

#button-gallery {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}

#button-gallery>img {
	width: 88px;
	height: 31px;
	margin: 4px;
	box-shadow: 2px 2px var(--colorPrimary);
	image-rendering: pixelated;
}

#button-gallery a::after {
	background-image: none;
}

#button-gallery a {
	width: 88px;
	height: 31px;
	margin: 4px;
	box-shadow: 2px 2px var(--colorPrimary);
	text-decoration: none;
}

#button-gallery a.animated-button {
	box-shadow: 2px 2px var(--colorShadow);
}

#button-gallery a:hover {
	box-shadow: none;
	transform: translate(2px, 2px);
}

#button-gallery a img {
	width: 100%;
	image-rendering: pixelated;
}

#button-gallery a span {
	background: var(--colorSecondary);
	font-family: var(--fontTitle);
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 31px;
	text-transform: uppercase;
	color: var(--colorPrimary);
	line-height: 0.8em;
	text-align: center;
}

#button-gallery a span:hover {
	color: var(--colorText);
	background: var(--colorPrimary);
}

.ff-container .ff-canvas {
	image-rendering: pixelated;
}

#friends-list {
	width: 100%;
	border-collapse: collapse;
}

#friends-list td {
	padding: 8px;
}

#friends-list td.name {
	width: 20%;
	border-right: 1px dotted var(--colorSecondary);
	font-weight: 600;
	text-align: center;
}

#friends-list tr {
	border-bottom: 1px dotted var(--colorSecondary);
}

#friends-list tr:last-child {
	border-bottom: 0;
}

@media screen and (max-width: 1200px) {
	main>.techbar {
			display: none;
	}
}

@media screen and (max-width: 600px) {

	main>.techbar {
        display: none;
    }

	:root {
		/* gallery settings */
		--columnCount: 1;
		--columnGap: 8px;
	}

	html {
		font-size: 0.9em;
	}

	header.mobile-only {
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		border-bottom: var(--borderDotted);
		padding: 0 1em;
		margin-bottom: 1em;
		text-transform: uppercase;
	}

	main>.content {
		order: 1;
		padding: 4px;
		/* width: 100%; */
	}

	main>.sidebar {
		order: 2;
		max-width: 100%;
		padding: 1em;
	}

	section>.flex-columns {
		display: flex;
		flex-flow: column;
	}

	pre,
	code {
		max-width: 250px;
	}

	audio,
	video,
	iframe {
		width: 100%;
	}

	video,
	iframe {
		height: 200px;
	}

	.flex-columns>.flex-text {
		width: 100%;
	}

	.flex-columns>.flex-image {
		width: 100%;

	}

	.flex-columns>.flex-image>img {
		margin: 12px 0;

	}

	.flex-columns>.flex-image-pixel {
		margin: 12px 0;
		image-rendering: pixelated;

	}

	.half-width section {
		width: 100%;
	}

	/* preview frames */
	.preview-frame {
		display: flex;
		flex-flow: column;
	}

	.preview-frame a {
		max-width: 100%;
	}

	.preview-frame>a>img {
		height: 100%;
		border-bottom: 1px solid var(--colorSecondary);
	}

	.preview-frame>div {
		border-left: none;
		width: 100%;
	}

	.preview-frame h3 {
		padding: 8px 0;
		margin: 0;
	}

	.preview-frame h3,
	.preview-frame p {
		padding-left: 12px;
	}

}