/* @import url('https://fonts.googleapis.com/css2?family=Cantata+One&family=Noto+Serif:wght@400;700&display=swap'); */

/*** THEME COLORS ***/
@media (prefers-color-scheme: dark) {
  :root {
	--acc: #FC7425;
	--accb: #36817B;
	--txt: #EFD6AC;
	--bg: #04151F;
	--card: #091F25;
	--opacity: 0.8;
	--gradient: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
	--bgimg: url('/art/2home-bgdark.webp');
	--switch: url('/art/lightson.png');
}

.toggle {
	--acc: #36817B;
	--accb: #FC7425;
	--txt: #020C12;
	--bg: #FFFFFF;
	--card: #FCF7EE;
	--opacity: 1;
	--gradient: linear-gradient(rgba(248, 210, 210, 0.5), rgba(255, 255, 255, 0.7));
	--bgimg: url('/art/2home-bglight.webp');
	--switch: url('/art/lightsoff.png');
}

}

@media (prefers-color-scheme: light) {
  :root {
	--acc: #36817B;
	--accb: #FC7425;
	--txt: #020C12;
	--bg: #FFFFFF;
	--card: #FCF7EE;
	--opacity: 1;
	--gradient: linear-gradient(rgba(248, 210, 210, 0.5), rgba(255, 255, 255, 0.7));
	--bgimg: url('/art/2home-bglight.webp');
	--switch: url('/art/lightsoff.png');
}

.toggle {
	--acc: #FC7425;
	--accb: #36817B;
	--txt: #EFD6AC;
	--bg: #04151F;
	--card: #091F25;
	--opacity: 0.8;
	--gradient: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.9));
	--bgimg: url('/art/2home-bgdark.webp');
	--switch: url('/art/lightson.png');
}

}

::selection {
  color: var(--card);
  background: var(--accb);
  text-shadow: 0 0 0 ;
}

:root {
	--fonthead: 'Cantata One', 'Noto Serif', serif;
	scroll-behavior: smooth;
}

body {
	background-image: var(--bgimg);
	background-color: var(--bg);
	background-position: left center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--txt);
	font-family: 'Noto Serif', serif;
	transition: all 0.2s ease;
	
}

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

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

a {color: var(--acc); transition: color 0.2s ease; text-decoration: underline 2px; font-weight: bold;}

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

h1 {font-size: 2.5rem; margin-bottom: 20px; margin-top: -67px; text-shadow: -4px 0 0 var(--card);}

h2 {font-size: 2rem; margin-bottom: 15px; margin-top: -60px; text-shadow: -4px 0 0 var(--card);}

h3 {font-size: 1.4rem; margin-bottom: 10px;}

h2 span {position: relative; z-index: 99;}

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

img:hover {opacity: 1;}

/* -- MAIN LAYOUT STUFF -- */

header {position: sticky; top:0; z-index: 999;}

aside .logo {
	max-width: 80%;
	margin-bottom: 30px;
	opacity: 1;
}

aside .side-content {
	position: sticky;
	top: 0;
	padding: 0 2rem;
	margin-top: -80px;
	display: flex;
	flex-flow: column wrap;
	align-items: end;
	justify-content: end;
	height: 95vh;
}

footer {background: var(--card); padding: 30px; margin: 0 30px; text-align: center;}

main {
	padding-top: 80px;
	flex: 1 0 50%;}
	
details {margin-bottom: 20px;}

summary {
	color: var(--acc);
	cursor: pointer;
	font-weight: bold;
	font-size: 1.2rem;
	transition: all 0.2s ease;
}

summary:hover {color: var(--accb);}

summary.bg-warning {
	padding: 15px;
	color: #ffffff;
	text-align: center;
	cursor: pointer;
}

details.section {padding: 0;}

details ul {padding-bottom: 20px;}

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

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

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

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

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

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

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

.bg-warning h2 {margin-top: 20px;}

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

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

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

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

.m-0 {margin: 0;}

.subtitle {margin-top: 0;}

/* NAVIGATION */
#nav {
	background: var(--card);
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	font-weight: bold;
	margin-bottom: -20px;
	backdrop-filter: blur(3px);
}

.nav-title {
	font-family: var(--fonthead);
	font-size: 1.3rem;
	font-variant: small-caps;
}

.nav-items {
	display: flex;
	flex-flow: row wrap;
	flex: 1 1 0;
	align-items: center;
}

nav a {
	padding: 10px 20px;
	transition: all 0.2s ease;
	text-decoration: none;
	z-index: 2;
}

nav a:hover {
	text-decoration: underline 2px;
}

.footnav {display: none;}

/* GLOBAL STUFF */

.section {
	padding: 30px 25px 25px;
	margin: 0 30px 60px;
}

.card {
	background: var(--card);
	position: relative;
	z-index:1;
	transition: all 0.5s ease;
}

.darken {
	background: var(--gradient);
	background-attachment: fixed;
}

