@font-face {
  font-family: RobotoSlab;
  src: url(fonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf) format("truetype");
}

:root /* root allows for defining terms which can be used later on in the code. This way we can reference a specific color without having to remember what a specific color's hexcode is, and it also makes it easier to edit the color universally by just changing the one instance, affecting all usages. */
{
	--vanquera-accent:#ffd711; /* Yellow | To reference, use var(--vanquera-accent) */
	--vanquera-accent-dark:#caa200;
	--body-bg-color:#3B3735;
	--body-light:#413C3A;
	--body-dark:#312D2B;
	--quote-text:#ACABAA;
	--context-blue:#615C7A; /* A dark blueish color, modified body-light */
	--invisible:#FFFFFF00;
	--visible:#FFFFFFFF;
}

body /*This is the general background, which uses the manabloom image as the main wallpaper. With code,  */
{
	background-color:black;
	background-image:url('/background.png');
	background-size:cover;
	z-index:5;
}

.wrapper /* This is the wrapper for the entire main body.*/
{
	width:80%;
	margin:auto;
	margin-top:100px;
	min-width:800px;
	max-width:1200px;
	background-color:var(--body-bg-color);
	padding-top:20px;
	padding-bottom:100px;
	padding-left:20px;
	padding-right:20px;
	border-radius:25px;
	border-style:double;
	border-width:8px 10px; /* top and bottom, sides */
	border-color:var(--body-light) var(--body-dark) var(--body-dark) var(--body-light); /* Top, right, bottom, left */
}

.center /* This is a broad class used to align things into the center. Should only really be used when no more specific class is applicable */
{
	text-align:center;
}

.small-title /* For the welcome text above the main title on the home page */
{
	font-size:20px;
	text-align:center;
}

.main-title /* For the big title on pages */
{
	font-size:50px;
	text-align:center;
}

.subtitle /* Used for smaller subtitles on certain pages, such as "Cilicia of the Jadeth Council" */
{
	font-size:20px;
	text-align:center;
	font-style:italic;
	font-family:RobotoSlab;
	font-weight:100;
}

nav /* This applies to all navs. This might have to be changed later */
{
	text-align:center;
	background-color:white;
	background-image:url('Header BG.png');
	background-size:300%;
	padding:5px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index:25;
}

nav a /* For the links in a nav */
{
	color:black;
	padding:5px 40px;
}

nav a:hover
{
	/*color:var(--vanquera-accent);*/
	background-color:white;
	border-radius:5px;
	border:5px var(--body-bg-color) solid;
}

li /* This currently affects all elements. I don't like that it affects all lists, but that is currently how it is laid out */
{
	float: left;
	list-style-type: none;
	justify-content: left;
}

li a, .dropbtn 
{
	display: inline-block;
	text-align: center;
	text-decoration: none;
}

li.dropdown 
{
	display: inline-block;
}

.dropdown-content 
{
	display: none;
	position: absolute;
	background-color:white;
	min-width: 200px;
	max-width:1000px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	border-radius:10px;
	z-index: 45;
}

