@import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);


:root{
    --JWKLogoHeight: 55px;
    --JWKLogoWidth:calc(var(--JWKLogoHeight) * 1.73253333333);

    --MenuIconSize: 45px;
    --MenuIconBarHeight: calc(var(--MenuIconSize) * 0.15);
    --MenuIconBarColor: var(--lightwhitecolor);
    --HamburgerMenuAnimationStart-sec: .7s;
    --HamburgerMenuAnimationEnd-sec: .5s;

    --MenuLogosize:75px;


    --headerheight: 75px;
    --navheight: 100px;



    --blackbluecolor: black;
    --darkbluecolor: #132C47;
    --greybluecolor: #294C63;
    --lightbluecolor: #78AEAD;
    --lightwhitecolor: #D4ECE9;
    --lightorangecolor: #D86350;
    --darkyellowcolor: #FBAE54;



    --navbackgroundcolor: var(--greybluecolor);
    --mainbackgroundcolor:var(--lightbluecolor);
    --footerbackgroundcolor:var(--darkbluecolor);

    --padding: .1rem;
    --border-radius: 1rem;


    interpolate-size: allow-keywords; 

 
    
}




body:has(option[value="dark"]:checked){
    
    --headerbackgroundcolor: black;
    
}

body:has(option[value="light"]:checked){
    --headerbackgroundcolor: rgb(95, 95, 95);
}




.pagewrapper{
    min-height: 100vh;
    display: grid;
    grid-template:
    "header header header" 
    "nav nav nav" 
    "main main main" 
    "footer footer footer"; 
}

header{
    grid-area: header;
    background-color: var(--headerbackgroundcolor);
    height: var(--headerheight);

    display: grid;
    
    isolation: isolate;

    z-index: 1000;

}

nav{
    grid-area: nav;
    background-color: var(--navbackgroundcolor);
    height: var(--navheight);


    position: sticky;
    top: 0;
}

aside:nth-last-of-type(1){
    grid-area: side1;
    background-color: orange;
    display: none;
}

main{
    grid-area: main;
    background-color: var(--mainbackgroundcolor);
}

aside:nth-last-of-type(2){
    grid-area: side2;
    background-color: green;
    display: none;
}

footer{
    grid-area: footer;
    background-color: var(--footerbackgroundcolor);
}



header{
    grid-template: 
    "HamburgerMenu JWK Settings";

    justify-content: space-around;
    align-items: center;
    
   
   
    #HeaderJWKLogoWrapper{
        grid-area: JWK;
        background-color: var(--headerbackgroundcolor);

        #JWK-Header-Logo{
            height: var(--JWKLogoHeight);
            width:  var(--JWKLogoWidth);
        }

    }

    #HeaderMainMenuWrapper{
        background-color: var(--headerbackgroundcolor);
    }

    #HeaderSettingsWrapper{
        background-color: var(--headerbackgroundcolor);
    }
    
}




.HamburgerMenu{
    border-radius: var(--border-radius);
}

.AnimationMenu{
    box-sizing: border-box;
    position: absolute;
    height: 0;

    overflow: hidden;
    transition: .3s;


    display: flex;
    flex-direction: column;
    gap: 1rem;

    h2{
        font-family: 'Nunito', 'sans-serif';
        font-size: 20px;
        color: var(--lightwhitecolor);
    }
    a{
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
        gap: 1rem;
        padding: 5px;
        text-decoration: none; 
        color: var(--lightwhitecolor);
        font-size: 20px;
        /* background-color: #00000054; */
        backdrop-filter: blur(1px);
        border-radius: 10px;
        font-family: 'Nunito', 'sans-serif';
    }
    
}

#MainMenu, #SettingsMenu{
    width:96vw;
    left: 2vw;
    top: var(--headerheight);

    background-color: #00000054;
    backdrop-filter: blur(2px);
    border-radius: 10px;
}


.MenuLogo{
    width: var(--MenuLogosize);
    height: var(--MenuLogosize);
}


.btn-invisibility{
    display: none;
}



#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;
}


/* 

.HamburgerMenu{

    width: var(--MenuIconSize);
    height: var(--MenuIconSize);

    .MenuBars{
        height: var(--MenuIconSize);
        width: var(--MenuIconSize);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        position: absolute;
        

        .bar{
            width:  var(--MenuIconSize);
            height: var(--MenuIconBarHeight);
    
            background-color: var(--MenuIconBarColor);
            border-radius: 80px;
            transition-duration: var(--HamburgerMenuAnimationEnd-sec);
        }
    }


    .HamburgerMenuItemWrapper{
        display: flex;
        width: 1000px;

        
        
        background-color: #D86350;
    
        transform: translate(100px,-200%);
        transition-duration: 1s;
        
    }
    .hamburger-Checkbox:checked ~ #HeaderMenuItemWrapper{
        
        transform: translate(100px, 150%);
    }
   

    

    display: flex;
    align-items: center;
    justify-content: center;
} */




















@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);
    }
}