body{
margin:0;
background:#e5e5e5;
font-family:Arial, Helvetica, sans-serif;
}


/* main container */

.menu-container{
position:fixed;
top:30vh;
left:0;
z-index:2;

display:flex;
flex-direction:column;
align-items:flex-start;
}


/* toggle button */

.menu-toggle{
cursor:pointer;
margin-bottom:0px;
margin-left:0px;
}

.menu-toggle img{
width:30px;   /* 50% smaller (was 60px) */
display:block;
}


/* menu panel */

.menu-panel{

background:#0c4b35;

border-radius:0 15px 15px 0;

padding:20px;

width:180px; /* slightly smaller */

display:flex;
flex-direction:column;
gap:16px;

transition:transform .35s cubic-bezier(.77,0,.18,1);

}


/* collapsed */

.menu-panel.closed{
transform:translateX(-120%);
}


/* menu buttons */

.menu-btn img{
width:176px;  /* 80% of 220px */
display:block;
transition:transform .2s ease;
}

.menu-btn:hover img{
transform:translateX(5px);
}