#characters {
    /* background: #0D0E56; */
	position: relative;
	font-family: semplicitapro, sans-serif;
	color: #fff;
	font-style: normal;
	text-align: center;
	overflow: hidden;
	margin-top: 5em;
	font-size: clamp(8px, 2vw, 20px);
}

.character-info {
    width: 50%;
}

	.character-bg,
	.character-bg-color,
	.character-bg-color::after,
	.character-portrait {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: 0;
	}
	
	.character-bg {
		height: 80%;
		
	}

	.character-bg-color {
		background: #05FDFD;
	}

	.character-bg-color::after {
		content: "";
		background: #0D0E56;
	}

	.character-slide {
		overflow: hidden;
	}

	.character-splide,
	.character-splide .splide__track {
		height: 100%;
	}

	.character-portrait {
		z-index: -1;
		/* margin-top: 5em; */
		display: grid;
    	align-items: center;
    	justify-content: space-evenly;
	}

	.character-portrait img{
		/* position: absolute;
		bottom: 20em;
		right: -10%; */
		/* width: 50%; */
		max-width: unset;
	}

	#characters .content {
		position: relative;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		
	}

	@media screen and (min-width: 1025px) {
		.character-bg,
		.character-bg-color,
		.character-bg-color::after {
			height: 100%;
		}

		#characters .wrapper {
			margin-top: 5em;
		}

		#characters .section-header {
			position: absolute;
			top: 10%;
			left: 0;
		}
		.character-bg-color {
			clip-path: polygon(0 40%, 100% 20%, 100% 80%, 0 100%);
		}
		.character-bg-color::after {
			content: "";
			clip-path: polygon(0 41%, 100% 21%, 100% 79%, 0 99%);
		}
		#characters .content {
			clip-path: polygon(0 0, 100% 0, 100% 79%, 0 99%);
		}
		.character-info {
			width: 50%;
			top: 5em;
			padding: 15em 0em 15em 10em;
			position: relative;
		}
	}

	#characters .wrapper {
		height: 100%;
	}

	.character-slide-arrows {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height:100%;
	}

	@media screen and (max-width: 1024px) {

		.character-bg {
			height: 0;
		}
		.character-slide-arrows .prevArrow {
			max-width: 5%;
			left: 1em;
		}

		.character-slide-arrows .nextArrow {
			max-width: 5%;
			right: 1em;
		}

		.character-slide {
			background: #0D0E56;
			/* padding-top: 3em; */
		}

		.character-info {
			margin-left: 10%;
			padding: 4em 0;
		}

		.character-portrait img{
			position:absolute;
			right: 0;
			transform: translateX(20%);
			height: 100%;
		}
	}


.character-info h2, 
.character-info-text {

	text-shadow: 1px 1px #000, 0px 1px #000, 1px 0px #000, 2px 2px #000, 0px 2px #000, 2px 0 0 #000;

}

.character-info-text {
	padding: 1em 0.5em;
	background: rgba(13, 14, 86, .5);
}

.character-screenshots {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1em;
}

.character-screenshots img {
	border: 2px solid #0FB0F4;
}

/* @media screen and (max-width: 1440px) {
	.character-info {
		width: 75%;
		padding: 30em 0em 20em 10em;
	}
}

@media screen and (max-width: 768px) {
	.character-info {
		width: 100%;
		padding: 30em 5em 25em;
	}
	.character-portrait img{
	   bottom: 150px;
	   right: -20%;
	   max-height: 100%;
   }
} */