@import url(game-elements/animations.css);
@import url(game-elements/dropdown.css);
@import url(game-elements/borders.css);
@import url(game-elements/popup.css);

@import url(gameStyles.css);
@import url(page-battle.css);
@import url(page-title.css);
@import url(page-main.css);
@import url(page-petinfo.css);

* {
	box-sizing: border-box;
}

@font-face {
	font-family: "GameBoy";
	src: url(fonts/AGoblinAppears-o2aV.ttf) format("truetype");
	font-weight: normal;
	font-display: swap;
}

@font-face {
	font-family: "PokemonFRLG";
	src: url(fonts/pokemon-frlg.ttf) format("truetype");
	font-weight: normal;
	font-display: swap;
}

body {
	font-family: PokemonFRLG;
	font-size: 24px;

	background-color: #6c45c1;
	background-image: url(../img/page-img/noise.png);
}

/* HEADER STYLES */

.header-txt {
	font-family: GameBoy;
	font-size: 18px;
	line-height: 1.2em;
}

h1 {
	font-family: GameBoy;
	font-size: 36px;
	line-height: 1.2em;
    padding-left: 20px;
}

h2 {
	font-family: GameBoy;
	font-size: 24px;
	line-height: 1.2em;
    padding-left: 10px;
}



.flex-row {
	display: flex;
	width: 100%;
	gap: 6px;
	align-items: center;
	justify-content: center;
}

.flex-row .spacer {
	width: 100%;
	flex-grow: 9;
}

.save-row .btn {
	text-wrap: nowrap;
	min-width: fit-content;
}

.flex-col {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	justify-content: center;
}
.flex-grow {
	flex-grow: 9;
}
.no-wrap {
	text-wrap: nowrap;
}

.span-2 {
	grid-column: span 2;
}
.span-2-row {
	grid-row: span 2;
}

.no-select {
	user-select: none;
}


textarea:focus {
	outline: 2px solid #7b8c5a;
}