/** @format */
:root {
	--blue_color: #10397b;
	--white_color: #fff;
}

@font-face {
	font-family: 'Press Start 2P', system-ui;
	font-weight: 400;
	font-style: normal;
}

body {
	/*background-image: url(battlescene.jpeg);  */
	background-size: cover;
	background-repeat: no-repeat;
	color: #333;
	font-family: 'Press Start 2P', system-ui;
	font-size: 1.5em;
	margin: 0;
	padding: 0;
	line-height: 1em;
}

a {
	color: var(--blue_color);
	text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--blue_color);
}

::selection {
	background: var(--blue_color);
	color: var(--white_color);
}

button {
	background: var(--white_color);
	color: var(--blue_color);
	border: 1px solid var(--blue_color);
	border-radius: 0.3em;
	padding: 0.4em 0.8em 0.5em;
	cursor: pointer;
}

button.active {
	background: var(--blue_color);
	color: var(--white_color);
}

.gb-dark {
	fill: #333;
}

.gb-normal {
	fill: var(--blue_color);
}

.gb-light {
	fill: #b3d7ff;
}

.text-area {
	margin: 0 auto;
	font-size: 0.5em;
	width: 90%;
	line-height: 1.6em;
}

#pokemon {
	width: 90%;
	height: 80vh;
	position: relative;
	margin: 0 auto;
	transform: translateZ(0em) translateY(0em) translateX(0em) rotateX(0deg)
		rotateY(0deg);
}

.button:hover {
	cursor: pointer;
	position: relative;
}

.button:hover:before {
	position: absolute;
	background-image: url('img/marker.svg');
	background-repeat: no-repeat;
	left: -1em;
	top: 0.1em;
	width: 0.5em;
	height: 0.7em;
	background-size: 0.5em;
	content: '';
}

img,
svg {
	width: 100%;
	height: auto;
}

span,
.button,
.level,
.name {
	font-size: 0.8em;
}

span span,
.button span,
.level span,
.name span {
	font-size: 1em;
}

.layer {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.images {
	position: absolute;
	width: 30%;
}

.info {
	position: absolute;
	width: 40%;
}

.name {
	height: 1.1em;
}

.balls {
	margin-top: 1.6em;
}

.stats {
	background-position: bottom;
	background-size: 100%;
	background-repeat: no-repeat;
}

.level-wrap {
	margin-top: -0.1em;
	height: 0.8em;
}

.level-wrap img,
.level-wrap svg {
	width: 0.6em;
	display: inline-block;
	margin-right: -0.8em;
}

.health {
	margin-left: 2.5em;
}

.health span {
	display: inline-block;
	width: 0.8em;
}

.hp-wrap {
	height: 0.9em;
}

.hp-wrap img,
.hp-wrap svg {
	width: 1.1em;
	display: inline-block;
}

.hp-bar {
	border: 0.1em solid #333;
	border-radius: 0.4em;
	height: 0.3em;
	width: 80%;
	display: inline-block;
	margin-left: -0.7em;
}

.hp-bar-active {
	background-color: var(--blue_color);
	height: 100%;
	width: 100%;
	border-radius: 0.4em;
}

.foe .images {
	right: 5%;
}

.foe .info {
	left: 5%;
}

.foe .stats {
	height: 3em;
	background-image: url('img/blue_line.svg');
}

.foe .name {
	margin-left: -0.3em;
	margin-top: -0.1em;
}

.foe .level-wrap {
	margin-left: 2.2em;
}

.foe .hp-wrap {
	margin-left: 0.6em;
}

.player {
	padding-top: 10%;
}

.player .images {
	left: 5%;
}

.player .info {
	right: 5%;
}

.player .stats {
	background-image: url('img/red_line.svg');
}

.player .name {
	margin-left: 1em;
	margin-top: 1.8em;
}

.player .level-wrap {
	margin-left: 4.1em;
}

.player .hp-wrap {
	margin-left: 0.9em;
}

.player .balls {
	margin-top: 4em;
}

.windows .window {
	position: absolute;
	border-image: url('img/frame.svg') 45% stretch;
	border-style: solid;
	border-width: 0.7em;
	background: var(--white_color);
}

.windows .window.texts {
	margin: 0;
	height: 20%;
	left: 0.1em;
	right: 0.1em;
	bottom: 0.1em;
}

.windows .window.texts .text span {
	height: 1em;
	width: 1em;
	display: inline-block;
}

.windows .window.texts .text.text1 {
	margin-top: 0.5em;
}

.windows .window.texts .text.text2 {
	margin-top: 0.1em;
}

.windows .window.menu {
	display: none;
	bottom: 0.1em;
	right: 0.1em;
	height: 20%;
	width: 30%;
	padding: 0.5em 0 0 0.8em;
}

.windows .window.menu sup,
.windows .window.menu sub {
	display: inline-block;
	margin-right: -1.3em;
	font-size: 0.7em;
	margin-left: -0.4em;
}

.windows .window.fight {
	display: none;
	bottom: 0.1em;
	right: 0.1em;
	left: 30%;
	min-height: 30%;
	padding: 0.5em 0 0 0.8em;
}

.windows .window.fight .fight-details {
	top: -3.9em;
	left: -3.9em;
	width: 6.6em;
	height: 2.4em;
}

.windows .window.fight .fight-details span {
	height: 0.8em;
	margin-top: -0.3em;
}

.windows .window.item {
	display: none;
	top: 10%;
	bottom: 30%;
	left: 30%;
	right: 0.1em;
	padding: 0.6em;
}

.windows .window.pkmn {
	display: none;
	top: 0.1em;
	bottom: 0.1em;
	left: 0.1em;
	right: 0.1em;
}

.perspective {
	perspective: 30em;
	transform-style: preserve-3d;
}

.perspective .depth {
	transform: rotateX(0deg) rotateY(0deg);
	transform-style: preserve-3d;
}

.perspective .foe {
	transform: translateZ(-8em);
	transform-style: preserve-3d;
}

.perspective .player {
	transform: translateZ(-4em);
	transform-style: preserve-3d;
}

.perspective .windows {
	transform: translateZ(0em);
	transform-style: preserve-3d;
}

.perspective .window.menu {
	transform: translateZ(4em);
	transform-style: preserve-3d;
}

.perspective .window.fight,
.perspective .window.item,
.perspective .window.pkmn {
	transform: translateZ(8em);
	transform-style: preserve-3d;
}

/*
--------MEDIA Qs--------
*/

/* Default styles */

/* Add responsive styles */
@media screen and (max-width: 768px) {
	body {
		font-size: 1em;
		/* Adjust font size for smaller screens */
	}

	.text-area {
		font-size: 1em;
		/* Adjust font size for smaller screens */
	}

	/* Add more responsive styles as needed */
}

@media screen and (max-width: 480px) {
	body {
		font-size: 0.8em;
		/* Further adjust font size for smaller screens */
	}

	.text-area {
		font-size: 0.8em;
		/* Further adjust font size for smaller screens */
	}

	/* Add even more responsive styles as needed */
}