:root {
  --fade-time: 300ms;
	--clr-bg: white;
	--clr-bg-tint: snow;
	--clr-txt: black;
	--clr-txt-low-op: rgb(0,0,0,.2);
	--clr-txt-gray: gray;
	--clr-txt-tint: silver;
	--clr-foot: red;
	--clr-thm: lightblue;
}
html {
	scroll-behavior: smooth;
	line-height: 1.5;
}
body {
	background: var(--clr-bg);
	color: var(--clr-txt);
}
footer {
	min-height: 10ch;
	background: var(--clr-foot);
}
header {
	container-type: inline-size;
	background: var(--clr-txt-tint);
}
h1, h2, h3 {
	text-align: center;
}
nav {
	padding: 1ch;
	display: flex;
	place-content: space-between;
	list-style: none;
	background-color: var(--clr-thm);
	min-height: 2.75rem;
	overflow-x: auto;
}
.filter-btn {
		user-select: none;
		transition: background-color var(--fade-time) ease-in-out, transform var(--fade-time) ease-in-out;
}
button {
	background: transparent;
	border: 2px solid transparent;
	min-width: 2.75rem;
	min-height: 2.5rem;
}
img {
	max-width: 100%;
	height: auto;
}
.pkmn-list {
	list-style: none;
	padding: 0;
	margin-inline: .5em;
	margin-bottom: 2em;
}
.pkmn-list > * {
	margin-bottom: .5em;
}
.pkmn-list[hidden], h2[hidden] {
	display: none;
}
.pkmn {
	padding: 1.1rem .7rem;
	margin-inline: .25rem;
	border-radius: .5rem;
	box-shadow: 0 0 .5rem var(--clr-txt-tint);
	display: grid;
	grid-template-columns: repeat(2, 50%);
	place-items: center;
}

.pkmn-info-moves {
	padding: 1.15em;
	border-radius: .5rem;
	box-shadow: 0 0 .5rem var(--clr-txt-tint);
}
.filter-btn.active {
	pointer-events: none;
	background: var(--clr-txt);
	color: var(--clr-bg);
	box-shadow: 0 0 .5rem var(--clr-txt-low-op);
}
#backToTop {
	font-size: 1.1rem;
	position: fixed;
	bottom: 2rem;
	right: 1rem;
	border-radius: 1rem;
	padding: .5rem;
}
#backToTop, #goBack {
	opacity: .6;
	transition: opacity var(--fade-time) ease-in-out;
	box-shadow: 0 0 1rem transparent;
}
#backToTop, #backToTop > *, #goBack > * {
	user-select: none;
	cursor: pointer;
}
.pkmn,
#backToTop,
#backToTop > *,
#goBack > *
 {
	transition: box-shadow var(--fade-time) ease-in-out;
 }
@media (hover:hover) {
	.pkmn:hover,
	.pkmn:focus-within {
		box-shadow: 0 0 1.25rem .25rem var(--clr-txt-tint);
	}
	#backToTop:hover,
	#backToTop:focus-within {
		opacity: 1;
		box-shadow: 0 0 1rem var(--clr-txt);
	}
  .filter-btn:hover, .filter-btn:focus {
    background-color: var(--clr-bg-tint);
    color: var(--clr-txt);
    cursor: pointer;
    transform: scale(1.2);
  }
	@media (orientation:portrait) {
		#backToTop:hover,
		#backToTop:focus-within {
			box-shadow: 0 0 1rem var(--clr-txt-tint);
		}
	}
}
@media (width > 27rem) {
	.pkmn-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
		grid-gap: 1rem;
	}
}
@media (prefers-color-scheme: dark) {
	:root {
	--clr-bg: black;
	--clr-bg-tint: gray;
	--clr-txt: white;
	--clr-txt-gray: snow;
	}
}