@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;500;600;700;800&display=swap');

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'oxanium', cursive;
}

body {
	text-align: center;
	background: linear-gradient(to bottom, #6ab7f5, #fff);
}

main {
	display: inline-block;
	margin-top: 2%;
	padding: 6%;
	position: relative;
}

.pokedex {
	width: 140%;
	max-width: 410px;

}

.pokemon_image {
	position: absolute;
	bottom: 51%;
	left: 48%;
	transform: translate(-55%, 0%);
	height: 16% ;
}	

.pokemon_data {
	position: absolute;
	font-weight: 600;
	color: #aaa;
	top: 53%;
	right: 32%;
	font-size: clamp (8px, 5vw, 25px);
}

.pokemon_name {
	color: #3a444d;
	text-align: capitalize;

}

.form {
	position: absolute;
	width: 65%;
	top: 63%;
	left: 14%;
}

.input_search {
	width: 78%;
	padding: 6%;
	outline: none;
	border: 2px solid #333;
	border-radius: 5px;
	font-weight: 600;
	color: #3a444d;
	font-size:clamp (8px, 5vw, 5rem);
	box-shadow: -3px 4px 0 #888, -5px 7px 0 #333;
}

.buttons {
	position: absolute;
	bottom: 20%;
	left: 50%;
	width: 50%;
	transform: translate(-57%, 0);
	display: flex;
	gap: 10px;
}

.button {
	width: 50%;
	top: 100%;
	padding: 4%;
	border: 2px solid #000;
	border-radius: 5px;
	font-size: clamp (8px, 5vw, 25px);
	font-weight: 500;
	color: white;
	background-color: #444;
	box-shadow: -2px 3px 0 #222, -4px 6px 0 #000;
}

.button:active {
	box-shadow: inset -4px 4px 0 #222;
	font-size: 0.9rem;
}