*{
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif 
} 

.main_box{
  background-image: url(camera.jpg);
  height: 100vh;
  background-size: cover;
}

.btn_one i{
  color: white ;
  font-size: 30px;
  font-weight: 700;
  position: absolute ;
  left :16px; 
  line-height:60px ;
  cursor: pointer;

}

.sidebar_menu{
  position: fixed;
  left: -300px;
  height:100vh ;
  width: 300px;
  background-color:rgba(255, 255, 255,o.1) ;
  box-shadow:0 0 6px rgba(255, 255, 255, 0.5);
  transition: all o.5s linear;
}

.sidebar_menu .logo{
  position: absolute;
  width: 100%;
  line-height: 60px;
  box-shadow:0 2px 4px rgba(255, 255, 255, 0.5);
  height: 60px;
}

.sidebar_menu .logo a{
  position: absolute;
  left: 60px;
  color: white;
  text-decoration: none;
  font-size: 20px;
  font-weight:500 ;
}

.sidebar_menu .menu{
  position: absolute;
  width: 100%;
  top: 80px;

}

.sidebar_menu .btn_two i{
  color:grey ;
  font-size: 25px;
  position: absolute ;
  left :275px; 
  line-height:60px ;
  /* opacity: 0; */
  cursor: pointer;
}

.sidebar_menu .menu li{
  margin-top: 6px;
  padding: 14px 20px;
}

.sidebar_menu .menu i,a{
  color: white;
  text-decoration: none;
  font-size: 20px;
}

.sidebar_menu .menu i{
  padding-right: 8px;
}

.sidebar_menu .social_media{
  position: absolute;
  left: 20%;
  bottom: 20px;
}

.sidebar_menu .social_media i{
  color: white;
  opacity: 0.5;
  padding: 0 5px;
}

#check{
  display: none;
}

.sidebar_menu .menu li:hover{
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

.btn_one i:hover{
  font-size: 40px;
}

.btn_two i:hover{
  font-size: 30px;
}

.sidebar_menu .social_media i:hover{
  opacity: 1;
  transform: scale(1);
}

#check:checked ~ .sidebar_menu{
  left: 0;
}

#check:checked ~ .btn_one i{
  opacity: 0;
  transition: all o.3s linear;
}

#check:checked ~ .sidebar_menu.btn_two{
  opacity: 1;
  transition: all o.3s linear;

}