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, .1);

    background-repeat: no-repeat;
    border-radius: 310px;
    background-position: center;
    list-style: none;
}

li.social { /* style all list items 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: -96px;
    left: 199px;
}
li.behance {
     top: 86px;
    left: 454px;
}
li.github {
     top: 326px;
    left: 454px;
}
li.instagram{
    top: 480px;
    left: 199px;
}
li.mastodon{
    top: 326px;
    left: -60px;
}
li.snapchat{
    top: 86px;
    left: -57px;
}

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

/* === 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 one visited state for privacy reasons */
    }

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

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

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