*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;
}

/* ===== SIDEBAR ===== */
.sidebar{
width:250px;
height:100vh;
background:#111;
color:#fff;
position:fixed;
left:0;
top:0;
transition:0.3s;
z-index:1000;
}

.sidebar h2{
padding:15px;
text-align:center;
border-bottom:1px solid #333;
}

.sidebar a{
display:block;
padding:15px;
color:#fff;
text-decoration:none;
border-bottom:1px solid #222;
}

.sidebar a:hover{
background:#444;
}

/* ===== MAIN CONTENT ===== */
.main{
margin-left:250px;
padding:20px;
transition:0.3s;
}

/* ===== TOGGLE BUTTON ===== */
.toggle-btn{
background:#111;
color:#fff;
border:none;
padding:10px 15px;
font-size:18px;
cursor:pointer;
margin-bottom:20px;
}

/* ===== SIDEBAR HIDDEN ===== */
.sidebar.hide{
left:-250px;
}

.main.full{
margin-left:0;
}

/* ===== MOBILE ===== */
@media(max-width:768px){

.sidebar{
left:-250px;
}

.main{
margin-left:0;
}

}