ul.navigation { 
    background-image: url(bgimg/six-pointed-star-svgrepo-com.svg);
    background-repeat: no-repeat;
    list-style: none;
    height: 500px;
    width: 500px;
    margin: 4rem auto;
    background-size: 90%;
    border: 24px solid grey;
    border-radius: 320px;
    background-position: center;
    position: relative;
}

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

}

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

li.facebook {
   top: -110px;
    left: 220px;
}

li.instagram {
    top: 489px;
    left: 221px;
}

li.behance {
    top: 69px;
    left: -59px;
}

li.github {
    top: 339px;
    left: -59px;
}

li.mastodon {
    top: 69px;
    left: 511px;
}

li.snapchat {
    top: 345px;
    left: 487px;
}

li a:link svg {
    filter: none;
}

li a:visited svg {
    filter:invert(30%);
}

li a:hover svg {
    filter:invert(50%);
}

li a:active svg {
    filter: blur(2px);
}

li.facebook svg {
    fill: blue;
}

li.instagram svg {
    fill: pink;
}

li.snapchat svg {
    fill: yellow;
    stroke: black;
}

li.behance svg{
    fill: aqua;

}

li.mastodon svg{
    fill: red;
}

li.github svg{
    fill: brown;
}