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

.main_box{
  background:url("photo.jpg");
  height:100vh;
  background-size:cover;

}

.btn_one{
color: white;
font-size:30px;
font-weight:  700px;
position:absolute;
left: 16px;
transition: all 0.2s linear;
line-height: 16px;
}
.sidebar_menu {
  position:fixed;
  left:-350px;
  transition: all 0.2s linear;
  height:100vh;
  width:300px;
  background-color:rgb(255, 255, 255,0.1);
  box-shadow:0 0 6px rgb(255, 255,255,0.5)
}
.sidebar_menu.logo{
  position:absolute;
  height: 60px;
  width:100%;
  line-height:60px;
  box-shadow:0 2px 4px rgb(255, 255,255,0.5)
}
.sidebar_menu .logo a{
    position:absolute;
    left: 50px;
    color: white;
    text-decoration: none;
    font-size: 20px;
    font-weight:500;
}
.sidebar_menu .btn_two i{
  color: grey;
  font-size: 25px;
  line-height: 60px;
   position: absolute;
   left: 275px;
   transition: all 0.2s linear;
   opacity: 0;
   cursor: pointer;
}
.sidebar_menu .menu{
  position: absolute;
  width: 100%;
  top: 80px;
}
.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: 25%;
  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 rgb(255, 255,255,0.5)
}

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

}
.sidebar_menu .social_media i:hover{
  opacity: 1;
  transform: scale(1.1);
}
#check:checked ~ .sidebar_menu{
  left: 0;

}
#check:checked ~ .btn_one i{
  opacity: 0;
}
#check:checked ~ .sidebar_menu .btn_two i{
   opacity: 1;
}