#container {position:relative; background:#333; overflow:hidden;}
#container .bar {width:20px; position:absolute; top:50%; transform:translateY(-50%); cursor:pointer; transition:.1s;}
#container #leftBar {background:#00F; left:20px;}
#container #rightBar {background:#F00; right:20px;}
#container #pongBall {background:#FFF; border-radius:50%; border:2px solid #AAA; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:20px; cursor:pointer;}


.hoverBox {position:fixed; opacity:.75; z-index:10;}

.hoverBox#animBox {top:80px; left:50%; transform:translate(-50%,-50%);}
.hoverBox button.anim {padding:6px 20px; border-radius:50px; border:2px solid #AAA; background:#888;}
.hoverBox button.anim#start {right:50%; /*transform:translateX(-50%);*/}
.hoverBox button.anim#pause {left:50%; /*transform:translateX(50%);*/}

.hoverBox#speedBox {bottom:12px; right:48px;}
.hoverBox button.speed {padding:6px 10px; border-radius:50%; border:2px solid #AAA; background:#888; margin:3px;}
.hoverBox button.speed#down {bottom:24px;}
.hoverBox button.speed#up {bottom:64px;}

.hoverBox#codeBox {top:16px; left:50%; transform:translateX(-50%); text-align:center;}
.hoverBox#codeBox input {border:2px solid #888; border-radius:50px; padding:6px 18px; background:#000; color:#0F0;}
.hoverBox#codeBox button {border:0; border-radius:0px 50px 50px 0px; background:#222; color:#FFF; padding:6px 10px 6px 8px; position:absolute; right:2px; top:2px;}

@media screen and (max-width:767px) {
	#container #pongBall {padding:10px;}
	.hoverBox button {font-size:10px; transition:.5s;}
	.hoverBox button.anim {padding:3px 10px;}
	.hoverBox button.speed {padding:3px 6px 2px;}
}