*{
        margin:0;
        padding: 0;
        font-family: "Poppins", sans-serif;
}
.main_box{
        background:url("photo.jpg");
        /* Viewport */
        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;
        transition: all 0.2s linear;
}

.sidebar_menu{
        position:fixed;
        left:-300px;

        height:100vh;
        width:300px;
        background-color: rgba(255,255,255,0.1);
        box-shadow:0 0 10px rgba(255,255,255,0.1);
        transition: all 0.3s linear;


}



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

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

.sidebar_menu .btn_two i{
        color:white;
        font-size:25px;
        line-height:60px;
        position:absolute;
        left:275px;
        opacity:0;
        cursor: pointer;
        transition: all 0.1s linear;
       

}

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

}

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

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

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


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

}

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


#check{
       display: none;
}

.sidebar_menu .menu li:hover{
        box-shadow:0 0 8px rgba(255,255,255,0.1);

}

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

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

}


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

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

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

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