/*
@font-face { font-display: swap; font-family: "FSEX300"; src: url("./FSEX300.ttf"); }
*/

:root {
--font-family: Menlo, Consolas, "Courier New", monospace, Verdana;
--fontSize: .95em;
@media (min-width: 516px) {
--fontSize: 1.1em;
}
--fontSizeSmall: .8rem;
--fontSizePre: .6rem;
--lineHeight: 1.7;
--padding: 1rem;
--paddingDouble: calc(var(--padding) * 2);
--h1Size: calc( var(--fontSize) * 2.25 );
@media (min-width: 516px) {
--h1Size: calc( var(--fontSize) * 3 );
}
@media (min-width: 516px) {
--paddingDouble: calc(var(--padding) * 3);
}
--paddingHalf: calc(var(--padding) / 2);
--paddingSmall: calc(var(--padding) / 3);
--size: 240px;
--decalOuter: 22px;
--sizeOuter: calc(var(--size) + var(--decalOuter));
--strokeWidth: 1px;
--strieSize: 2px;
@media (min-width: 516px) {
--size: 340px;
--decalOuter: 29px;
--strieSize: 2.5px;
}
--cornerHeight: var(--paddingDouble);
--cornerSizeH: 4px;
--cornerSizeV: 3px;
}

:root {
--bgColor1: rgb(   5,  10,   5);
--bgColor2: rgb(  15,  30,  15);
--rgbNormal:      45, 205, 115;
--rgbDark:         0,  95,   0;
--rgbInv:        255, 125,   0;
--fontColorNormal: rgba(var(--rgbNormal), .7);
--fontColorDark: rgba(var(--rgbDark), .8);
}

/******************
 * BACK
 *****************/

html, body {height: 100%;padding: 0;margin: 0;border: none;}
html {background-color: var(--bgColor2);scrollbar-color: var(--fontColorDark) transparent;scrollbar-width: thin;-webkit-text-size-adjust: 100%;text-size-adjust: none;}
::selection {background: var(--fontColorDark);text-shadow: none;}

body {overflow-x: hidden;overflow-y: scroll;}
@media (hover: none) {
html, body {overflow-x: hidden;overflow-y: scroll;overscroll-behavior-y: none;}
}

/******************
 * CRT EFFECT
 *****************/

#bgStries {position: fixed;inset: 0;z-index: -1;background-image: repeating-linear-gradient(to bottom,var(--bgColor1) 0px, var(--bgColor1) var(--strieSize), var(--bgColor2) var(--strieSize), var(--bgColor2) calc(var(--strieSize) * 2));pointer-events: none;}
@keyframes glowPulse {0%, 100% {opacity: 0;} 50% {opacity: 1;}}
#bgLine {position: fixed;z-index: 3;left: 0;top: 100%;width: 100%;height: 2px;background: rgba(var(--rgbNormal), 0.29);animation: driftUpLoop 20s linear infinite, flickerSoft 0.30s steps(2) infinite;pointer-events: none;}
@keyframes driftUpLoop {from {transform: translateY(0);}to {transform: translateY(-100vh);}}
@keyframes flickerSoft {0% {opacity: 0.12;} 40% {opacity: 0.22;} 70% {opacity: 0.15;} 100% {opacity: 0.18;}}
body::before {content: " ";display: block;position: fixed;inset: 0;z-index: 4;top: 0;left: 0;background: radial-gradient(ellipse at center, transparent 70%, var(--bgColor1) 100%);box-shadow: inset 0 0 var(--paddingDouble) 0 var(--bgColor1);opacity: .5;pointer-events: none;}
@media (min-width: 516px) {
body::before {background: radial-gradient(ellipse at center,transparent 60%,var(--bgColor1) 100%);}
}
body::after {content: " ";position: fixed;inset: 0;z-index: 5;background: radial-gradient(ellipse at center,rgba(255,0,0,0.04),rgba(0,0,0,0) 60%),radial-gradient(ellipse at center,rgba(0,0,255,0.03),rgba(0,0,0,0) 65%);mix-blend-mode: screen;filter: brightness(0.95) contrast(1.15) saturate(0.85);pointer-events: none;}
.graphismLow #bgStries,
.graphismLow #bgLine,
.graphismLow #bgGlow,
.graphismLow::before,
.graphismLow::after {display: none;}

