* {
	user-select: none;  
}
@media all and (orientation:portrait) {  
	#rocker {
		/*border:1px solid #aaa; */
		width:70vw;
		max-width:90vw;
		height:70vw;
		max-height:90vw;
	}
}
@media all and (orientation:landscape) {
	#rocker {
		/*border:1px solid #ccc; */
		width:70vh;
		height:70vh;
		max-height:90vh;
	}
}
/* ----------------*/
body {
	font: 12px sans-serif;
	background: url("../hex.svg");
	background-size: 246px 213px;
	background-attachment: fixed;
}
/*  flex centering */
#mainView, #mainRot, #rocker, #centernode, div.content, div.con ,div.con2 {
	display: flex;
	align-items: center;
	justify-content: center;  
	transform-style: preserve-3d;  
}
#mainView{
	background:rgba(255,255,255,0.25); 
	z-index:-10; 
	touch-action:none;  /* check this later .... */
}
.perspective {
	perspective: 1500px;
	perspective-origin: center;
}
#rocker {
	position:relative; 
}
#centernode{
	position:relative;
	/*background:rgba(255,2,255,1); /*debugging*/
	width:5%;
	height:5%;
}
#centernode.small{
	width:2%;
	height:2%;	
	font-size:smaller;
}
.node {
	position:absolute;
	transform-style: preserve-3d; 
	width:100%;
	height:100%;
	z-index:10;
}
.content{
	width:100%;
	height:100%;
	background:rgba(255,255,255,0.75);
	border-radius:50%;
	/*border:1px solid purple;   */
	z-index:15;
	font-size:1.5em;
}
.con {
	/*border:2px solid purple;*/
	position:absolute;
	/* opacity:0.5;  WHAT! this messes everything up??  Why? https://github.com/aprender/ReFamous/issues/11 ...bummer! */
}
.con2 {
	position:absolute;
	border: 2px solid rgba(128, 0, 128, 0.15);
	opacity:0.5; 
}
/*.con:hover .con2,.con2:hover {
	border: 2px solid rgba(128, 0, 128, 0.75);
	opacity:1;
} */
.con.highlight .con2 {
	border: 2px solid rgba(0, 0, 128, 1);
	opacity:1;
}
.con.axis {
	border: 2px solid rgba(128, 128, 128, 0.75);
	opacity:1;	
}
.node.axis .content {
	background:white;
	color:purple;
}
/* interface details */
.node:hover .content{
	font-weight: bold;
	background:#8000803b;
}
.node .content.wrong {
	background: pink;
}
.node .content.right {
	background: #c0f3c0;
}

#rocker.rock{
	animation: rotation 2s infinite ease-in-out;
} 
#mainView:hover #rocker.rock /*, mainView:hover #rocker.rock .content */
{
    animation-play-state:paused; 
}
@keyframes rotation{
	0%     {transform: rotateY(0deg) ;}
	50%    {transform: rotateX(-1deg) rotateY(1deg) scale(1.01);}
	100%   {transform: rotateY(0deg) ;}
}

/*... 3d rock .. --this didn't work
#rocker.rock .content{
	animation: unrotation 2s infinite ease-in-out;
} */
@keyframes unrotation{ /* this didn't work at least on chrome */
	0%     {transform: rotateY(0deg) ;}
	50%    {transform: rotateY(-1) rotateX(1deg) ;}
	100%   {transform: rotateY(0deg) ;}
}