body {
	background: #EFEFBB;
	background: linear-gradient(to right, rgb(197, 230, 236), rgb(239, 187, 230));
	color: white;
	margin: 0;
	font-family: rubik;
}  

.container {
	padding: 40px;
	margin: 0 auto;
	text-align: center;
}

.container2 {
	padding: 40px;
	margin: 0 auto;
	text-align: center;
}

h1 {
	text-align: center;
	font-size: 65px;
	font-weight: bold;
}

.pokedex {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	grid-gap: 20px;
	padding-inline-start: 0;
}

.card {
	list-style: none;
	padding: 40px;
	color: #222;
	text-align: center;
	border-radius: 20px;
	position: relative;
}

.card::after {
	content: "";
	display: block;
	width: 50%;
	height: 45%;
	border-radius: 100%;
	background-color: #fff;
	opacity: .7;
	position: absolute;
	top: 15%;
	left: 25%;
}

.steel {
	background-color: #f4f4f4;
}

.fire {
	background-color: #FDDFDF;
}

.grass {
	background-color: #DEFDE0;
}

.electric {
	background-color: #FCF7DE;
}

.water, .ice {
	background-color: #DEF3FD;
}

.ground {
	background-color: #f4e7da;
}

.rock {
	background-color: #d5d5d4;
}

.fairy {
	background-color: #fceaff;
}

.poison {
	background-color: #c4add6;
}

.bug {
	background-color: #f8d5a3;
}

.dragon {
	background-color: #97b3e6;
}

.psychic {
	background-color: #eaeda1;
}

.flying {
	background-color: #F5F5F5;
}

.fighting {
	background-color: #E6E0D4;
}

.ghost {
	background-color: #ebc2c2;
}

.normal {
	background-color: #F5F5F5;
}

.card:hover {
	animation: bounce 0.5s linear;
}

.card-title {
	text-transform: capitalize;
	margin-bottom: 0px;
	font-size: 32px;
	font-weight: normal;
	position: relative;
	z-index: 2;
}

	.card-subtitle {
	margin-top: 5px;
	color: #666;
	font-weight: lighter;
	position: relative;
	z-index: 2;
}

.card-image {
	height: 180px;
	position: relative;
	z-index: 2;
}

@keyframes bounce {
	20% {
	transform: translateY(-6px);
	}
	40% {
	transform: translateY(0px);
	}
	80% {
	transform: translateY(-2px);
	}
	100% {
	transform: translateY(0);
	}
}

.btn-poke{
    background-color: rgb(238, 238, 238);
    color: rgb(136, 133, 133);
}

input[type=text] {
	width: 40%;
		padding: 5px 5px;
		margin: 8px 0;
		box-sizing: border-box;
		background-color: rgb(238, 238, 238);
	}
	.search{
		background-color: rgba(153, 22, 22, 0.596);
	}