.pokemoninfo {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto auto;
	grid-template-areas:
		"primaryinfo"
		"secondaryinfo";
	background-color: rgb(152, 202, 185);
	margin-bottom: 0.5rem;
	padding: 0.5rem;
	cursor: pointer;
}

.primaryinfolayout {
	grid-area: primaryinfo;
	display: grid;
	grid-template-columns: 4rem 0.25rem 1fr 0.25rem 3fr;
	grid-template-areas:
		"img . id . name";
}

.secondaryinfolayout {
	grid-area: secondaryinfo;
	display: none;
	grid-template-columns: 1fr 0.25rem 1fr;
	grid-template-rows: 0.5rem auto 0.25rem auto 0.25rem auto 0.25rem auto 0.25rem auto 0.25rem auto 0.25rem auto;
	grid-template-areas:
		". . ."
		"type type type"
		". . ."
		"height . weight"
		". . ."
		"candy . candycount"
		". . ."
		"egg . spawnchance"
		". . ."
		"avgspawns . spawntime"
		". . ."
		"multipliers . weaknesses"
		". . ."
		"nextevolution . prevevolution";
}

#pokemonid {
	display: flex;
	grid-area: id;
	background-color: rgb(151, 220, 229);
	padding: 0.5rem;
	align-items: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: pre;
	box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.25);
	border-radius: 0.15rem;
	justify-content: center;
}

#pokemonname {
	display: flex;
	grid-area: name;
	background-color: rgb(216, 187, 202);
	padding: 0.5rem;
	align-items: center;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: pre;
	box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.25);
	border-radius: 0.15rem;
}

#pokemonimg {
	grid-area: img;
	width: 4rem;
	height: 4rem;
	padding: 0.25rem;
	box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.25);
	user-select: none;
	border-radius: 0.15rem;
}

.secondaryinfostyle {
	display: flex;
	background-color: rgb(187, 221, 210);
	padding: 0.5rem;
	align-items: center;
	overflow: hidden;
	white-space: pre;
	box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.25);
	border-radius: 0.15rem;
}

#pokemontype {
	grid-area: type;
}

#pokemonheight {
	grid-area: height;
}

#pokemonweight {
	grid-area: weight;
}

#pokemoncandy {
	grid-area: candy;
}

#pokemoncandycount {
	grid-area: candycount;
}

#pokemonegg {
	grid-area: egg;
}

#pokemonspawnchance {
	grid-area: spawnchance;
}

#pokemonavgspawns {
	grid-area: avgspawns;
}

#pokemonspawntime {
	grid-area: spawntime;
}

#pokemonmultipliers {
	grid-area: multipliers;
}

#pokemonweaknesses {
	grid-area: weaknesses;
}

#pokemonprevevolution {
	grid-area: prevevolution;
}

#pokemonnextevolution {
	grid-area: nextevolution;
}

.property {
	color: rgb(179, 147, 120);
}