.character_card {
	position: relative; /* use relative so children with position:absolute are positioned inside .outerbox */
	z-index: 0;
	/* removed top/left — avoid absolute positioning of the whole card */

	width: 1200px;
	height: 700px;
	margin: 0;
	padding: 0;

	background-color: whitesmoke;

	display: flex;
	justify-content: center; /* center .outerbox horizontally */
	align-items: center;     /* center .outerbox vertically */
}

.character_color_box {
	position: relative; /* positioned container for .namebox, .characterart, .effectbox */
	z-index: 1;
	/* removed top/left so it's centered by the parent flexbox */
	width: 1140px;
	height: 640px;
	margin: 0;
	border-radius: 16px;
	/*EDIT THIS: To change the color of the shape around the Ranger's character ability.*/
	background-color: #ea1d2e;
}

.character_nameplate {
	position: absolute;
	z-index: 2;
	right: 0;
	top: 0;
	width: 500px;
	height: 115px;
	padding: 0;

	display: flex;
	flex-direction: row-reverse;
	align-items: center;
}

.character_team_logo {
	width: 10%;
	height: 100%;
	margin-right: 15px;
	/*EDIT THIS: To change the logo of the team on the card.*/
	background-image: url("logos/solar.png");
	filter: invert(0);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.character_name {
	width: 90%;
	text-align: center;
	justify-content: center;
	font-family: 'American Captain';
	font-size: 64px;
	letter-spacing: 1.4px;
	/*EDIT THIS: To change the color of the text showing the Ranger's name on top of the card.*/
	color: whitesmoke;
	text-shadow: black 1px 0 12px;
}

.character_art {
	position: absolute;
	top: 0;
	left: 0;
	width: 530px;
	height: 640px;
	clip-path: path("M 0 15 L 0 625 C 0 625 0 640 15 640 L 530 640 C 530 640 380 300 480 0 L 15 0 C 15 0 0 0 0 15 Z");
	/*EDIT THIS: To add a background image to your card or change the background color. Get creative!*/
	/*background-image: url("art/blacksolar/characterart.png"), radial-gradient(#c77d2c, #000000);*/
	background-color: limegreen;
	background-position: center;
	background-repeat: no-repeat;
}

.character_inner_box {
	position: absolute;
	top: 114px;
	left: 520px;
	width: 652px;
	height: 510px;
	background-color: whitesmoke;
	clip-path: path("M 115 0 L 622 0 L 622 490 L 355 490 L 355 510 L 35 510 C 35 510 10 450 0 397 L 50 405 C 50 405 -10 265 10 95 L 100 110 C 100 110 100 55 115 0 Z");
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
}

.character_role {
	position: absolute;
	top: 28px;
	left: 120px;
	width: 75%;
	font-family: 'DIN Medium';
	font-size: 38px;
	letter-spacing: 0.5px;
	/* EDIT THIS: To change the color of the Ranger's name on the card. */
	color: #ea1d2e;
}

.character_ability_box {
	position: absolute;
	top: 132px;
	left: 115px;
	width: 75%;
}

.character_ability_name {
	font-family: 'DIN Medium';
	font-weight: bold;
	font-size: 38px;
	letter-spacing: 2px;
	margin-bottom: 14px;
}

.character_ability_text {
	font-family: 'Futura PT Book';
	font-size: 32px;
	line-height: 38px;
	margin-top: -6px;
}

.abilitybox br {
	line-height: 16px;
}

.icon {
	display: inline-block;
	vertical-align: middle;
	margin-top: -6px;
	margin-left: -2px;
	margin-right: -2px;
}

img {
	width: 30px;
	height: 30px;
	padding: 0;
}