/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
 *{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: "Poppins" , sans-serif;
}

:root{
    --nav-color: #2D333B;
    --nav-accent-color: #191c20;
    --nav-transition: all 0.7s ease;
}
body, html{
    margin: 0;
    background-color: #22272E;
    overflow-x: hidden;
}
.sidebar{
   position: fixed;
   left: 0;
   top: 0;
   height: 100%;
   width: 78px;
   background-color: var(--nav-color);
   padding: 6px 14px;
   z-index: 99;
   transition: width 0.7s ease;
}

.sidebar ::-webkit-scrollbar {
  display: none;
}

 .sidebar.open{
   width: 250px;
 }
 .sidebar .logo-details{
   height: 60px;
   display: flex;
   align-items: center;
   position: relative;
 }
 .sidebar .logo-details .icon{
   margin-left: -300px;
   transition: var(--nav-transition);
 }
 .sidebar .logo-details .logo-text{
   color: White;
   font-size: 20px;
   font-weight: 500;
   margin-left: -300px;
   transition: var(--nav-transition);
 }
 .sidebar.open .logo-details .icon,
 .sidebar.open .logo-details .logo-text{
    margin-left: 0px;
 }
 
 .sidebar .logo-details #btn{
   position: absolute;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
   transition: var(--nav-transition);
   font-size: 23px;
   text-align: center;
   cursor: pointer;
 }
 .sidebar.open .logo-details #btn{
   text-align: right;
 }
 .sidebar i{
   color: #fff;
   height: 60px;
   min-width: 50px;
   font-size: 28px;
   text-align: center;
   line-height: 60px;
 }
 .sidebar .nav-list{
   margin-top: 20px;
   height: calc(100% - 80px);
   overflow: auto;
   transition: var(--nav-transition);
 }
 .sidebar.open  .nav-list{
  height: calc(100% - 150px);
  }
 .sidebar li{
    overflow: hidden;
   position: relative;
   margin: 8px 0;
   list-style: none;
 }
 .sidebar li a{
   display: flex;
   height: 100%;
   width: 100%;
   align-items: center;
   cursor: pointer;
   text-decoration: none;
   transition: var(--nav-transition);
   background-color: var(--nav-accent-color);
 }
 .sidebar li a i{
    transition: var(--nav-transition);
  }
.sidebar li a:hover{
    background: #FFF;
}
 .sidebar li a .links_name{
   color: #fff;
   font-size: 15px;
   font-weight: 400;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition: var(--nav-transition);
 }
 .sidebar.open li a .links_name{
   opacity: 1;
   pointer-events: auto;
 }
 .sidebar li a:hover .links_name,
 .sidebar li a:hover i{
   transition: all 0.5s ease;
   color: #11101D;
 }
 .sidebar li i{
   height: 50px;
   line-height: 50px;
   font-size: 18px;
   border-radius: 12px;
 }
 .sidebar li.profile{
   position: fixed;
   height: 60px;
   width: 78px;
   margin-left: -300px;
   left: 0;
   bottom: 0;
   margin-bottom: 0;
   padding: 10px 14px;
   background: var(--nav-accent-color);
   transition: var(--nav-transition);
   overflow: hidden;
 }
 .sidebar.open li.profile{
   width: 250px;
   margin-left: 0px;
 }
 .sidebar li .profile-details{
   display: flex;
   align-items: center;
   flex-wrap: nowrap;
 }
 .sidebar li img{
   height: 45px;
   width: 45px;
   object-fit: cover;
   border-radius: 6px;
   margin-right: 10px;
 }
 .sidebar li.profile .name,
 .sidebar li.profile .job{
   font-size: 15px;
   font-weight: 400;
   color: #fff;
   white-space: nowrap;
 }
 .sidebar li.profile .job{
   font-size: 12px;
 }
 .sidebar.open .profile #cover{
   opacity: 0;
 }
 .section{
   position: relative;
   background: #22272E;
   min-height: 100vh;
   height: fit-content;
   top: 0;
   left: 78px;
   width: calc(100% - 78px);
   transition: var(--nav-transition);
   z-index: 2;
 }
 .sidebar.open ~ .section{
   left: 250px;
 }
 .section .text{
   display: inline-block;
   color: white;
   font-size: 25px;
   font-weight: 500;
   margin: 18px
 }
 
 @media (max-width: 420px) {
   .sidebar li .tooltip{
     display: none;
   }
 }
 #github a{
    margin-left: auto;
    margin-right: auto;
    display: block;
}