header{
    background-color: var(--header_color);

    display: grid;
    grid-template:
    "menu JWK settings";
    justify-content: space-around;

    #JWK-Header-Logo{
        grid-area: JWK;
        width: 100px;
    }
    #HeaderMainMenuWrapper{
        grid-area: menu;
    }
    #HeaderSettingsWrapper{
        grid-area: settings;
    }
}









/* 



#HamburgerMenu-btn:checked ~ .AnimationMenu{
    padding: 25px;
    height: auto;
    
}
#SettingsMenu-btn:checked ~ .AnimationMenu{
    padding: 25px;
    height: auto;
   
} */

.menu-button {
   
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 45px;
    height: 45px;

    padding: 5px;

}

.SettingsGear{
    color: var(--lightwhitecolor);
    font-size: 40px;
}




.bar{
    width:  var(--MenuIconSize);
    height: var(--MenuIconBarHeight);

    background-color: var(--MenuIconBarColor);
    border-radius: 80px;
    transition-duration: var(--HamburgerMenuAnimationEnd-sec);
}






#HamburgerMenu-btn:checked ~ .menu-button > #bar1{
    animation-name: topdown1;
    animation-duration: var(--HamburgerMenuAnimationStart-sec);
    opacity: 0;
}
#HamburgerMenu-btn:checked ~ .menu-button > #bar2{  
    animation-name: topdown2;
    animation-duration: var(--HamburgerMenuAnimationStart-sec);
    transform-origin: center left;
    transform: translate(15%,-238%) rotate(45deg);
}
#HamburgerMenu-btn:checked ~ .menu-button > #bar3{
    animation-name: topdown3;
    animation-duration: var(--HamburgerMenuAnimationStart-sec);
    transform-origin: center right;
    transform: translate(-15%,-460%) rotate(-45deg);

}

#SettingsMenu-btn:checked ~.menu-button > .SettingsGear{
    transform: rotate(-180deg);
    transition-duration: 1s;
}








@keyframes topdown1{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 1;
    }
    51%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}
@keyframes topdown2{
    0%{
        transform: translate(0,0);
    }
    50%{
        transform: translate(0,-220%);
    }
    100%{
        transform: translate(15%,-238%) rotate(45deg);
    }
}
@keyframes topdown3{
    0%{
        transform: translate(0,0);
    }
    50%{
        transform: translate(0,-450%);
    }
    100%{
        transform: translate(-15%,-460%) rotate(-45deg);
    }
}