/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* CHARACTERS - FOR ENDARIA CHARACTERS */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

p, td {
	color: #1c0049;
}
.char {
	display: flex;
	justify-content: center;
}

.charmain {
	width: 1010px;
	max-height: 5000px;
	padding: 15px;
	background-image: linear-gradient(to bottom, rgba(255,212,48, 0.8), rgba(5,119,45, 0.8));
}

.charimg {
	float: left;
	padding: 5px;
	height: 500px;
	width: 320px;
	border: 1px solid white;
	margin: 10px;
}

.charimg2 {
	border: 1px solid white;
	height: 300px;
	width: 300px;
}

.charinfo {
	max-height: 465px;
	width: 640px;
	float: left;
	padding: 6px;
	margin-bottom: 250px;
}

.charname {
	border: 1px solid white;
	width: 630px;
	height: 65px;
	margin-bottom: 15px;
	padding: 5px;
	font-size: 30px;
	font-family: 'Sysfont';
	color: #1c0049;
}

.charinfo2 {
	border: 1px solid white;
	width: 630px;
	height: 200px;
	margin-bottom: 15px;
	padding: 5px;
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: #05772d #DFFB7A;
}

.charinfohead {
	width: 590px;
	height: 30px;
	font-family: 'Sysfont';
	font-size: 25px;
	padding: 5px;
	top: 0;
}

.charbio {
	border: 1px solid white;
	width: 630px;
	max-height: 335px;
	padding: 5px;
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: #05772d #DFFB7A;
}

.charbiohead {
	width: 600px;
	height: 30px;
	position: sticky;
	font-family: 'Sysfont';
	font-size: 25px;
	padding: 5px;
	top: 0;
}

.charex {
	width: 970px;
	height: 300px;
	margin-top: 540px;
	display: flex;
	padding: 10px;
	justify-content: space-between;
	padding: 5px;
}

.charlikes {
	border: 1px solid white;
	height: 290px;
	width: 290px;
	padding: 5px;
}

.charexhead {
	width: 250px;
	height: 30px;
	font-family: 'Sysfont';
	font-size: 25px;
	padding: 5px;
	top: 0;
}

.chartriv {
	border: 1px solid white;
	height: 290px;
	width: 290px;
	padding: 5px;
}

.charex2 {
	border: 1px solid white;
	height: 290px;
	width: 290px;
	padding: 5px;
}

.chargallery {
	border: 1px solid white;
	max-height: 2000px;
	width: 975px;
	padding: 10px;
}

.charimghead {
	width: 950px;
	height: 30px;
	position: sticky;
	font-family: 'Sysfont';
	font-size: 25px;
	padding: 5px;
	top: 0;
}

.charahead {
	border: none;
	width: 900px;
	font-size: 80px;
	font-family: 'Sysfont';
	color: white;
	margin-left: 390px;
}

img.pic {
	border-radius: 20px;
	margin: 5px;
	border: 2px dashed white;
}

.stats {
	margin-right: 8px;
	border-radius: 6px;
	padding: 3px;
	width: 600px;
}

tr {
	color: white;
}

.imgchar {
	float: left;
	padding: 0 8px;
}

.imgchar2 {
	max-width: 100%;
	position: absolute;
	top: 20px;
	left: 50%;
}

.charrelation {
	width: 975px;
	max-height: 1500px;
	border: 1px solid white;
}

.charname, .charinfo2, .charbio, .charlikes, .chartriv, .charex2, .chargallery {
	border-radius: 20px;
	border: 5px ridge #05772d;
}	

/*CONTAINERS*/
.charname, .charinfo2, .charbio, .charlikes, .chartriv, .charex2, .chargallery {
	background-image: linear-gradient(to bottom, rgba(72,208,96, 0.9), rgba(223,251,122, 0.9));
}

/*HEADERS*/
.charimghead, .charexhead, .charbiohead, .charinfohead {
	border: 3px ridge #05772d;
	border-radius: 15px;
	box-shadow: 5px 5px 5px #02561e;
	background-image: linear-gradient(to bottom, #fceeb5, #f8b057, #ef8706);
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* CHARACTER BIO STYLING */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

body {
  background: #fff;
  padding: 0;
  margin: 0;
  background: url('../backgrounds/flowers2.jpg');
  background-size: contain;
  background-attachment: fixed;
  }
  
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* TEXT STYLING */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  
@font-face {
  font-family: 'Sysfont';
  src: url('sysfont.woff2') format('woff2'),
  url('sysfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

p {
	font-size: 15px;
	font-family: 'Sysfont';
}

h2 {
	font-size: 20px;
	font-family: 'Sysfont';
}

h1 {
	font-size: 20px;
	font-family: 'Sysfont';
}

h3 {
	font-size: 20px;
	font-family: 'Sysfont';
}

th {
	background-color: #05772d;
	padding: 10px;
	border-radius: 15px;
	font-family: 'Sysfont';
}

td {
	font-family: 'Sysfont';
}

table {
	display: flex;
	justify-content: space-between;
}