/***** BIG BOYS *****/

/*** THEME COLORS ***/
@media (prefers-color-scheme: dark) {
  :root {
	--acc: #FFC131;
	--accb: #045F62;
	--txt: #FAF2D8;
	--bg: #072222;
	--card: rgba(1, 19, 20, 1);
	--opacity: 0.8;
	--switch: "dark";
	--align: left;
}

.toggle {
	--card: rgba(249, 247, 241, 1);
	--txt: #072222;
	--bg: #FAF2D8;
	--accb: #FFC131;
	--acc: #045F62;
	--opacity: 1;
	--switch: "light";
	--align: right;
}

}

@media (prefers-color-scheme: light) {
  :root {
	--acc: #045F62;
	--accb: #FFC131;
	--txt: #072222;
	--bg: #FAF2D8;
	--card: rgba(249, 247, 241, 1);
	--opacity: 1;
	--switch: "light";
	--align: right;
	scroll-behavior: smooth;
}

.toggle {
	--acc: #FFC131;
	--accb: #045F62;
	--txt: #FAF2D8;
	--bg: #072222;
	--card: rgba(1, 19, 20, 1);
	--opacity: 0.8;
	--switch: "dark";
	--align: left;
}

}

@font-face {
	font-family: 'Orbitron';
	src: url('orbitron_light.woff2') format('woff2'), 
		 url('orbitron_light.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Orbitron';
	src: url('orbitron_bold.woff2') format('woff2'), 
		 url('orbitron_bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Space Grotesk';
	src: url('spacegrotesk-regular.woff2') format('woff2'),
		 url('spacegrotesk-regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Space Grotesk';
	src: url('spacegrotesk-bold.woff2') format('woff2'),
		 url('spacegrotesk-bold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

:root {
	--fonthead: 'Orbitron', sans-serif;
	scroll-behavior: smooth;
}

::selection {
  color: var(--card);
  background: var(--acc);
}


/*** GENERAL ***/
body {
	font-family: 'Space Grotesk', sans-serif;
	margin: 0;
	line-height: 1.6;
	background-attachment: fixed;
	color: var(--txt);
	background-color: var(--bg);
	overflow-x: hidden;
	font-size: 1rem;
}

a {
	color: var(--acc);
	transition: all 0.3s ease;
	font-weight: bold;
}

a:hover {color: var(--light); background: var(--accb);}

header a, footer a, button a, nav a, .row.gallery a, a.big, .btn a {text-decoration: none;}

h1, h2, h3, h4, h5 {font-family: var(--fonthead); font-weight: bold;}

h1 {
	font-size: 2rem;
	background: var(--acc);
	color: var(--card);
	display: block;
	padding: .5rem 1rem;
	border: 5px solid var(--accb);
	margin-bottom: 3rem;
	box-shadow: -10px 10px 0 var(--accb);}
	

h2 {
	background: var(--accb);
	padding: .5rem 5rem .5rem 1rem;
	margin: .5rem 0 1rem -2.3rem;
	display: inline-block;
	box-shadow: -5px 5px 0 var(--acc);
}

h2::after, h1::after {content: "_";}

h1::before {content: "> ";}

h3 {margin-bottom: 0px; color: var(--acc);}

img {opacity: var(--opacity); transition: all 0.2s ease;}

img:hover {opacity: 1;}

ul {
	padding-left: 15px;
	list-style-type: square;
}

strong {font-weight: 700;}

summary {padding: 10px; background: var(--accb); font-weight: bold; cursor: pointer;}

/*** CUSTOM TEXT THINGS ***/
.accent {color: var(--acc);}

.bg-accent {background: var(--acc);}

.accentb {color: var(--accb);}

.bg-accentb {background: var(--accb);}

.warning {color: #DA553A; font-weight: bold;}

.bg-warning {background: #DA553A; padding: 10px;}

.big {font-family: var(--fonthead); font-size: 1.5rem; color: var(--acc); margin: 0;}

.subtitle, .big {font-weight: bold; position: relative; z-index: 9;}

.text-center {text-align: center;}

.text-right {text-align: right;}

.w-100 {width: 100%;}

/* *** MAIN BUILDING BLOCKS *** */
main {
	max-width: 1100px;
	margin: -70px auto 0;
	padding: 0 2rem;
}
	
.nav-items a, footer a {text-decoration: none;}

header.sticky {z-index: 999;}

.sticky {position: sticky; top: 0;}

.banner {
	min-height: 70vh;
	text-align: center;
	display: flex;
	justify-content: start;
	align-items: center;
	background-image: url(/art/2home-banner.webp);
	background-size: cover;
	background-size: no-repeat;
	background-position: center;
	margin-top: -26px;
	border-bottom: 5px solid var(--accb);
}

.banner img {
	margin: 50px auto;
	max-width: 800px;
	opacity: 1;
}

header img.charalogo {
	margin-top: 16vh;
	max-width: 650px;
}

footer {
	text-align: right;
	background: var(--accb);
	color: var(--light);
	padding: 1.5rem 2rem;
	border-top: 4px var(--acc) solid;
	z-index: 999999;
	display: flex;
	justify-content: space-between;
	flex-flow: row-reverse wrap;
}

footer p {margin: 0;}

.footnav {display: none;}

.footer {
	z-index: 9999999;
	position: relative;
}

/* *** NAVIGATION *** */
#nav {
	background: var(--accb);
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	z-index: 999;
	border-bottom: 4px var(--acc) solid;
}

.nav-items {
	display: flex;
	flex-flow: row wrap;
	flex: 1 1 0;
	justify-content: left;
	align-items: center;
	margin-left: 1.2rem;
	z-index: 999999999;
}

.nav-items a {padding: .5rem .7rem;}

.nav-items a, .nav-toggle {
	font-size: 1rem;
	text-align: center;
	font-weight: bolder;
	font-family: var(--fonthead);
}

.nav-items a:hover {
	color: var(--txt);
	text-decoration: underline 3px;
}

.nav-title {
	font-family: var(--fonthead);
	font-size: 1.6rem;
	font-weight: bold;
	padding: 10px 20px;
	margin-top: 5px;
	margin-bottom: -20px;
	z-index: 9999999999999;
}

.nav-title:hover {
	background: none;
	text-decoration: underline 3px;}

.nav-toggle {
	color: var(--accb);
	cursor: pointer;
	border-width: 4px;
	border-color: var(--acc);
	border-style: solid;
	margin: 0 1rem;
	background: 0;
	padding: .2rem 0;
	min-width: 100px;
	text-align: var(--align);
}

.nav-toggle:before {
	content: var(--switch);
	background: var(--acc);
	padding: .4rem .7rem;
}

/* *** SECTION AND SECTION CONTENT *** */
.section {
	padding: 1rem 1.5rem;
	background-color: var(--card);
	box-shadow: -5px 5px 0 var(--accb);
	margin-bottom: 3rem;
	border: 3px solid var(--accb);
}

.sideimg {padding: 0; min-height: 300px;}

.sideimg img {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}

.btn {
	display: inline-block;
	padding: .5rem 1rem;
	background: var(--accb);
	transition: all 0.3s ease;
	color: var(--acc);
	box-shadow: -4px 4px 0 var(--acc);
	text-decoration: none;
	font-family: var(--fonthead);
	margin: 1rem auto;
}

.btn:hover {
	background: var(--acc);
	color: var(--accb);
	box-shadow: -4px 4px 0 var(--accb);
}

.warn h2 {
	background: var(--acc);
	box-shadow: -5px 5px 0 var(--accb);
	color: var(--card);
}

.warn h2::before, .warn h2::after {
	content: "! !";
	margin: 0 0.5rem;
}


/* *** FLEX *** */
.flex {display: flex;}

.row {
	display: flex;
	flex-flow: row wrap;
}

.reverse {flex-direction: row-reverse;}

.gutters {
	column-gap: 2rem;
}

.col {flex: 1 0 51%;}

.col-1 {flex: 1 0 16.33%;}

.col-2 {flex: 1 0 33.33%;}

.col-3 {flex: 1 0 50%;}

.col-4 {flex: 1 0 66.67%;}

.col.sideimg {flex: 1 0 30%;}

/* *** GALERYA *** */

/* GALLERY TABS ALT */
.thumb img {
	max-height: 100px;
	max-width: 100px;
}

.thumb a {text-decoration: none;}

.tabwrap {text-align: center;}

.tabwrap section {
	display: none;
}

.tabwrap section:target {
	display:block;
}

.tabwrap img {max-width: 100%; max-height: 75vh;}

.tabwrap p {text-align: left;}

.tabwrap h2 {margin: 0 0 25px; padding-top: 20px;}

.tabwrap section {padding-top: 5rem; margin-top: -3rem;}

.tabwrap .nav-btn {text-align: center; margin-top: 2rem; margin-bottom: 2rem;}

.tabwrap .nav-btn a {
	margin: 1rem .5rem 0;
	text-align: center;
	color: var(--acc);
	background: var(--accb);
	transition: all 0.3s ease;
	padding: .5rem 1rem;
	text-decoration: none;
	box-shadow: -3px 3px 0 var(--acc);
}

.tabwrap p {text-align: center;}

.nav-btn a:hover {background: var(--acc); color: var(--accb); box-shadow: -3px 3px 0 var(--accb);}

.art {height: 65vh;}

.art img {object-fit: contain; object-position: center; height: 100%; width: 100%;}

.thumb a:hover {background: none;}

.thumb img {margin: .2rem;}

.thumb img:hover {box-shadow: -4px 4px 0 var(--acc);}

.thumb.sticky {top: 4.5rem; margin: 20px 0;}

/* *** ROW DOT MAINCHAR BULLSHIT *** */
.row.mainchar, .char {
	justify-content: center;
}

.mainchar a {text-decoration: none;}

.mainchar .col, .char a {
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	text-align: center;
	transition: all 0.3s ease;
}

.mainchar .icon {
	height: 300px;
	width: 190px;
	overflow: hidden;
	margin: 1.5rem auto;
}

.icon, .thumb img {
	transition: all 0.3s ease;
	box-shadow: -5px 5px 0 var(--acc);
	border: 3px solid var(--acc);
	background: var(--acc);
}

.mainchar div img {
	object-fit: cover;
	object-position: center;
	width: 100%;
	height: 100%;
}

.row.mainchar .big, .char .big {
	margin: 1rem auto 0;
	text-align: center;
	color: var(--acc);
	transition: all 0.3s ease;
	padding: 0 .5rem;
}

.mainchar p {margin-top: 0;}

.row.mainchar a:hover, .char a:hover {background: none;}

.row.mainchar a:hover .big, .char a:hover .big, .shippy .big:hover {color: var(--accb); background: var(--acc); padding: 0 1rem;}

.row.mainchar a:hover .icon, .char a:hover .icon, .thumb img:hover, .shippy .icon:hover {transform: scale(1.1);}

/* ROW DOT CHAR */
.char > section {
	display: flex;
	margin: 10px 20px;
	flex-flow: column wrap;
}

.char .icon {
	height: 170px;
	width: 170px;
	margin-bottom: 10px;
}

.char a {
	margin: 0 auto;
	text-align: center;
	text-decoration: none;
	color: var(--accb);
	transition: all 0.3s ease;
}

.char p {margin-top: .3rem;}

/* *** CHAR PROFILE RELATIONS *** */
.shippy > .row {justify-content: center;}

.shippy .icon {height: 150px; width: 150px; margin: 1rem auto 1rem .5rem;}

.shippy img {width: 100%}

.shippy .row.up .cyberborder {margin-left: 15px;}

.shippy .up.flip .cyberborder {margin-left: 0; margin-right: 15px;}

.shippy .description {margin: 1rem 0;}

.shippy .gutters {column-gap: 1.5rem;}

.shippy .cyberborder, .shippy .cyberline {border-color: var(--accb);}

.shippy .subtitle {margin-top: 0; font-weight: normal;}

/* *** CYBER STUFF *** */
/* HEADER CYBER SOLID */
header .cyber {
	background: var(--accb);
	height: 20px;
	width: 10rem;
	margin: -5px auto 0 0;
}

/* HEADER CYBER BORDER */
header .down.cyberborder {
	width: 8.5rem;
	height: 15px;
	margin-top: -4px;
	z-index: 99999;
	transform: skewX(-55deg);
	border-width: 0 10px 4px 0;
	position: absolute;
}

/* FOOTER CYBER SOLID */
.footer .cyber-alt {
	margin: 0 0 -5px auto;
	background: var(--accb);
	height: 20px;
	width: 10rem;
}

/* FOOTER CYBER BORDER */
.footer .up.cyberborder {
	width: 8.5rem;
	height: 15px;
	right: 3px;
	z-index: 99999;
	transform: skewX(-55deg);
	border-width: 4px 0 0 10px;
	position: absolute;
}

/* CYBER - HEADER */
.cyber {
	clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
	padding: 5px;
	z-index: 999;
}
/* CYBER - FOOTER */
.cyber-alt {
	clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
	padding: 5px;
	z-index: 999;
}

/* CYBER DIVIDER (THE SKEWED SHAPE THING) */
.cyberborder {
	border-style: solid;
	border-color: var(--acc);
	transform: skewX(40deg);
	padding: 5px;
	height: 20px;
	width: 100%;
}

/* CYBER DIVIDER HR */
.cyberline {
	width: 100%;
	border-color: var(--acc);
	border-width: 0 0 3px;
}

.row.up {margin-bottom: -20px;}

.up .cyberborder, .up.cyberborder {border-width: 4px 3px 0 0;}

.up.flip .cyberborder {border-width: 4px 0 0 3px; transform: skewX(-40deg);}

.up .cyberline {margin: 32px 0 0 12px;}

.up.flip .cyberline {margin: 32px 12px 0 0;}

.row.down {margin-top: -15px;}

.down .cyberborder, .down.cyberborder {border-width: 0 0 4px 2px;}

.down .cyberline {margin: 0 12px 32px 0;}

.cyberborder {flex: 0 0 20%;}
	
.cyberline {flex: 1 1 0;}

/* *** CHAR PROFILE STYLES *** */
.gen-info {padding-top: 1rem;}

.gen-info p {margin: 0 0 3px;}

.gen-info strong {text-transform: uppercase; color: var(--acc);}

.quote {
	background: var(--accb);
	padding: 1.5rem;
	margin: 0 0 3rem;
	box-shadow: -5px 5px 0 var(--acc);
	font-size: 1.2rem;
	font-family: var(--fonthead);
}

u {text-decoration: underline 2px var(--accb);}
@media (max-width: 960px) {
	
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col {flex: 1 0 calc(100% - 3.5rem);}
	
	.main-content {padding-bottom: 0;}
	
	.banner img, .banner img.charalogo {max-width: 80%;}
	
	.relation {padding: 0 30px;}
	
	.thumb.sticky {top: 0;}
	
	.shippy .icon {margin: 1rem auto;}
}

@media (max-width: 768px) {
	
	.cyberborder {flex: 0 0 45%;}
	
	.row.up {flex-flow: row wrap;}
	
	main {padding: 0 15px 0 20px;}
	
	#nav {flex-flow: column-reverse wrap; align-items: start; justify-content: start;}
	
	.nav-title {margin-left: 0; margin-bottom: -20px; padding-top: 0;}
	
	.nav-items {margin-left: .5rem;}
	
	.nav-toggle {position: absolute; right: -1rem; bottom: 27px; width: auto;}
	
	.section {margin-bottom: 25px; padding: .5rem 1rem;}
	
	.sideimg {padding: 0;}
	
	.banner {min-height: 40vh;}
		
	.banner img, .banner img.charalogo {margin: 70px auto;}
	
	.sticky {position: relative;}
	
	.tabwrap section {padding-top: 15px; margin-top: 0;}
	
	.art {height: 60vh;}
	
	footer {
		flex-flow: column wrap;
		justify-content: start;
		padding: 15px;
	}
	
	h2 {
	padding: .5rem 2rem .5rem 1rem;
	margin: .5rem 0 .5rem -1.8rem;
	}
	
	.container {overflow-x: hidden;}

}