/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* CHARACTERS - FOR STAR QUEST CHARACTERS */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

p {
	color: #1c0049;
}
.char {
	flex-grow: 1;
	width: auto;
}

.charmain {
	width: 1010px;
	max-height: 100000;
	padding: 15px;
	background-image: linear-gradient(to bottom, rgba(33,2,85, 0.8), rgba(16,1,43, 0.8));
	margin: auto;
}

.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;
}

.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;
}

.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;
	text-align: center;
	position: sticky
}

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

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

.charlikes, .chartriv, .charex2 {
	overflow: auto;
	scrollbar-width: thin;
}

.chargallery {
	border: 1px solid white;
	max-height: auto;
	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: right;
	padding: 0 8px;
	width: 32%;
}

.imgchar2 {
	position: absolute;
	top: 20px;
	left: 50%;
}

.imgchar2.avaci {
	width: 30%;
}

.imgchar2.purvall {
	width: 27%;
}

.imgchar2.kris, .imgchar2.hoxi {
	width: 37%; 
}

.imgchar2.twizzle {
	width: 47%;
}

.imgchar2.darkenergy {
	width: 41%;
}

.imgchar2.nebyx {
	width: 30%; 
}

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

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

/*CONTAINERS*/
.charname, .charinfo2, .charbio, .charlikes, .chartriv, .charex2, .chargallery {
	background-image: linear-gradient(to bottom, rgba(167, 93, 209, 0.9), rgba(245, 187, 86, 0.9));
}

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

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

body {
  background: #fff;
  padding: 0;
  margin: 0;
  background: url('../backgrounds/spaceani.gif');
  background-repeat: repeat;
  }
  
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 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: #1c0049;
	padding: 10px;
	border-radius: 15px;
	font-family: 'Sysfont';
}

td {
	font-family: 'Sysfont';
}

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

li, ul {
	font-family: 'Sysfont';
	color: #1c0049;
	align-text: left;
}

summary, slot[name="internal-main-summary"]::slotted(summary) {
	display: list-item;
	font-family: 'Sysfont';
	font-size: 20px;
}

@media only screen and (max-width: 1010px) {
	.imgchar2.kris, .imgchar2.purvall, .imgchar2.hoxi, .imgchar2.darkenergy, .imgchar2.nebyx, .imgchar2.twizzle {
		width: 70%;
	}
	.imgchar2.avaci {
		width: 50%;
	}
}

@media only screen and (max-width: 992px) {
	.imgchar2.avaci, .imgchar2.kris, .imgchar2.purvall, .imgchar2.hoxi, .imgchar2.darkenergy, .imgchar2.nebyx, .imgchar2.twizzle {
		width: 50%;
	}
}

@media only screen and (max-width: 950px) {
  .charexhead {
    flex-direction: column;
	width: auto;
  }
  .chargallery {
	  width: 95%;
  }
  .charbio {
	  width: 95%;
  }
  .charinfo2 {
	  width: 95%;
  }
  .charbiohead {
	  width: auto;
  }
  .charimghead {
	  width: 97%;
	  height: auto;
  }
  .charinfohead {
	  width: 30%;
  }
  .charlikes, .chartriv, .charex2 {
	  width: 60%;
	  overflow: auto;
	  scrollbar-width: thin;
	  justify-content: space-between;
	  margin-right: 10px;
  }
  .charname {
	  width: 95%;
  }
  
  .charinfo {
	  width: auto;
  }
  
  .charmain {
	  width: 100%;
  }
  .charahead {
	  margin: auto;
	  width: 50%;
  }
  
  .char, .charinfohead {
	  width: 100%;
  }
  .chargallery {
	  width: 90%;
  }
  
  .charex {
	  justify-content: space-between;
	  width: 95%;
	  display: flex;
  }
  
  .charahead {
	  text-align: center;
  }
  .imgchar {
	  width: 100%;
	  display: block;
	}
	
	.imgchar2 {
	  max-width: 100%;
	  position: static;
	  
	}
	.imgchar2.avaci, .imgchar2.kris, .imgchar2.purvall, .imgchar2.hoxi, .imgchar2.darkenergy, .imgchar2.nebyx, .imgchar2.twizzle {
		width: 100%;
	}
}

@media only screen and (max-width: 768px) {
  .charexhead {
    flex-direction: column;
	width: auto;
  }
  .chargallery {
	  width: 95%;
  }
  .charbio {
	  width: 95%;
  }
  .charinfo2 {
	  width: 95%;
  }
  .charbiohead {
	  width: auto;
  }
  .charimghead {
	  width: 97%;
	  height: auto;
  }
  .charinfohead {
	  width: 30%;
  }
  .charlikes, .chartriv, .charex2 {
	  width: 60%;
	  overflow: auto;
	  scrollbar-width: thin;
	  justify-content: space-between;
	  margin-right: 10px;
  }
  .charname {
	  width: 95%;
  }
  
  .charinfo {
	  width: auto;
  }
  
  .charmain {
	  width: 100%;
  }
  .charahead {
	  margin: auto;
	  width: 50%;
  }
  
  .char, .charinfohead {
	  width: 100%;
  }
  .chargallery {
	  width: 90%;
  }
  
  .charex {
	  justify-content: space-between;
	  width: 95%;
	  display: flex;
  }
  
  .charahead {
	  text-align: center;
  }
  .imgchar {
	  width: 100%;
	  display: block;
	}
	
	.imgchar2 {
	  max-width: 100%;
	  position: static;
	  
	}
	.imgchar2.avaci, .imgchar2.kris, .imgchar2.purvall, .imgchar2.hoxi, .imgchar2.darkenergy, .imgchar2.nebyx, .imgchar2.twizzle {
		width: 100%;
	}
}

@media only screen and (max-width: 600px) {
	.imgchar2.avaci, .imgchar2.kris, .imgchar2.purvall, .imgchar2.hoxi, .imgchar2.darkenergy, .imgchar2.nebyx, .imgchar2.twizzle {
		width: 100%;
	}
	.charmain, .charinfohead {
	  width: 100%;
  }
  
  .charname, .charinfo2, .charbio, .charinfohead {
	  width: 60%;
  }
  
  .charex {
	flex-direction: column;
  }
  .charlikes, .chartriv, .charex2 {
	  width: 94%;
	  margin: 2px;
  }
  
  .charexhead {
	width: 50%;
	font-size: 15px;
	height: 10px;
  }
}