html body {
	font-size: 13pt;
	font-style: sans-serif;
	background-color: black;
	color: white;
}



.bubbleContainer {
  position: relative;
  width : 90vmin;
  height: 90vmin;
  margin: auto;
}

.bubbleContainer > * {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.sphere {
	border-radius: 50%;
  border: 1px solid gray;
  box-shadow: inset 0 0 45vmin 0em rgba(130, 130, 130, .8) ;
}


.bubble {
  position: absolute;
  top   : 90px;
  left  : 90px;
  width : 10vmin;
  height: 10vmin;
  border-radius: 50%;
  background: radial-gradient(#10A5A7 0%, #10A5F7 60%, transparent 100%);
}


.bubbleRefs > * {
	position: absolute;
	border: 4px solid white;
	border-radius: 50%;
}

.bubbleRefs .top, .bubbleRefs .bottom {
	border-top: none;
	border-bottom: none;
}

.bubbleRefs .left, .bubbleRefs .right {
	border-left: none;
	border-right: none;
}

.bubbleRefs .top {
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
}

.bubbleRefs .right {
	top: 50%;
	right: 0;
	transform: translate(0, -50%);
}

.bubbleRefs .bottom {
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 0);
}

.bubbleRefs .left {
	top: 50%;
	left: 0;
	transform: translate(0, -50%);
}

.bubbleRefs .center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid white;
}

.bubbleRefs .horizontalLine {
	top: 50%;
	left: 0;
	right: 0;
	transform: translate(0, -50%);
	border: none;
	border-top: 1px solid silver;
	border-bottom: 1px solid silver;
	border-radius: 0;
}

.bubbleRefs .verticalLine {
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
	border: none;
	border-left: 1px solid silver;
	border-right: 1px solid silver;
	border-radius: 0;
}

.reload {
	position: absolute;
	background-color: #333;
	color: white;
}