header
    button#navbutton
        div.icon.top
        div.icon.middle
        div.icon.bottom
    div#navigationpart
        div#navwrapper
            nav
                h2 Menu
                ul
                    li
                        a(href="#") Home
                    li
                        a(href="#") About
                    li
                        a(href="#") Contact
                    li
                        a(href="#") Dance
                svg#hand(viewBox="0 0 384 2048")
                    path(d="M136 0c23 0 43 21 43 45v100c18-17 50-19 71 6 23-14 53-2 63 16 49-9 71 22 71 73v16c0 62-31 77-38 124-2 11-12 20-24 20H150c-18 0-36-11-43-28-13-29-49-96-78-108-18-8-29-21-29-40 0-34 35-58 67-44 8 4 17 8 25 14V45c0-24 20-45 44-45zm0 416h192c13 0 24 11 24 24v48c0 13-11 24-24 24H136c-13 0-24-11-24-24v-48c0-13 11-24 24-24zm168 28c-11 0-20 9-20 20s9 20 20 20 20-9 20-20-9-20-20-20zM338 2048H126V552c0-13 11-24 24-24h164c13 0 24 11 24 24v1496z")
                button#quitnavigation

body {
    display: flex;
    flex-direction: column;
    background: #E5E5E5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    header {
        display: flex;
        justify-content: flex-end;
        button#navbutton {
            z-index:2;
            position: relative;
            width:4rem;
            height:4rem;
            margin:.5rem;
            border:none;
            border-radius: 1rem;
            background: #323133;
            cursor: pointer;
            transition: .5s cubic-bezier(0.5, 0, 0, 1);
            .icon {
                left:50%;
                height:.25rem;
                width: 2.5rem;
                border-radius:1rem;
                background: white;
                position: absolute;
                transform: translate(-50%, -50%) rotate(0deg);
                transition: .5s cubic-bezier(0.5, 0, 0, 1);
                &.top {
                    top:25%;
                }
                &.bottom {
                    top:75%;
                }
            }
            &.pressed {
                background: #434A54;
                .icon {
                    background: #AAB2BD;
                }
            }
            &.close {
                .icon {
                    &.top, &.bottom {
                        top:50%;
                        transform: translate(-50%, -50%) rotate(-45deg);
                    }
                    &.middle {
                        transform: translate(-50%, -50%) rotate(45deg);
                    }
                }
            }
        }
        #navigationpart {
            --page-rotation:10deg;
            --hand-rotation:10deg;
            --nav-size:45vmin;
            --hand-position:1;
            --page-position:0;
            z-index: 1;
            position: fixed;
            top:0;
            left:0;
            right:0;
            bottom:0;
            perspective: 50rem;
            transition: .5s cubic-bezier(0.5, 0, 0, 1);
            &:not(.active) {
                pointer-events: none;
            }
            #navwrapper {
                position: absolute;
                top:50%;
                left:50%;
                transform: translate(-50%, -50%) rotate(var(--hand-rotation)) translateY(100vh);
                transition: 1s cubic-bezier(0.5, 0, 0, 1) .5s;
            }
            nav {
                position: relative;
                left:100vw;
                z-index: 3;
                width: var(--nav-size);
                height: calc(var(--nav-size) * 1.41421);
                //min-width: 18rem;
                //min-height: calc(18rem * 1.41421);
                border-radius: .5vmin;
                background: #FFFFFF;
                font-family: 'Indie Flower', cursive;
                transform:rotate(calc(var(--page-rotation) - var(--hand-rotation))) translateZ(0rem) rotateX(0deg) rotateY(0deg);
                svg {
                    position: absolute;
                    top:90%;
                    left:80%;
                    width:25%;
                    transform-origin: 2rem .5rem;
                    transform: rotate(calc(var(--hand-rotation) - var(--page-rotation))) translateY(0vh);
                    transition: .5s cubic-bezier(0.5, 0, 0, 1);
                }
                h2 {
                    padding:2rem 2rem 0 2rem;
                    font-size: 6vmin;
                    margin: 0;
                }
                ul {
                    list-style: none;
                    padding: 1.5rem 2rem 0 2rem;
                    margin: 0;
                    font-size: 5vmin;
                    li {
                        margin-bottom: .75rem;
                        a {
                            color:inherit;
                            &:not(:hover) {
                                text-decoration: none;
                            }
                        }
                    }
                }
                button#quitnavigation {
                    position: absolute;
                    top:1rem;
                    right:1rem;
                    width:2rem;
                    height:2rem;
                    border:none;
                    cursor: pointer;
                    font-size: 6vmin;
                    line-height: 0rem;
                    background:none;
                    outline: none;
                    &:before {
                        content: 'x';
                    }
                    &:hover {
                        color:#D8334A;
                    }
                }
            }
            &:not(.active) {
                nav {
                    transition-delay: 1s;
                }
            }
            &.active {
                #navwrapper {
                    transform: translate(-50%, -50%) rotate(var(--hand-rotation)) translateY(0vh);
                    transition-duration: 0s;
                    transition-delay: 0s;
                }
                nav {
                    left:0vw;
                    animation: naventer 1.5s ease;
                    @keyframes naventer {
                        0%, 90% {
                            box-shadow: 0 0 2rem -1rem rgba(0,0,0,.1);
                        }
                        0% {
                            left:100vw;
                            transform: rotate(calc(var(--page-rotation) - var(--hand-rotation))) translateZ(5rem) rotateX(10deg) rotateY(-10deg);
                        }
                        40% {
                            transform: rotate(calc(var(--page-rotation) - var(--hand-rotation))) translateZ(15rem) rotateX(5deg) rotateY(-5deg);
                            box-shadow: 0 0 4rem -1rem rgba(0,0,0,.1);
                        }
                        90% {
                            transform: rotate(calc(var(--page-rotation) - var(--hand-rotation))) translateZ(0rem) rotateX(0deg) rotateY(0deg);
                        }
                        100% {
                            left:0vw;
                        }
                    }
                    svg {
                        transform: rotate(calc(var(--hand-rotation) - var(--page-rotation))) translateY(50vh);
                        transition-duration: 0s;
                        transition-delay: 0s;
                    }
                }
            }
        }
    }
}

let state = 1;
$("button#navbutton").click(function(){
    if(state <= 0) return;
    state -= 3
    $("button#navbutton").addClass("pressed");
    if (state == -2) {
        $("button#navbutton").addClass("close");
        $("#navigationpart").css({"--page-rotation": `${2+Math.random()*10}deg`, "--hand-rotation": `${-15+Math.random()*30}deg`}).addClass("active");
    } else if (state == -1) {
        $("button#navbutton").removeClass("close");
        $("#navigationpart").removeClass("active");
    }
    setTimeout(() => {
        $("button#navbutton").removeClass("pressed");
        state = Math.abs(state);
    }, 1500);
});
$("button#quitnavigation").click(function(){
    if(state==2) {
        state -= 3
        $("button#navbutton").removeClass("close");
        $("#navigationpart").removeClass("active");
        setTimeout(() => {
            $("button#navbutton").removeClass("pressed");
            state = Math.abs(state);
        }, 1500);
    }
})

if(window.location.href.indexOf("fullcpgrid") != -1) {
    $("button#navbutton").click()
    setTimeout(() => {
        $("button#navbutton").click()
    }, 1500);
}