:root {
	--background:#f5f5f5;
	--color:#292929;
	
	--navbg:#333;
	--navcolor:#FFF;

	--link:#292929;
	--linkhover:#292929;
	--linkbg:#fff6bb;
	--linkunderline:#9a9a9a;

	--box:#eee;
	--boxborder:#ccc;

	--hr:#ccc;

	--status:#fdecc8;
	--allystatus:#fadec9;
	--buff:#dbeddb;
	--debuff:#ffe2dd;
	--utility:#e3e2e0;
	--obtain:#ececec;

	--label:#444;
	--labelchecked:#FFF;
	--labelcheckedbg:#555;

	--pot:#e08831;
	--m3:#bc0000;
}


@media (prefers-color-scheme: dark) {
	:root {
		--background:#222;
		--color:#ddd;
		
		--navbg:#333;
		--navcolor:#FFF;
	
		--link:#cfcfcf;
		--linkhover:#292929;
		--linkbg:#fff6bb;
		--linkunderline:#5e5e5e;
	
		--box:#3c3c3c;
		--boxborder:#111;
	
		--hr:#444;
	
		--status:#655022;
		--allystatus:#71411f;
		--buff:#447b44;
		--debuff:#8a3d30;
		--utility:#444;
		--obtain:#555;
	
		--label:#ddd;
		--labelchecked:#FFF;
		--labelcheckedbg:#555;
	
		--pot:#f7a654;
		--m3:#f24e4e;
	}
}

* {padding:0; margin:0;}

body {
	background:var(--background);
	color:var(--color);
	font:1rem sans-serif;
}

.header { 
	padding:15px;
	display:block;
	text-align:center;
	font-size:14pt;
}

nav {
	background:var(--navbg) url(gnosismobile.png) no-repeat top center;
	color:var(--navcolor);
	font-size:12pt;
	text-align:center;
	text-shadow: 1px 1px #000;
}

nav a {
	margin-left:6px;
	color:var(--navcolor);
	text-decoration:none;
	display:inline-block;
	padding:10px;
}

nav a:hover {
	background:#000;
}

main {
	margin:20px;
}

main h1 {
	font:2.2em Georgia, serif;
	margin:5px 0 5px 0;
}

main h2 {
	font: 1.8em Georgia, serif;
	margin:8px 0 8px 0;
}

main h3 {
	font:1.5em Georgia, serif;
	margin:5px 0 5px 0;
}

main p, footer p {
	margin:8px 0 8px 0;
	line-height:1.5;
}

main a, footer a {
	color:var(--link);
	text-decoration:none;
	border-bottom:1px solid var(--linkunderline);
}

main a:hover, footer a:hover {
	background:var(--linkbg);
	color:var(--linkhover);
}

main ul li {
	margin: 5px 0 5px 0;
	line-height:1.5;
	list-style-position:inside;
}

main ul li ul {
	margin-left:25px;
}

main img {
	max-width:100%;
    height:auto;
}

summary {
	font-weight:bold;
	cursor:pointer;
	margin:5px 0 5px 0;
}

footer {
	text-align:center;
	margin:15px;
	padding:10px;
	border-top:0.5px solid var(--hr);
	font-size:0.85em;
}

hr {
	border:0.5px solid var(--hr);
	margin:10px;
}

/*Main operator table*/

#operators {
	border:0;
	padding:5px;
	border-collapse: collapse;
}

#operators td {
	padding:5px;
}

#operators tr {
	border-bottom:1px solid var(--hr);
}

#operators th {
	text-align:left;
	padding:5px;
}

.name {
	width:15%;
	border-right:1px solid var(--hr);
}

.name img {
	width:25px;
}

.rare {
	width:8%;
	border-right:1px solid var(--hr);
}

.class {
	width:20%;
	border-right:1px solid var(--hr);
}

#operators.tags {
	width:55%;
}

.tags span {
	padding:3px;
	border-radius:5px;
	line-height:1.8;
}

.status {
	background:var(--status);
}

.allystatus {
	background:var(--allystatus);
}

.buff {
	background:var(--buff);
}

.debuff {
	background:var(--debuff);
}

.utility {
	background:var(--utility);
}

.obtain {
	background:var(--obtain);
}

#filters input {
  display: none;
}

#filters label {
	padding:10px;
	margin: 5px;
	border:1px solid;
	color:var(--label);
	display:inline-block;
}

#filters :checked + label {
	color:var(--labelchecked);
	background:var(--labelcheckedbg);
}

.classes {
	display:none;
}

.show {
	display:block;
}

/*.filter {
	margin:10px 10px 15px 10px;
	display:none;
}*/

/*Pages*/


#overview td {
	padding:5px;
}


@media screen and (min-width: 800px) {
	body { font-size:12pt;}
	.header { display:inline-block;}
	nav { font-size:12pt; height:60px; text-align:left; background: var(--navbg) url(gnosise2.png) no-repeat top right; }
	nav a { 
	padding:20px; }
	main { width:80%; margin:20px auto;}
	footer { width:80%; margin:15px auto;}

	.desktoponly {
		display:inline;
	}

	.mobileonly {
		display:none;
	}

}