<ul class="nav2i" id="menu_mobile">
        <li><a href="./HTML.html"><span>HTML5</span><span><i class="fa fa-2x fa fab fa-html5"></i></span></a></li>
        <li><a href="./CSS3.html"><span>CSS3</span><span><i class="fa fa-2x fab fa-css3"></i></span></a> </li>
        <li><a href="../index.html"><span>Home</span><span><i class="fa fa-2x fas fa-home fa-bounce"></i></span></a></li>
        <li><a href="#javascrpit"><span>JAVASCRIPT</span><span><i class="fa fa-2x fab fa-js"></i></span></a></li>
        <li><a href="#php"><span >php</span><span><i class="fa fa-2x fab fa-php"></i></span></a></li>               
    </ul>
                            
                        

                                                
    body{
        display: block;
        position: relative;
        --bs-body-bg: #121230;
        background:var(--bs-body-bg);
        font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        }
    
       /* start nav-bar */
       ul.nav2i{
        letter-spacing: 0px;
        bottom: 10px;
        left: 50%;
        transform: translate(-50%, -10px);
        position: fixed;
        display: flex;
        z-index: 999;
        list-style: none;
        }
        ul li{
        margin: 0px 0px;
        }
        ul li a{
        text-decoration: none;
        color: #b810c7 ;
        height: 55px;
        font-weight: 600;
        line-height: 50px;
        display: flex;
        flex-direction: row-reverse;
        }
        ul li a i{
        color: #b810c7 ;
        }
        ul li  a span i{
        padding-left: 0px;
        width: 40px;
        }
        ul li a span:nth-child(2){
        margin: 0px;
        display: grid;
        place-items: center;
        border-style: outset;
        text-align: center;
        border-width: 4px;
        border-color: #160d1473;
        box-shadow: -4px -1px 0px 0px #000000, 0px 0px 0px;
        width: 40px;
        height:75%;
        border-radius: 50%;
        }
        ul li a span:nth-child(1){
        width: 0px;
        height: 80%;
        font-size: 17px;
        background: #160d1473;
        text-transform: uppercase;
        letter-spacing: 2px;
        overflow: hidden;
        margin-right: 5px;
        border-radius: 50px 30px 30px 50px;
        transition: 0.3s ease;
        backdrop-filter: blur(5px);
        box-shadow: 6px 6px 0px 0px #000000, 0px 0px 0px;
        text-align: center;
        }
        ul li a:hover span:nth-child(1){
        width: 100px;
        padding-left: 10px;
        }
      li:nth-child(1) a i{
          color: #1e87f0;
      }
      li:nth-child(2) a i{
          color: #df3c0b;
      }
       li:nth-child(3) a i{
          color: #0d31d1;
      }
       li:nth-child(4) a i{
          color: #dfd110;
      }
       li:nth-child(5) a i{
          color: #0d31d1;
      }