*{

margin: 0;
padding: 0;
border: 0;
outline: 0;
box-sizing: border-box;
list-style: none;

}

body {
  height: 100vh;
  background-image: url(./image/BG.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  display:flex;
}

.sidebar{

width: 120px;
height: 100%;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
background: rgba(10, 10, 10, 0.4);
box-shadow: 0 8px 32px rgb(2,4,24);
border-right: 2px solid rgba(255,255,255, .09);

transition: 0.4s  ease-in-out
}

.sidebar.open{

  width : 220px;
}

.logoG{

background-image: url(./image/logG.png);
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 130px;

}

.logoTitle{
display: grid;
align-items: center;
justify-items: center;

}
.logoTitle h3{
  color: aliceblue;
  font-size: 20px;
 
}

.toggle{ 

cursor: pointer;
position: absolute;
    
top: 180px;
right: -14px;
font-size: 38px;
line-height: 50%;
text-align: center;
border-radius: 50%;
   
background: rgba(10, 10, 10,0.65);
box-shadow: 0 8px 32px rgb(2,4,24);
border: 2px solid rgba(255,255,255, .09);
transition: .4s ease-in-out;

}

.toggle img{
  transition: 0.4s ease-in-out;
}
.open .toggle img 
{
  transform: rotateY(180deg);
  
}
nav {

padding : 100px 30px 0px 30px;

}
.navit{
  
  display: flex;
  
  align-items: center;
  
  border-radius: 4px;
  width: 100%;
  height: 56px;
  padding: 0 16px 0 16px;
  color: #fff;
  transition: .4s ease-in-out;
 
  cursor:pointer;

  justify-content: flex-start;
  margin : 8px 0px ;

}

.sidebar nav .navit.active{
  background: rgb(25, 226, 116) !important ;
}

.sidebar .navit:hover {
background: rgba(255,255,255, .1);
}




.sidebar nav .navit span {
  
  margin-left: 8px;
  
  opacity: 0;
  
  pointer-events: none;
  transition : 0.2s;
  
}

.sidebar.open nav .navit span{
opacity: 1;

transition : 0.4s  ease-in-out ;
transition-delay: 0.2s;
pointer-events: visible;

}

#test{

  color: #fff;
}