<div class="tabs">
        <input type="radio" name="tab" id="html">
        <label for="html"><a href="./HTML.html"><i class="fa fab fa-html5"></i></a></label>
        <input type="radio" name="tab" id="css">
        <label for="css"><a href="./CSS3.html"><i class="fa fab fa-css3"></i></a></label>
        <input type="radio" name="tab" id="home" checked="checked">
        <label for="home"><a href="../index.html"><i class="fas fa-home fa-bounce"></i></a></label>
        <input type="radio" name="tab" id="javascript">
        <label for="javascript"><a href="#javascript"><i class="fa fab fa-js"></i></a></label>
        <input type="radio" name="tab" id="php">
        <label for="php"><a href="#php"><i class="fa fab fa-php"></i></a></label>
        <div class="selector"></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 */
    .tabs {
      margin: 20px auto;
      width: 550px;
      height: 65px;
      bottom:0px;
      left: 50%;
      padding: 0px 60px 0px 43px;
      transform: translate(-50%, 10px);
      display: flex;
      background-color: #fff0;
      justify-content: center;
      align-items: flex-end;
      position: fixed;
    }
    .tabs::before{
      content: "";
      width: 100%;
      height: 65px;
      background-color: #181818;
      position: absolute;
      left:0;
      bottom: 0;
      border-radius: 20px;
      z-index: -1;
      box-shadow: 1px 1px 2px 0px #fff;
    }
    input {
      display: none;
    }
    label{
      text-decoration: none;
      font-family: sans-serif;
      z-index: 3;
      width: 18%;
      top: 0%;
      height: 100%;
      padding-bottom: 15px;
      display: flex;
      color: #b0bfd8;
      position: relative;
      transition: all .5s cubic-bezier(0.68,-0.55,0.27,1.55) 0s;
      cursor: pointer;
      justify-content: space-around;
      align-items: center;
    }
    label:hover {
      color: #fff;
      text-shadow: 0 0 5px #fff,0 0 10px #fff;
    }
    label a i {
      position: absolute;
      font-size: 30px;
      z-index: 4;
      transition: 0.25s 0.12s cubic-bezier(0.18, -0.1, 0.8, 1.6);
    }
    .tabs label:nth-child(2) a i{
      color: #df3c0b;
    }
    .tabs label:nth-child(4) a i{
      color: #1e87f0;
    }
    .tabs label:nth-child(6) a i{
      color: #f5078a;
    }
    .tabs label:nth-child(8) a i{
      color: #dfd110;
    }
    .tabs label:nth-child(10) a i{
      color: #0d31d1;
    }
     input:checked + label {
      color: #fff;
      height: 100px;
    }
    .selector{
      --hole:#df3c0b;
      background-color: radial-gradient(circle at 50% 50%,
      #fff8 30px,
      #fff0 45px,
      #fff 50px,
      #fff0 50px 100%),
      radial-gradient(circle at 50% 50%,var(--hole) 0 45px,#fff0 50px 100%),
      radial-gradient(circle at 50% 75px,#181818 0 70px,#fff0 71px 100%);
      width: 45px;
      height: 40px;
      position: absolute;
      bottom: 14px;
      left: 0;
      z-index: 2;
      transition: all 0.5s cubic-bezier(0.68, -0.55, 0.32, 1.275) 0s;
      border: 19px solid #181818;
      border-radius: 100%;
    }
    #html:checked ~ .selector{
      /* left: 90px; */
      left: 14%;
    }
    #css:checked ~ .selector{
      left: 29.5%;
      filter: hue-rotate(188deg);
    }
    #home:checked ~ .selector{
      left: 45%;
      filter: hue-rotate(309deg);
    }
    #javascript:checked ~ .selector{
      left: 59.5%;
      filter: hue-rotate(55deg);
    }
    #php:checked ~.selector{
      left: 75.5%;
      filter: hue-rotate(212deg);
    }
    .selector::before{
      content: "";
      position: absolute;
      width: 45px;
      height: 45px;
      background-color: #fff;
      border-radius:50% ;
    }
  .selector::after{
    content: "";
    position: absolute;
    bottom: -70px;
    width: 80px;
    height: 6px;
    background: #fff0;
    border-radius: 5px 5px 15px 15px;
    left: calc(50% - 40px);
  }
  input:checked ~ .selector::after{
    box-shadow: 0 -32px 2px 1px var(--hole);
  }
  @media only screen and (max-width:575px){
    .tabs{
      width: 75%;
      padding: 0px 50px 0px 14px;
      gap: 15px;
    }
    #html:checked ~ .selector{
      left: 1%;
    }
    #css:checked ~ .selector{
      left: 18.5%;
      filter: hue-rotate(188deg);
    }
    #home:checked ~ .selector{
      left: 36%;
      filter: hue-rotate(309deg);
    }
    #javascript:checked ~ .selector{
      left: 51.5%;
      filter: hue-rotate(55deg);
    }
    #php:checked ~.selector{
      left: 70.5%;
      filter: hue-rotate(212deg);
    }
  }