body
{
	color: #FFF;
	--text-hover: #F0F;
	--text-open: #A0A;
	--text-taken: #AAA;
	--text-taken-hover: #606;
	font-family: "Arial"; sans-serif;
	text-shadow: 5px 5px 15px #000;
	margin: 0 auto;
	padding: 1em;
	background-image: url("img/castora.jpg");
	background-size: cover;
}
h1, p {
	margin: 0;
	padding: 0;
}
.map
{
	position: relative;
	margin: 0 auto;
}
.map svg
{
	position: absolute;
	top: 0;
	left: 0;
	stroke: rgba(255,255,255,0.50);
	stroke-width: 2px;
}
.map svg path.ll
{
	stroke: rgba(0,200,200,1.00);
	stroke-width: 4px;
	fill: transparent;
}
.map svg line.hi { stroke: rgba(110,180,255,0.50); }
.map svg line.lo { stroke: rgba(255,220,20,0.25); }

.map label
{
	position: absolute;
	height: 14px;
	width: 14px;
	padding: 2px 3px 3px 2px;
	background: rgba(0,0,0,0.75);
	border: 3px var(--text-open) solid;
	border-radius: 100px;
	color: #FFF;
	font-size: 12px;
	text-align: center;
}
.map label.heropoint { border-color: #A00; }
.map label.heropoint:hover { border-color: #F00; }
.map label.leyline { border-color: #0AA; }
.map label.leyline:hover { border-color: #0FF; }
.map label.mushroom { border-color: #A80; }
.map label.mushroom:hover { border-color: #FD0; }

.map input[type="checkbox"] {
	display: none;
}

.map input[type="checkbox"]:not(:checked) + label:hover
{
	border-color: var(--text-hover);
}

.map input[type="checkbox"]:checked + label
{
	color: var(--text-taken);
	border-color: var(--text-taken);
}

.map input[type="checkbox"]:checked + label:hover
{
	border-color: var(--text-taken-hover);
}

#mastery_1:checked ~ .map .mas1 { display: none; }
#mastery_1:not(:checked) ~ .map .mas0 { display: none; }
#hide_hp:checked ~ .map .heropoint { display: none; }
#hide_jm:checked ~ .map .mushroom { display: none; }
#hide_ll:checked ~ .map path.ll, #hide_ll:checked ~ .map .leyline { display: none; }