body{
    margin:0;
    overflow:hidden;
    background:#b63dfc;
    font-family:Georgia, serif;
    color:#b63dfc;
}

A:visited  {color: black; text-decoration: none; font-family: handlee; font-size: 18;}
/* A:link  {color: black; text-decoration: none; font-family: handlee; font-size: 18;} */
A:link  {color: black; text-decoration: none; font-family: handlee; font-size: 18;}
A:active  {color: black; text-decoration: none; font-family: handlee; font-size: 18;}
/*A:hover   {cursor: pointer; color: #006622; background-color: #CCFFCC; text-decoration: underline; font-family: Tahoma; font-size: 14;} */
/* A:hover   {cursor: pointer; color: white; background-color: #006622; text-decoration: underline; font-family: handlee; font-size: 18; border-style:solid; border-color : #B0FFB0; border-width : 1px;} */
A:hover   {cursor: pointer; color:black; text-decoration: none; font-family: handlee; font-size: 22; border-style:none; font-weight: 700;}

/* Toggle Button */

#menuToggle{
    position:fixed;
    top:18px;
    left:18px;
    z-index:500;
    padding:10px 16px;
    background:#784f2b;
    color:#f3dfb4;
    border:1px solid #612782;
    border-radius:6px;
    cursor:pointer;
    box-shadow: 0 0 12px rgba(0,0,0,0.6), inset 0 0 6px rgba(255,220,150,0.08);
    color:#0509f5;
    transition:0.25s;
    font-size: 16px;
}

#menuToggle:hover{
    background:#5e4f42;
}

/* Main Menu */

.right-side {
  position: relative;
  right: 0;
  top: 32px; /* Adjust top spacing as needed */
}

#drawerMenu{
z-index:1000;
    position:fixed;
    top:64px;
    left:32px;
    width:220px;
    background:
        linear-gradient(to bottom, #755335, #523018);
    border:1px solid #6b4f34;
    border-radius:8px;
    box-shadow:
        0 8px 40px #0e2ea1,
        inset 0 0 16px #061859;
    overflow:hidden;
    transform-origin:top center;
    display:none;
    text-align: center;     /* Centers all inline and text content inside */
}

/* Drawer Header */

#drawerHeader{
    padding:4px;
    text-align:center;
    font-size:16px;
    font-weight:bold;
    letter-spacing:1px;
    background: linear-gradient(to bottom , #6a4f35, #4a3422 );
    border-bottom:1px solid #8b6a45;
    cursor:move;
    user-select:none;
}

/* Menu Items */

.drawerItem{
    font-family:"kyiv Machine";
    font-size: 16px ;
    padding:4px 4px;
    border-bottom:1px solid #3498db;
    cursor:pointer;
    position:relative;
    transition:
        background 0.2s,
        padding-left 0.2s;
}

.drawerItem:hover{
    background:#9a5ed1;
    padding-left:8px;
}

/* Last Item */

.drawerItem:last-child{
    border-bottom:none;
}

/* Candle Glow Effect */

#drawerMenu::before{
z-index: 1000;
    content:"";
    position:absolute;
    top:-40px;
    left:50%;
    transform:translateX(-50%);
    width:140px;
    height:80px;
    background:radial-gradient(rgba(255,180,90,0.18), transparent 70%);
    pointer-events:none;
}

/* Drawer Opening Animation */

.drawerOpen{
    animation:drawerOpenAnim 0.45s ease-out forwards;
}

.drawerClose{
    animation:drawerCloseAnim 0.4s ease-in forwards;
}

@keyframes drawerOpenAnim{

    0%{
        opacity:0;
        transform:
            perspective(800px)
            rotateX(-40deg)
            translateY(-30px)
            scaleY(0.7);
    }

    60%{
        opacity:1;
        transform:
            perspective(800px)
            rotateX(8deg)
            translateY(4px)
            scaleY(1.03);
    }

    100%{
        opacity:1;
        transform:
            perspective(800px)
            rotateX(0deg)
            translateY(0)
            scaleY(1);
    }
}

@keyframes drawerCloseAnim{

    0%{
        opacity:1;
        transform:
            perspective(800px)
            rotateX(0deg)
            scaleY(1);
    }

    100%{
        opacity:0;
        transform:
            perspective(800px)
            rotateX(-35deg)
            translateY(-20px)
            scaleY(0.7);
    }
}