.dropdown-content a 
{
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content a:hover 
{
	background-color:white;
	border-radius:5px;
	border:5px var(--body-bg-color) solid;
}

.dropdown:hover .dropdown-content 
{
	display: block;
}

li.sub-dropdown 
{
	display: inline-block;
}

.sub-dropdown-content 
{
	display: none;
	position: absolute;
	background-color:white;
	min-width: 200px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	border-radius:10px;
	z-index: 50; /* a z-index of 50 places it over all other elements. This is currently the highest z-index, as the nav should be. */
}

.sub-dropdown-content a 
{
	text-decoration: none;
	display: block;
	text-align: left;
}

.sub-dropdown-content a:hover 
{
	background-color:white;
	border-radius:5px;
	border:5px var(--body-bg-color) solid;
}

.sub-dropdown:hover .sub-dropdown-content 
{
	display: block;
}

a /* This just makes it so that all links display as the accent color, which is a yellow color */
{
	color:var(--vanquera-accent);
}

a:hover /* This just makes it so that all links display as a dark version of the accent color when hovered over, which is a darker yellow-ish orange color */
{
	color:var(--vanquera-accent-dark);
}

a.image-link
{
	color:var(--invisible);
}

a.image-link:hover
{
	color:var(--invisible);
}

.home-section /*This is used for the starry home sections on the home screen, and currently are not used anywhere else */
{
	margin:20px;
	padding:10px;
	background-image:url('Space Vanquera.png');
	background-size: cover;
	background-color:grey;
	border-radius:25px;
	border:double white 5px;
}

.art-cred /* How to display art credits */
{
	font-style:italic;
	font-size:0.8em;
}

.quote
{
	color: var(--quote-text);
	margin: auto;
	width:500px;
	/*text-decoration:underline;*/
	background-color:var(--body-dark);
	border-radius:10px;
	padding:20px 80px;
	padding-bottom:40px;
	font-style:italic;
	position:relative;
	border-left:5px solid white;
	border-right:5px solid white;
	display:flex;
}

/* Top-left quote */
.quote::before 
{
	content: "“";
	left:0.75em;
}

/* Top-right quote */
.quote::after 
{
	content: "”";
	right:0.75em;
}

.quote::before, .quote::after
{
	position:absolute;
	color: var(--vanquera-accent);
	top:0.5em;
	font-size: 2.5em;
}

.quote-speaker /* The individual speaking the quote. Currently broken, but whatever. */
{
	position:relative;
	bottom:0px;
	right:0px;
	font-size:1em;
	color: var(--quote-text);
}

.special-quote
{
	color: var(--quote-text);
	margin:20px 200px;
	/*text-decoration:underline;*/
	background-color:var(--body-dark);
	border-radius:10px;
	border:double white 5px;
	padding:20px 80px;
	font-style:italic;
}

/* Top quote */
.special-quote::before {
	content: "--- ";
	color: var(--vanquera-accent);
	font-size: 2em;
}

/* Bottom quote */
.special-quote::after {
	content: " ---";
	color: var(--vanquera-accent);
	font-size: 2em;
}

.story /* Used for the contents of stories */
{
	color: var(--quote-text);
	margin:20px 80px;
	/*text-decoration:underline;*/
	background-color:var(--body-dark);
	border-radius:10px;
	padding:35px 60px;
	font-style:normal;
	font-family:RobotoSlab;
	font-weight:100;
}

.context /* For special instances where meta-commentary is needed, like giving credit for a species idea or to provide better context about the value of a currency. It is to be used in a meta context */
{
	border-left: 8px solid CornflowerBlue;
	background-color:var(--context-blue);
	font-family:RobotoSlab;
	font-weight:100;
	margin:5px 40px; /* top and bottom, sides */
	padding:5px 20px; /* top and bottom, sides */
	font-style:italic;
	color:white;
}

p:not(.quote):not(.special-quote):not(.quote-speaker) /* All text is white, unless it is part of a quote */
{
	color:white;
}

h1 /* These are the main headers with the white mana backgrounds */
{
	color:black;
	text-align:left;
	/*text-decoration:underline;*/
	background-color:white;
	background-image:url('Header BG.png');
	border-radius:10px;
	border:double white 5px;
	padding:5px;
	padding-left:30px;
	letter-spacing:10px;
	font-family:RobotoSlab;
	font-weight:normal;
}

h2
{
	text-decoration-line: underline;
	color:white;
}

h3
{
	text-decoration-line: underline;
	color:white;
}

h4
{
	color:white;
	font-style:italic;
}

h5
{
	color:white;
}

h6
{
	color:grey;
}

character-aside /* Currently doesn't work */
{
	display: table;
	margin: auto;
	color:white;
	width:40%;
	padding-left:15px;
	padding-bottom:10px;
	float:right;
	background-color:var(--body-dark);
}

.character-card 
{
	border: 3px solid var(--vanquera-accent);
	border-radius:5px;
	padding: 1rem;
	background:var(--body-dark);
}

.character-card h2 
{
	margin-top: 0;
}

.list-header /* Currently primarily used as the mini headers in categories */
{
	text-align:center;
}

.categorization:not(hr)
{
	display: grid;
	justify-content: center;
}

.categorization:not(hr) a
{
	float: center;
}

.categorization:not(hr) li
{
	margin: 5px;
}

.manabloom
{
	bottom:-10px;
	right:20px;
	z-index:20;
	height:200px;
	position:fixed;
}

.secret-button /* I wonder what this does... */
{
	position:fixed;
	background-color:#00000000;
	bottom:-5px;
	animation:moveacross 10s linear infinite;
	border:0px;
	left:100%;
	z-index:25;
}

.secret /* I wonder what this does... */
{
	position:fixed;
	background-color:#00000000;
	bottom:-5px;
	animation:moveacross 10s linear infinite;
	border:0px;
	left:100%;
}

@keyframes moveacross {
	from {
		left: 100%;
	}
	to {
		left: -50%;
	}
}