html {
	--basecolor: 	#e68482; 	/*solid duskish pink*/
	--altbasecolor: 			palevioletred;
	--darkaccent: 	#970000;	/*dark red*/
	--lightbg: 		#ffeee5; 	/*light peach*/
	--darkbg: 		#ebabab; 	/*light dusky pink*/
	--darkbgtext: 	#c15f7c;	/*plum pink*/
	--lightgrey:				whitesmoke;
	--grey:			#ccc;		/* grey */
	--darkgrey:		#444;		/* charcoal */
}

/*===========
	IMAGES
=============*/

.altaia-pic {
	background-image: url("/img/ryaellogoless-banner.jpg");
	background-position:top;
}

.altaia-chibi {
	background-image: url("https://i.imgur.com/SJGImJn.jpg");
}

/*============
	WRAPPER
==============*/

body, .container-fluid, .container, .row {
	width:100%;
	margin:0px;
	padding:0px;
}

.wrapper {
	width:80%;
	margin-left:auto;
	margin-right:auto;
}

body {
	background-color: white;
	color: var(--basecolor);
	font-family: 'PT Sans', sans-serif;
}

.section-two {
	color: var(--darkgrey);
}

/*================
	TEXT FORMAT
=================*/

#title, #header, h1, h2, h3, h4 {
	font-family: 'Raleway', sans-serif;
}

h1, h2, h3, h4 {
	width:100%;
}

h1 {
	border-bottom: .2rem solid var(--darkaccent);
	color:var(--basecolor);
	display:block;
	text-align:center;
}

h2 {
	color:var(--darkaccent);
	margin-left:auto;
	margin-right:auto;
	padding:.7rem 0rem;
	text-align:center;
	text-transform:uppercase;
}

h3, h4 {
	color:var(--basecolor);
}

h4 {
	font-size:20px;
}

.table th {
	background-color: var(--darkbg);
	color: var(--darkbgtext);
	font-weight:bold;
	text-transform:uppercase;
}

.table tr {
	background-color: var(--lightbg);
	font-weight:normal;
}

blockquote {
	color: var(--grey);
	padding:0px;
	margin:1rem auto 1rem auto;
	width:80%;
}

blockquote::before {
	content: "\275d";		/* ❞ heavy double comma quotation*/
}
blockquote::after {
	content: "\275e";		/* ❝ heavy double turned comma quotation */
}

/*================
	HEADER
	+ FOOTER
==================*/

#header {
	padding:12% 0px 12% 0px;
}

#title {
	color:white;
	font-size:50px;
	text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

#footer {
	padding:7.5% 0px;
	text-align:center;
	background-color:var(--darkgrey);
	color:var(--lightgrey);
}

/*=================
    NAVBARS + TABS
===================*/

.navbar-header {
	margin-top:-40px;
	background-color: var(--lightgrey);
	border:0px;
}

.navbar {
	width:100%;
}

.navbar, .navbar-header {
	list-style-type: none;
}

.navbar li,
.navbar-header li {
	display:inline-block;
	text-transform:uppercase;
}

.navbar a,
.navbar-header a {
	color:var(--altbasecolor);
	list-style-type:none;
}

.navbar a:hover,
.navbar-header a:hover {
	color:var(--altbasecolor);
}

/*ul.navbar li::before {
	content: "\1F539"; /* 🔹 small blue diamond */
}

ul.navbar-header li::before{
	content: "";
}*/

.navbar .tab li {
	padding:.1rem .5rem;
	/*text-decoration:underline;
	text-decoration-style:1px solid;
	text-decoration-color:var(--darkbgtext);*/
}

.navbar .tab {
	background-color: var(--lightbg);
	color:var(--basecolor);
	text-align:left;
}

.navbar .tab:hover {
	background-color:var(--darkbg);
	color:var(--darkbgtext);
}

.navbar .tab:focus,
.navbar .active {
	background-color:var(--darkbg);
	color:var(--darkbgtext);
	outline:0;
}

/*================
	GALLERY
==================*/

.gallery {
	padding-top:.5rem;
	padding-bottom:.5rem;
}

.gallery figure {
	align-self:flex-end;
	display:inline-block;
	margin:0px .5rem;
	margin-bottom: .5rem;
	vertical-align:middle;
}

.gallery .figwrapper {
	display:table;
	table-layout:fixed;
}

.gallery figure figcaption {
	background-color: var(--darkgrey);
	background-color: var(--darkbgtext);
	caption-side:bottom;
	color: var(--lightgrey);
	color: var(--lightbg);
	display:table-caption;
	padding: .2em;
	word-break:break-all;
}

.gallery-row {
	margin:0px;
	padding:0px;
	width:100%;
}

/*================
	CREW
==================*/

.spreadsheet {
	height: 50rem;
}


/*================
	ABOUT the OC
==================*/

div.tab-content {
	margin-bottom:1em;
}

div.backstory-wrapper {
	background-color:var(--darkbg);
	border:.25rem solid var(--darkbg);
	color:var(--darkbgtext);
	overflow-x:auto;
	width:100%;
	white-space:nowrap;
	min-height:0rem;
}

div.backstory-item {
	background-color:var(--lightbg);
	color:var(--lightbgtext);
	display:inline-block;
	margin:.25em;
	padding:.5em;
	width:25%;
}

/*================
	HELPER
	CLASSES
==================*/

.bg {
	background-attachment:fixed;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}

.bordered {
	border:1px solid var(--lightgrey);
}

.centered {
	margin-left:auto;
	margin-right:auto;
	align-content:center;
	text-align:center;
}

.centered-vertically {
	vertical-align:center;
}

.clear {
	border:none;
	margin:0px;
	padding:0px;
}

.clear-sides {
	clear:both;
}

.fullwidth {
	width:100%;
}

.fullheight {
	height:100%;
}

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

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

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