/******************
 * MAIN TAGS
 *****************/

body {color: var(--fontColorNormal);text-shadow: 0 0 5px rgba(var(--rgbNormal), .33);cursor: default;}
.graphismLow body {text-shadow: none;}
body, pre, code {font-family: var(--font-family);}
body, p, li, code {font-size: var(--fontSize);}
h1, h2, h3, h4, p, li, th, td, pre, code, svg, text, a {line-height: var(--lineHeight);-webkit-font-smoothing: antialiased;opacity: .9;}

h1 {font-size: var(--h1Size);padding: var(--paddingDouble) var(--padding);margin: 0;text-shadow: 0 0 7px rgba(var(--rgbNormal), .44);text-transform: uppercase;letter-spacing: 3px;opacity: 1;}
.graphismLow h1 {text-shadow: none;}
h1 a {color: var(--fontColorNormal);text-decoration: none;outline: none;}

h2, h3, h4 {padding: var(--paddingDouble) 0;margin: 0;opacity: 1;}
h3, h4 {padding-bottom: var(--padding);}
h2 {font-size: calc(var(--fontSize) * 1.22);text-shadow: 0 0 7px rgba(var(--rgbNormal), .44);}
.graphismLow h2 {text-shadow: none;}
h3 {font-size: calc(var(--fontSize) * 1.01);}
h2 + h3 {padding-top: 0;}
h4 {font-size: calc(var(--fontSize) * .98);}

p {padding: var(--padding) 0;margin: 0;}
a {cursor: crosshair;}
em {opacity: .8;}

pre {font-size: .72em;line-height: 1.2em;padding: var(--padding) 0;margin: var(--paddingDouble) 0;text-align: center;}
code {padding: 0 var(--paddingSmall);margin: 0;font-style: italic;}
li pre {margin: var(--paddingDouble) 0 var(--paddingDouble) calc(-1 * var(--padding));}

ul {padding: 0 0 0 var(--padding);margin: 0 0 var(--padding) 0;}
ol {padding: 0 0 0 var(--padding);margin: 0 0 var(--padding) var(--padding);}
@media (min-width: 516px) {v
ul {margin: 0 0 var(--padding) var(--padding);}
ol {margin: 0 0 var(--padding) calc(var(--padding) + var(--paddingHalf));}
}
ul ol, ul ul, ol ul, ol ol {padding: var(--paddingHalf) 0 0 0;margin: 0 0 0 15px;}
li {padding: 0 0 var(--paddingHalf) 0;margin: 0;}

table {width: 100%;margin: var(--paddingDouble) 0;border-collapse: collapse;border: none;border-top: 1px solid var(--bgColor1);}
h3 + table,
h4 + table {margin-top: var(--padding);}
th {font-weight: normal;color: var(--bgColor1);border: 1px solid var(--bgColor1);background: var(--fontColorNormal);box-shadow: 0 0 2px 0 var(--fontColorNormal);}
.graphismLow th {box-shadow: none;}
td {border: 1px solid var(--fontColorDark);}
th, td {font-size: var(--fontSizeSmall);padding: var(--paddingHalf);border-width: 0 1px 1px 0;}
@media (min-width: 516px) {
th, td {font-size: var(--fontSize);padding: var(--paddingHalf) var(--padding);}
}
th:last-child,
td:last-child {border-right: none;}
th:not([align="center"]),
td:not([align="center"]) {text-align: left;}

/******************
 * LAYOUT
 *****************/

/* *** CONTAINER */

.container {border: 1px solid var(--fontColorNormal);box-shadow: 0 0 2px 0 var(--fontColorNormal);}

/* *** HEADER */

#header {position: relative;z-index: 2;padding: var(--paddingDouble) 0;margin: 0 auto;text-align: center;}
@media (min-width: 768px) {
#header {max-width: 768px;}
}

#headerCTA {position: absolute;top: calc( ( var(--paddingDouble) * 2 ) + ( var(--h1Size)  / 2 ) - ( var(--paddingHalf) / 2 ) - ( ( var(--fontSize) * 1.25 ) / 2 ) + 1px );right: 0;padding: 0 var(--padding) 0 0;}


