nav{
    border: 1px solid #444;
    padding: 4rem;
}

nav ul {
height: 500px;
width: 500px;
background-image:url(../img/six-pointed-star-svgrepo-com.svg) ;
margin: 4rem auto;
padding: 0;
background-size: 90%;
position: relative;
border:23px solid rgba(0,0,0,0.1);
background-repeat: no-repeat;
border-radius:310px;
background-position: center;
list-style-type: none;

}



li.social {
display: block;
width: 100px;
height: 100px;
position:absolute;
}

li.social svg {
display:block;
height: auto;
width: 100%;
}

li.behance {
top: -133px;
left: 203px;
}

.social.github {
    top:57px ;
    left:498px;
}

.social.snapchat {
  top: 350px;
  left: -91px;
}

.social.mastodon {
  top: 67px;
  left: -112px;
}

.social.facebook {
  top: 350px;
  right: -91px;
}

.social.instagram {
  top: 523px;
  right: 197px;
 
}


/* ==  LoVeHA Rule = Link Visited Hover Active for TEXT === */ a:link {text-decoration: none;} a:visited {color: gray;} a:hover {text-decoration: underline;} a:active {color: magenta;}


  /* ==  LoVeHA Rule = Link Visited Hover Active  for SVGs == */    li a:link svg {  /* Ordinary link */        filter: none;    }    li a:visited svg {  /* Visited = been there, seen that */        filter: invert(30%);         /* not allowed on visited state for privacy reasons */       }    li a:hover svg {  /* Mouse is over the link */        filter: invert(50%);        /* You could use a fill or stroke instead of a filter */    }    li a:active svg {  /* Actually clicking down on the link */        filter: blur(2px);    }



     /* == Text Position Tweaks == */    a span { /* Rules for ALL spans inside a link */        display: block;        text-align: center;        font-family: arial, helvetica, sans-serif;        font-weight: bold;    }    li.behance a span {  /* Behance only */        position: relative;        top: -1rem;    }    li.instagram a span {  /* Instagram only */        position: relative;        top: -0.5rem;    }