:root
{	
	/* teal colors */
	--dark_teal: #298085;
	--darker_teal: #195255;
	--darker_tealB: #0b2425;
	--darkest_teal: #061314;
	
	--dCteal: #39c5cd;
	--dCshadowTeal: #0d3232;
	
	/* misc. colors */
	--dark: #111111;
    --charcoal: #332d3b;
	--deep_purple: #2f263a;
	--bluegrey: #40446a;
    --slate: #585066;
    --violet: #674e8b;
	--purple: #7a4c9e;
	--dusk: #182120;
	--plum: #322040;
    --forest: #155110;
    --sage: #8cba87;
    --mint: #a4e496;
    --teal-grey: #5c9198;
    --aqua: #7ef0eb;
    --crimson: #760026;
    --maroon: #752a4d;
    --rosewood: #ac496f;
    --rose: #e14365;
	--brightRose: #97003a;
	--deeprose: #76214a;
    --coral: #ff8079;
    --peach: #fecdaa;
    --lemon: #f2ef5e;
		
	/* bbs style border */
	/* --ascii_border: #298085; */
	--ascii_border: var(--brightRose);
	
	/* ascii colors */
	--ascii_black:   #000000;
	--ascii_blue:    #0000AA;
	--ascii_green:   #00AA00;
	--ascii_cyan:    #00AAAA;
	--ascii_red:     #AA0000;
	--ascii_magenta: #AA00AA;
	--ascii_brown:   #AA5500;
	--ascii_lightgray: #AAAAAA;
	--ascii_darkgray:  #555555;
	--ascii_lightblue: #5555FF;
	--ascii_lightgreen: #55FF55;
	--ascii_lightcyan:  #55FFFF;
	--ascii_lightred:   #FF5555;
	--ascii_lightmagenta: #FF55FF;
	--ascii_yellow:      #FFFF55;
	--ascii_white:       #FFFFFF;
	
	/* layout */
	--formBorderRadius: 3px;
	--sectionPadding: 24px;
	
	/* misc. */
	--screenshotThumbSize: 150px;
}

/* fonts */
@font-face
{
  font-family: 'Carlito';
  src: url('./fonts/carlito-regular-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body
{
    margin: 0 0 14px 0; /*top, right, bottom, left */
	background: var(--dark);
	color: var(--ascii_lightcyan);	
    display: flex;
    justify-content: center;
    padding: 20px;
}

.wrapper
{
    max-width: 900px;
    margin: auto;
}

.clipped-wrapper
{
    max-width: 900px;
    margin: auto;
	margin-top: 8px;
	background: linear-gradient(180deg, #0b2425, #061314);	
	/* clip-path: polygon(0 20px,20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);*/
	clip-path: polygon(0 20px,20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px));
}

.container
{
    font-family: Courier, monospace;
    width: 100%;
	box-sizing: border-box;
}

.container h2
{
	text-align: center;
	/* font-family: Carlito, sans-serif; */
	font-family: Courier, monospace;
    font-size: 2rem;
    font-weight: bold;
	margin:0;
	padding:12px;
    color: var(--dCteal);
}

.sections
{
	padding: 12px 36px 0 36px; /*top, right, bottom, left */
}

/* ######################## */

header
{
    text-align: center;
}

.header-wrap
{
	margin: auto;
	max-width: 100%;
    padding-bottom: 30px;
    text-align: center;
	box-sizing: border-box;
}

.header-wrap img
{
	margin: auto;
    max-width: 85%;	
	position:relative;
	top:-2px;	
    height: auto;
    border: none;
}

.header-wrap img:hover
{
    border: none;
}

/* ######################## */

img, video
{
    width: 100%;
    height: auto;
    border: 1px solid var(--darker_teal);
    transition: border-color 0.1s;
}

img:hover
{
    border: 1px solid var(--ascii_green);
	cursor: zoom-in;
}



/* ######################## */

.section-split
{
	display: flex;
    flex-wrap: wrap;	
	padding: var(--sectionPadding);	
	border: 4px double var(--dark_teal);
    border-radius: 6px;
    box-shadow: 0 0 16px var(--darker_teal);	
	background: var(--dCshadowTeal);
	color: var(--ascii_lightgreen);
}

.split-left,
.split-right
{
    flex: 1 1 250px;
    padding: 12px;
}

.split-left,
.split-right h2
{
	font-family: Carlito, sans-serif;
    font-size: 2rem;
    font-weight: bold;	
	margin-top: 0px;
    margin-bottom: 15px;
    color: var(--ascii_lightcyan);
}

.split-left,
.split-right h3
{
	font-family: Carlito, sans-serif;
    font-size: 1.6rem;
    font-weight: bold;	
	margin-top: 0px;
    margin-bottom: 18px;
    color: var(--ascii_lightcyan);
}

.split-left,
.split-right p
{
    line-height: 1.35;
}

/* ######################## */

.section-block
{
	margin-top: 20px;
	padding: var(--sectionPadding);
	border: 2px solid var(--darker_teal);
    border-radius: 6px;
    box-shadow: 0 0 16px var(--dark);	
	background: var(--dCshadowTeal);
	color: var(--ascii_lightcyan);
}

.section-block h3
{
	font-family: Carlito, sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
	margin-top: 0px;
    margin-bottom: 18px;
    color: var(--ascii_lightcyan);
}

.section-block p
{
    margin-bottom: 20px;
}

/* ######################## */

.section-block-alt
{
	margin-top: 20px;
	padding: var(--sectionPadding);
	background: var(--dusk);
	color: var(--ascii_lightcyan);
	
	border: 2px solid;
    border-radius: 6px;
    box-shadow: 0 4px 15px var(--dark);
}

.section-block-altB
{
	margin-top: 20px;
	padding: var(--sectionPadding);
	background: var(--dCshadowTeal);
	color: var(--ascii_lightcyan);
	
	border: 2px solid;
    border-radius: 6px;
    box-shadow: 0 4px 15px var(--dark);
}

.section-block-alt h3
{
	font-family: Carlito, sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
	margin-top: 0px;
    margin-bottom: 18px;
    color: var(--ascii_lightcyan);
}

.section-block-altB h3
{
	font-family: Carlito, sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
	margin-top: 0px;
    margin-bottom: 18px;
    color: var(--ascii_lightcyan);
}

.section-block-alt p
{
    margin-bottom: 20px;
}

/* ######################## */
/* image grid */

.image-grid
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--screenshotThumbSize), 1fr));
    gap: 12px;
}

