<div class="main-grid">
<ul id="nav2d">
    <li><a href="../index.html"><i class="fa fas fa-home"></i></a></li>
    <li><a href="./HTML.html"><i class="fa fab fa-html5"></i></a></li>
    <li><a href="./CSS3.html"><i class="fa fab fa-css3"></i></a></li>
    <li><a href="#javascrpit"><i class="fa fab fa-js"></i></a></li>
    <li><a href="/HTML.html"><i class="fa fab fa-bootstrap"></i></a></li>
</ul>
</div>
                    
                

                                        
body{
    display: block;
    position: relative;
    --bs-body-bg: #121230;
    background:var(--bs-body-bg);
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    .main-grid{
        background-color: #1a1a4e21;
        height: 80px;
        display: flex;
        justify-content: center;
        position: sticky;
        top: 15px;
        z-index: 2;
        margin-top: 0px;
        backdrop-filter: blur(10px);
    }
    #nav2d{
        display: flex;
        padding: 0px;
        width: 450px;
        height: 50px;
        position: absolute;
        box-shadow: 0 0 24px rgb(3 1 12 / 88%);
    }
    #nav2dli{
        flex: 1;
        padding: 15px;
        list-style: none;
        text-align: center;
    }
    #nav2d li a i{
        font-size:1.6em;
    }
    #nav2d li a{
        text-decoration: none; 
    }
    #nav2d li:nth-child(1) a:hover i,
    #nav2d li:nth-child(2) a:hover i,
    #nav2d li:nth-child(3) a:hover i,
    #nav2d li:nth-child(4) a:hover i,
    #nav2d li:nth-child(5) a:hover i{
        color: #cbd0d4;
        transition:  ease 0.6s;
    }
    #nav2d li:nth-child(1):hover,
    #nav2d li:nth-child(2):hover,
    #nav2d li:nth-child(3):hover,
    #nav2d li:nth-child(4):hover,
    #nav2d li:nth-child(5):hover{
    background-color: #0e243a;
    transition:  ease 0.6s;
    }
    #nav2d li:nth-child(1) a i{
        color: #1e87f0;
    }
    #nav2d li:nth-child(2) a i{
        color: #df3c0b;
    }
    #nav2d li:nth-child(3) a i{
        color: #0d31d1;
    }
    #nav2d li:nth-child(4) a i{
        color: #dfd110;
    }
    #nav2d li:nth-child(5) a i{
        color: #be0fe0;
    }
    /* end nav-bar-2*/