#header-button {
    max-height: 1.5rem;
    width: 3rem;
    position: relative;
    margin-top: 2px;
}

#header-button > div {
    width: 100%;
    height: 3px;
    border-radius: 1rem;
    position: absolute;
    background-color: var(--color-black);
    transition: 300ms;
}

#header-button > div:nth-of-type(1) {
    top: 0;
    transform-origin: left top;
}

#header-button > div:nth-of-type(2) {
    bottom: 0;
    transform-origin: left bottom;
}

#header-button.open > div:nth-of-type(1) {
    transform: rotate(25deg);
    width: 38px;
}

#header-button.open > div:nth-of-type(2) {
    transform: rotate(-25deg);
    width: 38px;
}