.btn {
	background: var(--acc);
	border: none;
	padding: 10px;
	font-family: 'Noto Serif', serif;
	font-size: 1rem;
	font-weight: bold;
	color: var(--card);
	margin: 15px 0 0;
	transition: all 0.2s ease;
	display: inline-block;
	text-decoration: none;
}

.btn:hover {background: var(--accb); color: var(--txt);}

.themebtn {
	background: var(--card);
	border: none;
	padding: 8px;
	font-size: 1rem;
	font-weight: bold;
	margin: 15px 0;
	transition: all 0.2s ease;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	position: absolute;
	z-index: 99;
	bottom: 0;
	left: 0;
}

.themebtn:hover {
	background: var(--acc);
}

.themebtn:before {
	content: var(--switch);
}

/* FLEX */
.row {
	display: flex;
	flex-flow: row wrap;
}

.gutters {column-gap: 2rem;}

.col {flex: 1 0 45%;}

.inline-block {display: inline-block;}

.block {display: block;}

.hide {display: none;}

.align-center, .center {align-items: center;}

.justify-center, .center {justify-content: center;}

/* OTHER STUFF */
aside.col {flex: 1 0 50%;}

.charahome {
	transition: all 0.5s ease;
	flex: 0 0 45%;
	margin-top: 1rem;
}

.charahome a:hover img {
	box-shadow: 0 0 0 5px var(--accb);
	opacity: 1;
}
.name {margin-bottom: 0; font-size: 3rem; line-height: 4rem; font-weight: bold; text-shadow: -2px 2px 0 var(--accb);}

.info-row {margin-bottom: 10px; padding: 0 10px;}

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

.quote {background: var(--accb); font-size: 1.3rem; font-weight: bold; padding: 15px; text-align: center; margin-top: -20px;}

.ref {width: 100%; margin-bottom: 20px;}

.update {font-size: 0.9rem;}

ul.playlist {list-style-type: "▶"; margin-top: 20px;}

ul.playlist > li {padding-left: 10px; margin-bottom: 10px;}

/* GALLERY ICONS - for character thumbs */
.gallery.gutters {
	row-gap: 20px;
}

.row.gallery {
	justify-content: center;
	text-align: center;
}

.row.gallery p {
	margin-top:0;
}

.row.gallery a {text-decoration: none;}

.col a {display: inline-block;}

.row.gallery .icon {height: 150px; width: 150px; margin-bottom: -5px;}

.icon:hover {
	box-shadow: 0 0 0 5px var(--accb);
	opacity: 1;}

.row.gallery .gallery-col div {
	margin: 8px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.gallery-col {flex: 0 0 45%;}

/* GALLERY VIEW - art gallery */
.tabwrap section {
	display: none;
}

.tabwrap section:target {
	display:block;
}

.tabwrap section {padding-top: 3.5rem; margin-top: -2rem;}

.tabwrap .art {height: 63vh;}

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

.tabwrap p {text-align: center;}

.thumb img {
	max-height: 100px;
	max-width: 100px;
	margin: 5px;
}

/* SHIPS */
.ships .icon {height: 120px; width: 120px;}

.ships .icon:hover {box-shadow: 0 0 0 10px var(--accb);}

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

.ships .big {margin-bottom: 0; text-decoration: underline 2px;}

.ships .row {margin-bottom: 1rem;}

.ships section:nth-child(odd) {text-align: right; flex-flow: row-reverse wrap;}

/* RESPONSIVE */
@media (max-width: 960px) {
	body {background: var(--bg); background-attachment: scroll; flex-direction: column;}
	
	.darken {background-attachment: scroll;}
	
	.ships .col {flex: 1 1 0;}
	
	.text-right-center {text-align: center;}
  
	#nav {
		display: none;
	}
	
	footer {margin: 0 15px; padding: 20px;}
	
	.footnav {display: block;}
	
	footer p {margin-bottom: 10px;}
	
	.charadoll {height: 500px;}
	
	.gallery-col {flex: 0 0 100%;}
	
	aside {background-image: var(--bgimg); background-size: cover; background-position: left -80px center;}
	
	aside .logo {max-width: 100%;}
	
	aside .side-content {background-image: var(--gradient); margin-top: -70px; padding: 30px; height: 103vh;}
	
	main {padding-top: 50px; flex: 0 0 100%;}
	
	.tabwrap section {padding-top: 1rem; margin-top: 0;}
}

@media (max-width: 768px) {
	ul.playlist {padding-left: 20px;}
	
	.col {flex: 0 0 100%;}
	
	.ships .col {text-align: center; flex: 0 0 100%;}
	
	.section {margin: 0 15px 50px; padding: 30px 20px 20px}
	
	.quote {padding: 15px; margin-top: -15px;}
	
	.charadoll {height: 300px;}
	
	.row.gallery {flex-flow: row wrap;}
}