:root {
    /*--hamburger-menu-size: 100px;*/
    --hamburger-menu-padding: 0px;  
    --hamburger-menu-border-px: 5px;
    /*--hamburger-menu-border-color: black;*/
    --hamburger-menu-transition: 0.3s;
}
#hamburger-menu {
    cursor: pointer;
    position: relative;
    width: 50px;
    height: 50px;
    margin-right: 5px;
    margin-top: 5px;
}
.hamburger-menu-line {
    position: absolute;
    transition: var(--hamburger-menu-transition);
    width: calc(100% - var(--hamburger-menu-padding) * 2);
    height: var(--hamburger-menu-border-px);
    background-color: var(--hamburger-menu-border-color);
}
.line-top {
    top: var(--hamburger-menu-padding);
    left: var(--hamburger-menu-padding);
}

.line-middle {
    top: calc(50% - var(--hamburger-menu-border-px)/2 - 3.5px);
    left: var(--hamburger-menu-padding);
}
.line-bottom {
    bottom: calc(var(--hamburger-menu-padding) + 7px);
    left: var(--hamburger-menu-padding);
}
.hamburger-menu-active > .line-top {
    top: calc(50% - var(--hamburger-menu-border-px)/2 - 5px);
    transform: rotate(45deg);
}
.hamburger-menu-active > .line-middle {
    width: 0;
    height: 0;
    left: var(--hamburger-menu-padding);
}
.hamburger-menu-active > .line-bottom {
    top: calc(50% - var(--hamburger-menu-border-px)/2 - 5px);
    transform: rotate(-45deg);
}
.hamburger-title {
    position: absolute;
    bottom: -4px;
    left: 10px;
    color: var(--hamburger-menu-border-color);
    font-weight: bold;
    font-size: 0.2rem;
}