*, *::before, *::after {
	box-sizing: border-box;
}

html, body {
	background: #201717;
	color:white;
}

#wrap {
	position: absolute;
	left: 0; top: 0; right: 0; bottom: 0;
	overflow: hidden;
}

#board {
	height: 100%;
	width: 100%;
	background: #201717;
}

.disabled .orb {
	opacity: 0.6;
}

/* Highlighting */
.highlight-salt .symbol-salt .orb-fill,
.highlight-air .symbol-air .orb-fill,
.highlight-fire .symbol-fire .orb-fill,
.highlight-water .symbol-water .orb-fill,
.highlight-earth .symbol-earth .orb-fill,
.highlight-mercury .symbol-mercury .orb-fill,
.highlight-lead .symbol-lead .orb-fill,
.highlight-tin .symbol-tin .orb-fill,
.highlight-iron .symbol-iron .orb-fill,
.highlight-copper .symbol-copper .orb-fill,
.highlight-silver .symbol-silver .orb-fill,
.highlight-gold .symbol-gold .orb-fill,
.highlight-vitae .symbol-vitae .orb-fill,
.highlight-mors .symbol-mors .orb-fill {
	stroke: yellow;
	stroke-width: 7px;
}

/* Orb is clickable */
.orb {
	cursor: pointer;
}

/* Disabled effect */
.orb.disabled {
	cursor: default;
}

/* No-disabled-fade version has all orbs at full opacity */
.cfg-fade-disabled .orb.disabled {
	opacity: 0.6;
}

/* Disabled orb has no glow or shadow */
.orb.disabled .orb-glow,
.orb.disabled:hover .orb-glow,
.cfg-fade-disabled .orb.disabled .orb-shadow,
.cfg-fade-disabled .orb.disabled:hover .orb-shadow {
	opacity: 0 !important;
}

.cfg-no-fade-disabled.cfg-blur .orb.disabled .orb-shadow,
.cfg-no-fade-disabled.cfg-blur .orb.disabled:hover .orb-shadow {
	opacity: 1 !important;
}

/* Blur effect */
.orb-shadow, .orb-glow {
	filter: url('#filterDropshadow');
}

/* Hover and select effects */
.orb-glow, .orb-shadow {
	transition: opacity linear 0.1s;
}

.orb.selected .orb-glow,
.orb:hover .orb-glow  {
	opacity: 1;
}

.orb.selected .orb-shadow,
.orb:hover .orb-shadow {
	opacity: 0;
}

/* No-anim version applies animations instantly */
.cfg-no-anim * {
	transition: none !important;
}

/* No-blur version uses white ring around selected orbs, and has no shadow */
.cfg-no-blur .orb-shadow,
.cfg-no-blur .orb-glow,
.cfg-no-blur .tile-shadow {
	filter: none !important;
	opacity: 0 !important;
}

.cfg-no-blur .board-bg-hex {
	fill: #534334;
}

.cfg-no-blur .orb.selected .orb-fill,
.cfg-no-blur .orb:hover .orb-fill {
	stroke: white;
	stroke-width: 10px;
	paint-order: stroke;
}

.cfg-no-blur .orb.disabled .orb-fill {
	stroke: transparent !important;
}

text {
	paint-order: stroke;
	font: 32px "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", "URW Palladio L", "New Century Schoolbook", Georgia, "Liberation Serif", "Noto Serif", serif;
	user-select: none;
}

/* GUI */
.button-text {
	fill: #8d7761;
	stroke: #453b30;
	text-anchor: start;
	text-align: left;
	stroke-width: 2px;
	cursor: pointer;
}

.you-win {
	font-size: 80px;
	text-anchor: middle;
	dominant-baseline: middle;
	fill: #ffd675;
	stroke: #2d2520;
	stroke-width: 4px;

	opacity: 0;
	pointer-events: none;
	transition: opacity linear 0.2s;
}

.you-win.show {
	opacity: 1;
}

.cfg-no-anim .you-win {
	transition: none;
}

.button-text.config {
	font-size: 26px;
}

.button-text.right {
	text-anchor: end;
}

.button-text:hover {
	fill: #e3c4a2;
}

.button-text:active {
	transform: translateY(1px);
}

.button-text.disabled,
.button-text.disabled:hover,
.button-text.disabled:active {
	cursor: default;
	opacity: .5;
	fill: #8d7761;
	transform: none;
}