.image-grid img
{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* ######################## */
/* form */
.mailform
{
    text-align:center;
}

.mailform input[type="email"]
{
    padding: 10px;
    width: 260px;
    max-width: 100%;	
    border: 1px dashed var(--teal-grey);
	border-radius: var(--formBorderRadius);	
    background: var(--darker_tealB);
    color: var(--dCteal);
}

.mailform input:focus
{
	border: 1px solid var(--ascii_lightcyan);
	border-radius: var(--formBorderRadius);	
	background: var(--darker_tealB);
	color: var(--ascii_lightcyan);
	outline: none;	
}

.mailform input[type="submit"]
{
    padding: 10px 20px;
	margin: 10px;	
    border: 1px dashed var(--dCteal);
	border-radius: var(--formBorderRadius);	
    background: var(--darker_tealB);
    color: var(--dCteal);	
    cursor: pointer;    
}

.mailform input[type="submit"]:hover
{
	border: 1px solid var(--dCteal);
    border-color: var(--dCteal);	
    background-color: var(--dark_teal);
    color: var(--dCteal);
}

/* ######################## */

.footer-wrap
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    font-family: Courier, monospace;
	font-size: 0.80em;
    color: var(--ascii_cyan);
    height: 100%;
	padding:18px;
}

/* ######################## */
/* horizontal scanline */

.scanline {
    position: relative;
    width: 100%;
    height: 2px;
    margin: 20px 0;
    background: rgba(0, 255, 255, 0.02);
    overflow: hidden;
}

.scanline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(0, 255, 255, 0) 0%,
        rgba(0, 255, 255, 0.25) 50%,
        rgba(0, 255, 255, 0) 100%
    );
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
    animation: scanlineGlow 4s linear infinite alternate;
}

@keyframes scanlineGlow {
    0% {
        left: -50%;
    }
    100% {
        left: 100%;
    }
}

/* ######################## */

/*
ascii-style border - adapted from...
Source - https://stackoverflow.com/a
Posted by Lalji Tadhani
Retrieved 2025-11-30, License - CC BY-SA 4.0
*/
    
.ascii_border
{
	max-width: 860px;
    border: 4px double var(--ascii_border);
	border-top: none;
    margin: auto;
	/* padding: 20px; */
    position: relative;
	top: -20px;
}

/* top left */
.ascii_border::after
{
    /* content: "+┬─"; */
	/* content: "╱┅╵"; */
	content:"┌▞";
    position: absolute;
    left: -6.2px;
    top: -24px;
    font-weight: normal;
    font-size: 16px;
    color: var(--ascii_border);
}

/* top right */
.ascii_border::before
{
    /* content: "─┬+"; */
	/* content: "╵-╲"; */
	content: "▚┐";
    position: absolute;
    right: -6.2px;
    top: -24px;
    font-weight: normal;
    font-size: 16px;
    color: var(--ascii_border);
}

/* bottom left */
.ascii_border .ascii_border_inner::after
{
    content: "▚╵";
    position: absolute;
    left: -8px;
    bottom: -10px;
    font-weight: bold;
    font-size: 18px;
    color: var(--ascii_border);
}

/* bottom right */
.ascii_border .ascii_border_inner::before
{
    content: "╵▞";
    position: absolute;
    right: -8px;
    bottom: -10px;
    font-weight: bold;
    font-size: 18px;
    color: var(--ascii_border);
}

/* existing top corners unchanged */

/* new vertical marks above the corners */
.ascii_border_marks::before {
    content:"│";
    position:absolute;
    left:-6.2px;
    top:-40px;
    font-size:16px;
    color:var(--ascii_border);
}

.ascii_border_marks::after {
    content:"│";
    position:absolute;
    right:-6.2px;
    top:-40px;
    font-size:16px;
    color:var(--ascii_border);
}

/* ################## */

#lightbox
{
	z-index: 9999;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    align-items: center;
    justify-content: center;
}

#lightbox img
{
	z-index: 10000;
    max-width: 90%;
    max-height: 90%;
    border: 1px solid var(--slate);
	cursor: zoom-out;
}

/* ################## */

.game-links-row
{
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    width: 100%;
}

.game-link
{
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 14px;

    background: rgba(0,0,0,0.25);
    color: var(--ascii_lightcyan);
    text-decoration: none;

    border: 1px solid var(--slate);
    border-radius: 6px;

    font-family: Carlito, sans-serif;
    font-size: 1.1rem;

    transition: background 0.2s linear, border-color 0.2s linear, transform 0.15s linear;
    white-space: nowrap;
}

.game-link img
{
	border:none;
    width: 20px;
}

.game-link img:hover
{
    border:none;
}

.game-link:hover
{
    background: rgba(255,255,255,0.08);
    border-color: var(--ascii_lightcyan);
    transform: translateY(-2px);
}

/* credits */
/* https://svgstack.com/icon/patreon-logo-5106 - Made by SVG Stack */