<div class="menu">
        <div class="item">
            <input type="checkbox" class="toggle" id="home">
            <div class="expand">
                <label for="home">
                    <i class="icon fas fa-home fa-bounce"></i>
                    <label class="text"><a href="../index.html">HOME</a></label>
                </label>
            </div>   
        </div>
        <div class="item">
            <input type="checkbox" class="toggle" id="html">
            <div class="expand">
                <label for="html">
                    <i class="icon fa fab fa-html5"></i>
                    <label class="text"><a href="./HTML.html">HTML</a></label>
                </label>
            </div>   
        </div>
        <div class="item">
            <input type="checkbox" class="toggle" id="css">
            <div class="expand">
                <label for="css">
                    <i class="icon fa fab fa-css3"></i>
                    <label class="text"><a href="./CSS3.html">CSS</a></label>
                </label>
            </div>   
        </div>
        <div class="item">
            <input type="checkbox" class="toggle" id="js">
            <div class="expand">
                <label for="js">
                    <i class="icon fa fab fa-js"></i>
                    <label class="text"><a href="#javascript">JAVASCRIPT</a></label>
                </label>
            </div>   
        </div>
        <div class="item">
            <input type="checkbox" class="toggle" id="php">
            <div class="expand">
                <label for="php">
                    <i class="icon fa fab fa-php"></i>
                    <label class="text"><a href="#php">PHP</a></label>
                </label>
            </div>   
        </div>
    </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;
        }
    
       /* start nav-bar */
      .menu{
        margin: 20px auto;
        width: 390px;
        height: 65px;
        bottom:0px;
        left: 50%;
        padding: 0px 60px 0px 43px;
        transform: translate(-50%, 10px);
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
      }
      .item{
        display: block;
        float: left;
        white-space: nowrap;
        color: #111;
        font-size: 16px;
      }
      .item:last-child{
        margin-right: 0;
      }
      .item .toggle{
        display: none;
      }
      .item label{
        line-height: 3rem;
        cursor: pointer;
      }
      .item .icon{
        display: inline-block;
        font-size: 2rem;
        line-height: 3rem;
        vertical-align: middle;
        border-top: 1px solid;
        border-right: 1px solid;
        border-radius: 10px;
        width: 3rem;
        text-align: center;
        margin-right: 0.5rem;
        transition: color ease-in-out 80ms;
      }
      .item .text{
        line-height: 3rem;
        color: #121230;
        display: inline-block;
        vertical-align: middle;
        padding-right: 1.5rem;
        transition: color ease-in-out 333ms;
      }
      .item:nth-child(2) label i{
        color: #df3c0b;
      }  
      .item:nth-child(2) label a{
        color: #df3c0b;
      }
      .item:nth-child(3) label i{
        color: #1e87f0;
      }
      .item:nth-child(3) label a{
        color: #1e87f0;
      }
      .item:nth-child(1) label i{
        color: #f5078a;
      }
      .item:nth-child(1) label a{
        color: #f5078a;
      }
      .item:nth-child(4) label i{
        color: #dfd110;
      }
      .item:nth-child(4) label a{
        color: #dfd110;
      }
      .item:nth-child(5) label i{
        color: #0d31d1;
      }
      .item:nth-child(5) label a{
        color: #0d31d1;
      }
      .expand{
        max-width: 40px;
        overflow: hidden;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        cursor: pointer;
        transition: all ease-in-out 233ms;
      }
      .toggle:checked ~ .expand{
        max-width: 250px;
      }