/* Fonts */
@font-face {
	font-family: "BloodyHell";
	src: url("Fonts/Bloody Hell.otf");
}

@font-face {
	font-family: "AroundTheBooks";
	src: url("Fonts/Go around the books 2022.ttf");
}

@font-face {
	font-family: "EnchantedLand";
	src: url("Fonts/Enchanted Land.otf");
}

@font-face {
	font-family: "ThankYou";
	src: url("Fonts/Thank you.ttf");
}				

/* Everything else */

body {
	color: white;
}

a {
	color: white;
	text-decoration: none;
}

a:hover {
	color: lightblue;
}

.active-selector {
	color:red;
}

.card-background {
	background-image: linear-gradient(rgba(64,64,64,1), rgba(128,128,128,1), rgba(64,64,64,1));
}

.gallery-button {
	position:absolute;
	cursor:pointer;
	color:lightblue;
	font-size:24pt;
	text-shadow: 1px 1px 4px #222;
	
	top:50%;
}

.gallery-button:hover {
	color:yellow;
}

.gallery-button:active {
	color:orange;
}

.gallery-button-right {
	float:right;
	margin-right:10px;
}

.gallery-button-left {
	float:right;
	margin-right:10px;
}

.screen-container {
    height: 100vh;
    max-height: 92vh;
	/* Begin magic voodoo bullshit */
  container: screen / size;
}
@container (min-width: 1px) {
  img {
    max-height: 100cqb;
  }
} 
/* End magic voodoo bullshit. I genuinely have no idea what this block does, but it works. */  

.flex-category {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	background-color:black;
	margin-bottom:4px;
}
	
.flex-container {
	display: flex;
	flex-direction: row;
	flex-wrap:nowrap;
	justify-content: flex-start;
	height:100%;
}

.flex-subcontainer {
	display: flex;
	flex-direction: row;
	flex-wrap:wrap;
	justify-content: flex-start;
	align-content: flex-start;
	margin-right:32px;
}

.flex-container div {
	padding-left:16px;
}

.flex-break {
	flex-basis: 100%;
	height:0;
}

.character-image {
	height: 100%;
}

.character-bio {
	font-family: "Calibri";
	font-size: 16pt;
	text-shadow: 1px 1px 4px #222;
	align-self:stretch;
	height:100%;
	overflow:clip;
}

.character-bio a {
	color:lightblue;
}

.name-miya {
	font-family: "BloodyHell";
	letter-spacing: 0.3em;
	font-size: 150pt;
	text-shadow: 6px 6px 6px black;
}

.subtitle-miya {
	font-family: "AroundTheBooks";
	font-size: 40pt;
	text-shadow: 6px 6px 6px black;
}