/* === BASIC CSS */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	box-sizing: border-box;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, img, svg { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
select { -webkit-appearance: menulist; }
button, input, optgroup, select, textarea { font: inherit; color: inherit; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; }
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
}
input[type="search"] {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
img { image-rendering: high-quality; }
svg { shape-rendering: geometricPrecision; text-rendering: geometricPrecision; }
img, svg {
	max-width: none;
	text-align: center;
	vertical-align: middle;
	position: relative;
}
iframe {
	width: 100%;
	height: 100%;
	border-radius: 0px;
}
html, body, text { text-rendering: optimizeLegibility; }
html, body {
	line-height: 1.42857143;
	height: 100%;

	min-height: 100%;
	text-align: justify;
	overflow-y: scroll;
	/*overflow-y: hidden;*/
	overflow-x: hidden;

	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
html {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;

	overflow-y: hidden;

	/*height: 100%;
	overflow-y: scroll;*/
}
div, span { text-align: left; position: relative; }
*, *:before, *:after {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* remove weird black focus outlining */
*,*:focus,*:hover { outline: 0px transparent !important; }
.js-focus-visible :focus:not(.focus-visible) { outline: 0px transparent !important; }

label, input, img, svg, .noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	user-drag: none;
	pointer-events: none;
}


/* === VARIABLES */

:root {
	--white: #fff;
	--black: #0a0a0a;
	--gray: #999;
	--red: #d24f36;
	--yellow: #fec600;
	--green: #06975b;
	--blue: #3337c5;

	--bg-color: var(--white);
	--fg-color: var(--black);
	--highlight-bg-color: var(--yellow);
	--highlight-fg-color: var(--black);

	--bar-height: 33.5px;
}


/* === BROWSER SPECIFICS, DO NOT COMBINE */

/* text highlight */
::-moz-selection {
	color: var(--highlight-fg-color);
	background: var(--highlight-bg-color);
}
::selection {
	color: var(--highlight-fg-color);
	background: var(--highlight-bg-color);
}

*::placeholder { color: var(--gray); opacity: 1; }
*::-moz-placeholder { color: var(--gray); opacity: 1; }
*::-webkit-input-placeholder { color: var(--gray); }
*:-moz-placeholder { color: var(--gray); }
*:-ms-input-placeholder { color: var(--gray); }
*::-ms-input-placeholder { color: var(--gray); }


/* === FONTS ... do NOT use font-display: swap !!! */

/* see header preload */
@font-face {
	font-family: "RMono";
	src: url("./fonts/RMono/RMono.woff2") format('woff2'),
		url("./fonts/RMono/RMono.woff") format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 200;
	src: url("./fonts/Inter/inter-v18-latin-200.woff2") format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 200;
	src: url("./fonts/Inter/inter-v18-latin-200italic.woff2") format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	src: url("./fonts/Inter/inter-v18-latin-300.woff2") format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 300;
	src: url("./fonts/Inter/inter-v18-latin-300italic.woff2") format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url("./fonts/Inter/inter-v18-latin-regular.woff2") format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 400;
	src: url("./fonts/Inter/inter-v18-latin-italic.woff2") format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	src: url("./fonts/Inter/inter-v18-latin-500.woff2") format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 500;
	src: url("./fonts/Inter/inter-v18-latin-500italic.woff2") format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	src: url("./fonts/Inter/inter-v18-latin-600.woff2") format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 600;
	src: url("./fonts/Inter/inter-v18-latin-600italic.woff2") format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	src: url("./fonts/Inter/inter-v18-latin-700.woff2") format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 700;
	src: url("./fonts/Inter/inter-v18-latin-700italic.woff2") format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 800;
	src: url("./fonts/Inter/inter-v18-latin-800.woff2") format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 800;
	src: url("./fonts/Inter/inter-v18-latin-800italic.woff2") format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 900;
	src: url("./fonts/Inter/inter-v18-latin-900.woff2") format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 900;
	src: url("./fonts/Inter/inter-v18-latin-900italic.woff2") format('woff2');
}


/* === LINKS */

a {
	text-decoration: none;
	cursor: pointer;
	outline: 0;
	/*outline: 2px solid red;
	outline-offset: 2px;*/
}
a, a:link, a:visited {
	color: var(--blue);
}
a:hover {
	color: var(--red);
}


/* === TEXTAREA, SELECT, INPUT */

/* ... */


/* === LABEL, MISC INPUT */

/* ... */


/* === BUTTON */

/* ... */


/* === INLINE STYLES */

.bg { background: var(--bg-color); }
.base {
	min-height: 1px;
	display: flex;
	flex-direction: column;
	height: 100vh;
	align-items: center;
	vertical-align: middle;

	font-family: 'RMono';
	font-size: 16px;
	font-weight: 400;
	color: var(--black);
}

/*.html-1	{ overflow-y: hidden; }
.body-1		{ height: 100%; overflow-y: hidden; }*/

.notify		{ color: var(--green); }
.break		{ height: 1em; }
.italic		{ font-style: italic; }
.hidden		{ display: none; }
.hidden-i	{ display: none !important; }
.invis		{ visibility: hidden !important; }

/*.ta-cen, .ta-cen > * { text-align:center; }
.ta-jus, .ta-jus > * { text-align:justify; }
.al-cen, .al-cen > * { align-items:center; }*/

.p-rel		{ position: relative; }
.p-abs		{ position: absolute; left: 0px; top: 0px; }
.ww-bw		{ word-wrap: break-word; }
.no-wrap	{ white-space: nowrap; }
.overlay	{ z-index: -100; position: absolute; }
.ell		{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky		{ position: -webkit-sticky; position: sticky; overflow-anchor: none; top: 0; }

.video {
	width: 100%;
	aspect-ratio: 16 / 9;
	max-width: 800px;
	/*height: 450px;*/
	display: flex;
	justify-content: center;
	padding: 0;
	margin: 0 auto;
	border: none;
	border-radius: 0px;
}

.btm-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: var(--blue);
	color: var(--bg-color);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--bar-height);
	font-size: 14px;
}
.ticker				{ position: absolute; overflow: hidden; white-space: nowrap; min-width: 200%; width: auto; margin-top: 2px; }
.ticker-track		{ display: flex; }
.ticker-track > div	{ padding-right: 2em; min-width: 50%; width: auto; }

.c {
	display: flex;
	flex-direction: row;
	gap: 20px;
	align-items: start;
	/*align-items: safe center;*/
	width: 100%;
	height: 100%;
	flex: 1 1 0;
	overflow-y: scroll;
}
.c > * {
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	margin: auto;
}

/* 355px 800px 1000px 1400px */
/* Use @media "max-..." only. */

.base	{ font-size: 16px; }
	@media (max-width: 1000px) {.base { font-size: 14px; }}
	@media (max-width: 355px) {.base { font-size: 13px; }}
.d-0	{ min-height: 500px; }
	@media (max-width: 1000px) {.d-0 { min-height: 400px; }}
.d-1	{}
.d-2	{ display: flex; height: 360px; justify-content: flex-end; }
	@media (max-width: 1000px) {.d-2 { min-height: 290px; max-height: 290px; }}
	@media (max-width: 800px) {.d-2 { justify-content: center; padding-left: 10px; }}
	@media (max-width: 355px) {.d-2 { min-height: 170px; max-height: 170px; padding-left: 4px; }}
.d-3	{ width: fit-content; white-space: nowrap; padding-top: 96px; padding-left: 0px; height: 360px; } 
	@media (max-width: 1000px) {.d-3 { padding-top: 107px; }}
	@media (max-width: 800px) {.d-3 { padding-top: 60px; }}
	@media (max-width: 355px) {.d-3 { padding-top: 50px; white-space: wrap; padding-right: 5px; }}
.d-3a	{ display: block !important; }
	@media (max-width: 355px) {.d-3a { display: none !important; }}
.d-3b	{ display: none !important; }
	@media (max-width: 355px) {.d-3b { display: block !important; }}
.d-4	{ display: flex !important; }
	@media (max-width: 1400px), (max-height: 800px) {.d-4 { display: none !important; }}
.d-5	{ flex-direction: row; gap: 100px; padding-left: 50px; max-width: 1200px; max-height: 900px; }
	@media (max-width: 1000px) {.d-5 { gap: 60px; padding-left: 25px; }}
	@media (max-width: 800px) {.d-5 { flex-direction: column; gap: 0px; padding-left: 0px; min-height: 510px; height: 510px; }}
	@media (max-width: 355px) {.d-5 { min-height: 358px; height: 358px; }}
.d-6	{ justify-content: center; padding-bottom: var(--bar-height); flex: 1 1 fit-content; }
	@media (max-width: 800px) {.d-6 { padding-top: 45px; padding-bottom: 70px; margin-block: auto; }}