/* *** MAIN */

#main {position: relative;z-index: 2;margin: 0 auto;}
@media (min-width: 768px) {
#main {max-width: 768px;}
}

/* *** FOOTER */

#footer {font-size: 0.7em;padding: 0;margin: 0;text-align: center;}
#footer p {opacity: .7;text-shadow: 0 0 7px rgba(var(--rgbDark), .5);padding-top: 0;}
.graphismLow #footer p {text-shadow: none;}

/* *** SECTION */

.section {position: relative;padding: var(--paddingSmall) var(--padding) var(--paddingDouble) var(--padding);margin: 0 auto var(--padding) auto;border-radius: 1px;}
.section {content-visibility: auto;contain-intrinsic-size: auto 300px;}
.section:last-child {padding-bottom: calc(var(--padding) * 2);}
.section h2 .sub {display: block;}

/******************
 * COMPONENTS
 *****************/

/* *** ACCORDION */

.accordion {padding: var(--paddingHalf);margin: 0 0 var(--paddingHalf) 0;border: none;border-radius: 1px;border: 1px solid var(--fontColorNormal);}
.accordion summary {list-style: none;outline: none;position: relative;}
.accordion summary,
.accordion summary * {cursor: crosshair;}
.accordion summary::-webkit-details-marker {display: none;}
.accordion summary::before {content: ">";display: inline-block;font-weight: bold;font-size: calc(var(--fontSize) * .8);margin: 0 0 0 var(--paddingSmall);color: var(--fontColorDark);transition: transform .2s ease, color .1s ease;}
.accordion[open] summary::before {transform: rotate(90deg);}
.accordion summary h3 {display: inline;padding: 0;margin: 0;font-weight: normal;transition: color .1s ease;}
.accordion summary .visAbsolute {bottom: 50%;margin-bottom: calc(-1 * var(--visSize) / 2);right: 0;}
.accordionContent {opacity: 0;transform: translateY(-4px);transition: opacity 0.2s ease-out, transform 0.2s ease-out;margin: var(--paddingHalf) 0 0 0;padding: var(--padding) var(--paddingSmall);}
@media (min-width: 516px) {
.accordionContent {padding: var(--padding);}
}
.accordion[open] .accordionContent {opacity: 1;transform: translateY(0);}

/* *** BTN */

.btn {display: inline-block;font-size: calc(var(--fontSize) * 1.25);letter-spacing: 0.04em;vertical-align: middle;text-align: center;padding: var(--paddingHalf);color: var(--bgColor2);border-radius: 1px;background: var(--fontColorNormal);box-shadow: 0 0 4px 0 var(--fontColorNormal);text-shadow: none;text-decoration: none;outline: none;transition: background-color .1s ease, border-color .1s ease, box-shadow 0.25s ease;}
.btn.sel {background: var(--fontColorDark);box-shadow: 0 0 4px 0 var(--fontColorDark);}
.graphismLow .btn {box-shadow: none;}
@media (min-width: 516px) {
.btn + .btn {margin-left: var(--padding);}
}

.btn:hover,
.btn:focus,
.btn:active {border-color: transparent;background: var(--signalColor2);box-shadow: 0 0 4px 0 var(--signalColor2);}
@media (hover: none) {
.btn:hover,
.btn:focus,
.btn:active {background: var(--fontColorNormal);box-shadow: 0 0 4px 0 var(--fontColorNormal);}
.btn.sel:hover,
.btn.sel:focus,
.btn.sel:active {background: var(--fontColorDark);box-shadow: 0 0 4px 0 var(--fontColorDark);}
}

/* *** BTN - CTA */

.cta {padding: var(--paddingDouble) 0;text-align: center;}

/* *** BTN - HEAD */

