ul.navigation{
    height: 500px;
    width: 500px;

    background-image: url(bgimg/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 {    /* style all list item with a class="social"  */
    display: block;
    width: 100px;
    height: 100px;
    position:absolute; /* set positioning for each, avoids typing later*/
}

li.social svg { /*Style all SVG icons */
    display: block;
    height: auto;
    width: 100%;
}

li.facebook {
	top: -19%;
	left: 201px;
}


li.instagram {
	top: 18%;
	left: 442px;
}

li.github {
	top: 94%;
	left: 201px;
}

li.behance {
	top: 67%;
	left: -43px;
}

li.snapchat {
	top: 16%;
	left: -52px;
}

li.mastodon {
	top: 63%;
	left: 453px;
}

li.behance svg{fill: rgb(20,104,254);}
li.facebook svg{fill: rgb(0,0,109);}
li.instagram svg{fill:red;}
li.mastodon svg{fill: purple;}
li.snapchat svg{fill:yellow; stroke: black}
li.github svg{fill: black;}

li a:Link svg{ /* Ordinary link*/
    filter: none;
}

li a:visited svg{ /* Visited*/
    filter: invert(30%); /* not allowed on visited state for privacy reasons */
}

li a:hover svg { /* mouse over the link*/
    filter: invert(50%);
}

li a:active svg{ /* when clicking the link down */
    filter: blur(2px);
}

a:Link {text-decoration: none;}
a:visited {color: gray;}
a:hover {text-decoration: underline;}
a:active {color:magenta}