body,html{height:100%}body{background-color:#292929;margin:0;overflow:hidden}nav{display:table;left:35%;margin:0 auto;position:absolute;right:0;top:0;transform:translateY(0);width:319px}nav a{color:#949494;display:table-cell;font-family:Verdana,Geneva,Tahoma,sans-serif;font-weight:700;padding:10px 20px;position:relative;text-align:center;text-decoration:none;transition:color .2s ease;width:33.3333%}nav a:after,nav a:before{border-radius:50%;content:"";position:absolute;transform:scale(0);transition:transform .2s ease}nav a:before{height:6px;left:10px;top:0;width:6px}nav a:after{height:4px;left:18px;top:5px;width:4px}nav a:first-child:before{background-color:#00a99d}nav a:first-child:after,nav a:nth-child(2):before{background-color:#93278f}nav a:nth-child(2):after,nav a:nth-child(3):before{background-color:#f7931e}nav a:nth-child(3):after{background-color:#29abe2}nav a:nth-child(4):before{background-color:#f7931e}nav a:nth-child(4):after{background-color:#29abe2}nav a:nth-child(5):before{background-color:#f7931e}nav a:nth-child(5):after{background-color:#29abe2}#indicator{background-color:#fff;border-radius:5px;bottom:0;height:3px;left:5%;position:absolute;transition:left .2s ease;width:30px}nav a:hover{color:#fff}nav a:hover:after,nav a:hover:before{transform:scale(1)}nav a:first-child:hover~#indicator{background:linear-gradient(130deg,#00a99d,#93278f)}nav a:nth-child(2):hover~#indicator{background:linear-gradient(130deg,#93278f,#f7931e);left:23%}nav a:nth-child(3):hover~#indicator{background:linear-gradient(130deg,#f7931e,#29abe2);left:46%}nav a:nth-child(4):hover~#indicator{background:linear-gradient(130deg,#f7931e,#29abe2);left:67%}nav a:nth-child(5):hover~#indicator{background:linear-gradient(130deg,#f7931e,#29abe2);left:86%}