#ctaHead {--ctaHeadPos: calc( var(--paddingDouble) + 1px);}
@media (min-width: 516px) {
#ctaHead {--ctaHeadPos: calc(var(--paddingDouble) + var(--paddingSmall));}
}
#ctaHead {position: absolute;top: var(--ctaHeadPos);right: var(--padding);padding: 0;margin: 0;}
@media (min-width: 769px) {
#ctaHead {right: 0;}
}
#ctaHead .btn {font-weight: bold;line-height: 0.8;float: right;min-width: 20px;margin-left: var(--paddingSmall);}
@media (min-width: 769px) {
#ctaHead .btn {margin-left: var(--padding);}
}

/* *** BTN - CTA MAIN */

.ctaMain .btn {padding: var(--paddingHalf) var(--padding);outline: 1px solid var(--bgColor1);}
.ctaMain .btn {animation: radarPulse 2s ease-out infinite;}
.reanimate .ctaMain .btn {animation: radarPulseAlt 2s ease-out infinite;}
.ctaMain .btn:hover,
.ctaMain .btn:focus,
.ctaMain .btn:active {animation: radarPulseHover 2s ease-out infinite;}
.reanimate .ctaMain .btn:hover,
.reanimate .ctaMain .btn:focus,
.reanimate .ctaMain .btn:active {animation: radarPulseHoverAlt 2s ease-out infinite;}
@media (hover: none) {
.ctaMain .btn:hover {animation: radarPulse 2s ease-out infinite;}
.reanimate .ctaMain .btn:hover {animation: radarPulseAlt 2s ease-out infinite;}
}
.graphismLow .ctaMain .btn {animation: none;}
@keyframes radarPulse { 0% {box-shadow: 0 0 0 0 var(--signalColor1);} 100% {box-shadow: 0 0 0 7px transparent;} }
@keyframes radarPulseAlt { 0% {box-shadow: 0 0 0 0 var(--signalColor1);} 100% {box-shadow: 0 0 0 7px transparent;} }
@keyframes radarPulseHover { 0% {box-shadow: 0 0 0 0 var(--signalColor2);} 100% {box-shadow: 0 0 0 7px transparent;} }
@keyframes radarPulseHoverAlt { 0% {box-shadow: 0 0 0 0 var(--signalColor2);} 100% {box-shadow: 0 0 0 7px transparent;} }

/* *** CORNERS */

.cornerTL,
.cornerTR,
.cornerBL,
.cornerBR {position: absolute;height: var(--cornerSizeH);width: 50%;background: var(--fontColorNormal);opacity: .66;pointer-events: none;}
.cornerTL,
.cornerTR {opacity: .9;}
.cornerTL {top: 0;left: 0;}
.cornerTL::after {top: var(--cornerSizeH);left: 0;}
.cornerTR {top: 0;right: 0;}
.cornerTR::after {top: var(--cornerSizeH);right: 0;}
.cornerBL {bottom: 0;left: 0;}
.cornerBL::after {bottom: var(--cornerSizeH);left: 0;}
.cornerBR {bottom: 0;right: 0;}
.cornerBR::after {bottom: var(--cornerSizeH);right: 0;}
.cornerTL::after,
.cornerTR::after,
.cornerBL::after,
.cornerBR::after {content: " ";display: block;position: absolute;height: var(--cornerHeight);width: var(--cornerSizeV);}
.cornerTL::after,
.cornerTR::after {background: linear-gradient(to bottom, var(--fontColorNormal), transparent);}
.cornerBL::after,
.cornerBR::after {background: linear-gradient(to top, var(--fontColorNormal), transparent);}

.cornerBR + h2,
.cornerBR + h3,
.cornerTR + h2,
.cornerTR + h3 {padding-top: var(--paddingSmall);}

/* *** STATUS */

#titleStatusCursor {background: var(--fontColorNormal);margin: 0 0 0 var(--padding);box-shadow: 0 0 4px 0 var(--fontColorNormal);opacity: 1;animation: titleCursor .5s ease-out infinite;}
.reanimate #titleStatusCursor {animation: titleCursorAlt .5s ease-out infinite;}
@keyframes titleCursor {0% {opacity: 0.4;} 66% {opacity: 1;} 100% {opacity: 0.7;}}
@keyframes titleCursorAlt {0% {opacity: 0.4;} 66% {opacity: 1;} 100% {opacity: 0.7;}}
.graphismLow #titleStatusCursor {display: none;}