.xE {
    width: 40px;
    height: 40px;
    padding: 10px;
    cursor: pointer;
    position: relative;
}

.xE hr {
    left: 15px;
    border: none;
    margin: 0;
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: var(--body);
    transition: transform .3s, opacity .3s, width .3s, left .3s, top .3s;
}

.xE hr { top: 29px; }

.xE hr:first-child { top: 19px; }

.xE hr:last-child { top: 39px; }

body.nav .xE hr:first-child,
body.nav .xE hr:last-child {
    width: 0;
    opacity: 0;
    top: 29px;
    left: 30px;
}

body.nav .xE hr:nth-child(2) { transform: rotate(45deg); }

body.nav .xE hr:nth-child(3) { transform: rotate(-45deg); }