Dot Nav

#nav {
background-color: transparent;
width: 70px;
height: 5px;
margin:auto;
position: absolute;
left: 39.5vw;
top: 2vw;
text-align: center;
z-index: 10;
}

#nav a, #nav a:link, #nav a:visited {
display:inline-block;
background: #332628;
color: #332628;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
height: 10px;
width: 10px;
border-radius: 100%;
box-shadow: 0px 0px 7px #ffecef;
  -webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
}

#nav a:active, #nav a:hover {
display:inline-block;
height: 10px;
width: 10px;
border-radius: 100%;
text-decoration:none;
background: #ffdfe5;
color: #ffdfe5;
margin: 0px;
box-shadow: 0px 0px 5px #ffecef;
  -webkit-transition: 0.5s linear;
 -moz-transition: 0.5s linear;
 -o-transition: 0.5s linear;
 transition: 0.5s linear;
}


<div id="nav">
<a href="#one"></a>
<a href="#two"></a>
<a href="#three"></a>
<a href="#four"></a>
</div>