body{
	margin: 0;
	font-family: Arial;
	background-color: rgba(0, 0, 0, 0.15);
}

.principal{
	display: flex;
	flex-direction: column;
	align-items: center;
}

.caixatexto{
	display: flex;
	align-items: flex-start;
	width: 100%;
	background-color: #222;
	padding: 1.1rem;
	box-sizing: border-box;
	border-bottom: 3px solid #f00;
	gap: 3rem;
}

.caixatexto a {
	font-weight: bold;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	border-radius: 0.5rem;
	color: #868383;
	background-color: #fff;
	gap: 0.4rem;
	text-decoration: none;
	padding: 0.5rem 1rem;
	width: 6rem;
	transition: background-color 0.2s, transform 0.2s;
}

.caixatexto img {
	width: 3rem;
	height: 3rem;
}

.vermelho{
	border-bottom: 3px solid #f00;
}

.vermelho.selecionado{
	color: #FFFFFF;
	background-color: #000000;
}

.vermelho:hover {
	background-color: #f00;
	transform: translateY(-0.2rem);
}

.laranja{
	border-bottom: 3px solid #f70;
}

.laranja.selecionado{
	color: #FFFFFF;
	background-color: #000000;
}

.laranja:hover {
	background-color: #f70;
	transform: translateY(-0.2rem);
}

.caixatexto a:hover {
	color: #302e2e
}

.caixatexto img {
	max-height: 2.5rem;
	max-width: 100%;
	display: block;
}

.caixatexto span {
	font-size: 1rem;
}

.tipo{
	border-radius: 0.5rem;
	color: #000;
	font-weight: bold;
	padding: 1rem;
}

.planta{
	background-color: #7AC74C;
}

.venenoso{
	background-color: #A33EA1;
}

.fogo{
	background-color: #EE8130;
}

.voador{
	background-color: #A98FF3;
}

.agua{
	background-color: #6390F0;
}

.lutador{
	background-color: #C22E28;
}

.gelo{
	background-color: #96D9D6;
}

.fada{
	background-color: #D685AD;
}

.dragao{
	background-color: #6F35FC;
}

.terrestre{
	background-color: #E2BF65;
}

.inseto{
	background-color: #A6B91A;
}

.fantasma{
	background-color: #735797;
}

.pedra{
	background-color: #B6A136;
}

.sombrio{
	background-color: #000;
	color: #fff;
}

.aco{
	background-color: #B7B7CE;
}

.psiquico{
	background-color: #F95587;
}

.normal{
	background-color: #fff;
}

.eletrico{
	background-color: #F7D02C;
}


.tabela{
	border-radius: 1rem;
	text-align: center;
	font-size: 25px;
}

.tabela img{
	height: 200px;
	width: 200px;
}

.tabela td{
	background-color: #888;
}

.tabela th{
	background-color: #888;
}
.imagem{
	height: 5rem;
	width: 8rem;
}

.form{
	font-size: 2rem;
}

.list{
}

.form.dois{
	font-size: 2rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.input{
	font-size: 1.2  rem;
}

footer{
	display: flex;
	flex-direction: column;
	align-items: center;
	position: fixed;
	top: calc(100vh - 5rem);
	left: 0;
	width: 100%;
	background-color: #222;
}