@font-face {
	font-family: "Pokemon RS"; 
	src: 
		local("Pokemon RS"),
		url("../pokemon-rs.otf") format("opentype");
}
*{
	font-family: "Pokemon RS";
	color: #ddd;
}
body{
	font-size: 20px;
	background-color: #eee3ab;
	margin-bottom: 100px;
}
header {
	font-size: 25px;
	background-color: rgb(53,82,142);
	margin: 7px;
	padding: 10px;
	text-align: center;
}
.content {
	display: none;
	margin: 7px;
	margin-top: 20px;
	padding: 30px;
	background-color: rgb(53,82,142);
}
.lista{
	display: none;
	margin: 7px;
	padding: 5px;
	background-color: none;
}
.button-style {
	font-size: 20px;
	margin: 7px;
	padding: 10px;
	cursor: pointer;
	background-color: rgb(53,82,142);
	transition: background-color 0.3s ease;
	display: block;
	border: none;
}
.button-style:hover{
	background-color: #555;
}
a{
	text-decoration: none;
}
a:hover{
	color: #e74c3c;
	text-decoration: underline;
}
.materia {
	margin: 7px;
	margin-top: 20px;
	padding: 15px;
	background-color: rgb(53,82,142);
}

body.zaffiro {
	background-color: #0077BC;
}
body.zaffiro header,
body.zaffiro .content,
body.zaffiro .materia {
	background-color: #065A9C;
}
body.zaffiro .button-style {
	background-color: #065A9C;
}
body.zaffiro .button-style:hover {
	background-color: #E84A4D;
}
body.zaffiro * {
	color: #C2D5E4;
}

body.perla {
	background-color: #B074A8;
}
body.perla header,
body.perla .content,
body.perla .materia {
	background-color: #F2CDCC;
}
body.perla .button-style {
	background-color: #F2CDCC;
}
body.perla .button-style:hover {
	background-color: #E3D9D9;
}
body.perla * {
	color: #58606F;
}

body.showdown {
	background-color: #dfe7f2;
}
body.showdown header,
body.showdown .content,
body.showdown .materia {
	background-color: #3c5a99;
}
body.showdown .button-style {
	background-color: #3c5a99;
}
body.showdown .button-style:hover {
	background-color: #7d99d4;
}
body.showdown * {
	color: white;
}

body.under {
	background-color: #0b0014;
}
body.under header,
body.under .content,
body.under .materia {
	background-color: #24113a;
}
body.under .button-style {
	background-color: #24113a;
}
body.under .button-style:hover {
	background-color: #6d44a6;
}
body.under * {
	color: #ffffff;
}

body.rej {
	background-color: #120018;
}
body.rej header,
body.rej .content,
body.rej .materia {
	background-color: #32004a;
}
body.rej .button-style {
	background-color: #32004a;
}
body.rej .button-style:hover {
	background-color: #8d24cf;
}
body.rej * {
	color: #e9d8ff;
}

body.pokerogue {
	background-color: #1c1024;
}
body.pokerogue header,
body.pokerogue .content,
body.pokerogue .materia {
	background-color: #511845;
}
body.pokerogue .button-style {
	background-color: #511845;
}
body.pokerogue .button-style:hover {
	background-color: #c70039;
}
body.pokerogue * {
	color: #ffd166;
}

body.pokedoku {
	background-color: #f5f5f5;
}
body.pokedoku header,
body.pokedoku .content,
body.pokedoku .materia {
	background-color: #3b82f6;
}
body.pokedoku .button-style {
	background-color: #3b82f6;
}
body.pokedoku .button-style:hover {
	background-color: #93c5fd;
}
body.pokedoku * {
	color: white;
}

body.squirdle {
	background-color: #d6f1ff;
}
body.squirdle header,
body.squirdle .content,
body.squirdle .materia {
	background-color: #3f8ed8;
}
body.squirdle .button-style {
	background-color: #3f8ed8;
}
body.squirdle .button-style:hover {
	background-color: #8ac6ff;
}
body.squirdle * {
	color: white;
}
	
body.omori {
	background-color: #000000;
}
body.omori header,
body.omori .content,
body.omori .materia {
	background-color: #fefbff;
}
body.omori .button-style {
	background-color: #fefbff;
}
body.omori .button-style:hover {
	background-color: #0099ff;
}
body.omori * {
	color: #a168f9;
}

body.smeraldo {
	background-color: #7be495;
}
body.smeraldo header,
body.smeraldo .content,
body.smeraldo .materia {
	background-color: #006b3c;
}
body.smeraldo .button-style {
	background-color: #006b3c;
}
body.smeraldo .button-style:hover {
	background-color: #1fd16d;
}
body.smeraldo * {
	color: #ffe082;
}

body.katana {
	background-color: #0d0221;
}
body.katana header,
body.katana .content,
body.katana .materia {
	background-color: #261447;
}
body.katana .button-style {
	background-color: #261447;
}
body.katana .button-style:hover {
	background-color: #ff5d92;
}
body.katana * {
	color: #05d9e8;
}

body.nero {
	background-color: #0f0f0f;
}
body.nero header,
body.nero .content,
body.nero .materia {
	background-color: #222222;
}
body.nero .button-style {
	background-color: #222222;
}
body.nero .button-style:hover {
	background-color: #666666;
}
body.nero * {
	color: #f0f0f0;
}

body.necro {
	background-color: #13001c;
}
body.necro header,
body.necro .content,
body.necro .materia {
	background-color: #330044;
}
body.necro .button-style {
	background-color: #330044;
}
body.necro .button-style:hover {
	background-color: #aa33ff;
}
body.necro * {
	color: #00ff88;
}

body.repl {
	background-color: #d9d6cf;
}
body.repl header,
body.repl .content,
body.repl .materia {
	background-color: #8c857b;
}
body.repl .button-style {
	background-color: #8c857b;
}
body.repl .button-style:hover {
	background-color: #c7c0b6;
}
body.repl * {
	color: #f8f6f0;
}

body.senaar {
	background-color: #f0d6a3;
}
body.senaar header,
body.senaar .content,
body.senaar .materia {
	background-color: #b97a3d;
}
body.senaar .button-style {
	background-color: #b97a3d;
}
body.senaar .button-style:hover {
	background-color: #e7b66c;
}
body.senaar * {
	color: #2f4f6f;
}

body.tectonic {
	background-color: #7a6f64;
}
body.tectonic header,
body.tectonic .content,
body.tectonic .materia {
	background-color: #4b4038;
}
body.tectonic .button-style {
	background-color: #4b4038;
}
body.tectonic .button-style:hover {
	background-color: #a1887f;
}
body.tectonic * {
	color: #f5e6c8;
}

body.trust {
	background-color: #0f1115;
}
body.trust header,
body.trust .content,
body.trust .materia {
	background-color: #1c2430;
}
body.trust .button-style {
	background-color: #1c2430;
}
body.trust .button-style:hover {
	background-color: #58708f;
}
body.trust * {
	color: #c8d6e5;
}