/* styling body element, for bg color, width/height and display flex for easier alignment */
body{
    background: #02031d;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-items: center;
    padding:0;
    margin:0;
}
/* positioning ul absolute and display flex for easier alignment */
ul{
    position: absolute;
    display: flex;
}
/* setting list style to none to remove bullets and margins to add spacing between icons */
ul li{
    list-style: none;
    margin: 0 15px;
}
/* styling anchor element that contains icons, assigning colors, size, transition duration and positioning  */
ul li a{
    position: relative;
    display: flex;
    justify-items: center;
    align-items: center;
    justify-content: center;
    align-content: center;
    text-decoration: none;
    width: 3rem;
    height: 3rem;
    text-align: center;
    background: #011;
    border-radius: 50%;
    font-size: 2rem;
    color: aliceblue;
    transition: .45s;
}
/* clearing content before anchors' content aka icon, positioning and transition and animation setting */
ul li a::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: aquamarine;
    transition: .45s;
    transform: scale(.9);
    z-index: -1;
}
/* adding hover animation to blank content of anchor set above before it's original content, this defines the outer blurry shadow */
ul li a:hover::before{
    transform: scale(1.1);
    box-shadow: 0 0 .9rem #055341;
}
/* adding shadows on hover to anchor */
ul li a:hover{
    color: aqua;
    box-shadow: 0 0 .3rem aqua;
    text-shadow: 0 0 .3rem aqua;
}