html{
	display:flex;
	justify-content:center;
	align-items:center;
}

.nodeButton{
	background:white;
	border-radius:30px/30px;
	padding:10px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	opacity:0;
	transition:0.5s;
	z-index:20;
}

.nodeButton:hover{
	opacity:0.5;
	transition:0.5s;
	cursor:pointer;
}

.nodeClass{
	background:grey;
	border-radius:100%/100%;
	position:absolute;
	display:flex;
	width:110px;
	height:110px;
	transform:translate(-50%,-50%);
	cursor:pointer;
	z-index:10;
}

.nodeName{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	z-index:0;
	max-width:100px;
	white-space:nowrap;
	overflow:hidden;
	display:block;
	text-overflow:ellipsis;
	box-sizing: border-box;
	transition:0.5s;
	user-select:none;
}



#svg {
	position: fixed;
	width: 100%;
	height: 100%;
  }
  
  .handle {
	fill: dodgerblue;
  }
  
  .path {
	fill: none;
	stroke: dodgerblue;
	stroke-width: 6;
  }
  
#buttonDiv{
	display:flex;
	justify-content:center;
}

#treeText{
	display:flex;
	justify-content:center;
	opacity:0;
}

.main{
	width:1500px;
	height:1500px;
	border:solid;
	border-color:black;
}

.treeButton{
	background:white;
	border-radius:30px/30px;
	border-color:black;
	padding:10px;
	transition:0.5s;
}

.treeButton:hover{
	transform:scale(1.3);
	transition:0.5s;
	cursor:pointer;
}