.svg-stroke{
    --svg-stroke: 1.5px;
}



.svg-stroke{stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--svg-stroke);stroke:currentColor;vector-effect:non-scaling-stroke; fill: none;}
.svg-trans{transform-origin: center center; transition: transform .4s ease-in-out; transition-duration: var(--transition-time)}
#menu-darkmode-toggle:hover svg .svg-darkmode-sun, body.darkmode #menu-darkmode-toggle svg .svg-darkmode-sun{transform: scale(200%)}
#menu-darkmode-toggle:hover svg .svg-darkmode-rays, body.darkmode #menu-darkmode-toggle svg .svg-darkmode-rays{transform: scale(30%)}
#menu-darkmode-toggle:hover svg .svg-darkmode-moon, body.darkmode #menu-darkmode-toggle svg .svg-darkmode-moon{transform: translateX(-55%)}

body.darkmode #menu-darkmode-toggle:hover svg .svg-darkmode-sun{transform: scale(100%)}
body.darkmode #menu-darkmode-toggle:hover svg .svg-darkmode-rays{transform: scale(100%)}
body.darkmode #menu-darkmode-toggle:hover svg .svg-darkmode-moon{transform: translateX(0%)}



.menu-visible #menu-main-toggle svg > line {
    transform: scaleX(0);
}
.menu-visible #menu-main-toggle svg > line:first-child {
    transform: translate(-5.5px, 5.5px) rotateZ(45deg);
}
.menu-visible #menu-main-toggle svg > line:last-child {
    transform: translate(-5.5px, -5.5px) rotateZ(-45deg);
}


@media (hover: hover) {
    #menu-main-toggle:hover svg > line{
        transform: scaleX(0);
    }
    #menu-main-toggle:hover svg > line:first-child{
        transform: translate(-5.5px, 5.5px) rotateZ(45deg);
    }
    #menu-main-toggle:hover svg > line:last-child{
        transform: translate(-5.5px, -5.5px) rotateZ(-45deg);
    }
}