#header-button {
    height: 2.5rem;
    width: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: nowrap;
    transition: transform 300ms ease-in-out;
}

#header-button div {
    background-color: black;
    border-radius: 2px;
    transition: 300ms ease-in-out;
}

body.dark #header-button div {
    background-color: white;
}

#header-button div:nth-child(1) {
    width: 100%;
    height: 2px;
    transform: translateY(1.25rem);
}

#header-button div:nth-child(2) {
    width: 2px;
    height: 100%;
    transform: translateX(calc(1.25rem - 1px));
}


/* 
ANIMATE
*/ 
#header-button.open {
    transform: rotateZ(45deg);
}

#header-button.open div:nth-child(1) {
    width: calc(100% - 1px);
}

#header-button.open div:nth-child(2) {
    transform: translateX(calc(1.25rem - 2px));
}