@import "keys_vertical.css";


/*** page + navbar ***/

#page {
    margin: 0 0 20px;
    left: 0;
    transition: margin 0.5s;
}

#footer {
    display: none;
}


/* navbar off viewport */

#navbar {
    position: absolute;
    top: 0;
    width: 90%;
    max-width: 750px;
    /* fallback - should be imposed by aspect-ratio @media rule anyway */
    /* 750px / 56.2219% = 1334px = total keys height                   */
    /* max-width: 56.2219vh;   */
    left: -90%;
    background: none;
    transition: left 0.5s;
}

input#navbar-toggle:checked ~ #navbar {
    left: 0;
    transition: left 0.5s;
}

input#navbar-toggle:checked ~ #page {
    margin-left: 90%;
    margin-right: -90%;
    transition: margin .5s;
}

#navbar .keys span {
    /* 750px / 90% = 833px = vw at which #navbar max-width rule kicks in */
    /* 4.2% * 833px = 35px = font size for max-width navbar        */
    font-size: 4.2vw;
}


/* aspect ratio 56/90 ~= 56.2219% / 90% = start scaling navbar with viewport */
@media screen and (min-aspect-ratio: 56/90) {
    #navbar {
	width: 56.2219vh;
	left: -56.2219vh;
    }
    input#navbar-toggle:checked ~ #page {
	margin-left: 56.2219vh;
	margin-right: -56.2219vh;
    }
    #navbar .keys span {
    /* 56.2219% * 750px = 1334px = vh at which vh scaling kicks in */
    /* 2.62% * 1334 = 35px = font size for max-width navbar        */
	font-size: 2.62vh;
    }    
}

/* 750px        =       90% * 833px   =  56.2219% * 1334px   =   max-width #navbar */
@media screen and (min-width: 833px and min-height: 1334px) {
    #navbar {
	left: -750px;
    }
    input#navbar-toggle:checked ~ #page {
	margin-left: 750px;
	margin-right: -750px;
    }
    #navbar .keys span {
	font-size: 35px;
    }
}

/* min width #navbar                                                */
/*              300px / 90% = 333px        300px / 56.2219% = 534px */
@media screen and (max-width: 333px), screen and (max-height: 534px) {
    #navbar {
	width: 300px;
	left: -300px;
    }
    input#navbar-toggle:checked ~ #page {
	margin-left: 300px;
	margin-right: -300px;
    }
    #navbar .keys span {
	font-size: 14px;
    }
}


/* navbar toggle */

label#navbar-toggle-label {
    display: block;
    cursor: pointer;
    user-select: none;
}

label#navbar-toggle-label:after {
    position: absolute;
    content: "\2261";
    top: 10px;
    left: 9px;
    font-size: 15px;
    color: black;
    text-rendering: geometricPrecision;
    z-index: 10;
}

input#navbar-toggle:checked ~ label#navbar-toggle-label:after {
    content: "\00d7";
    font-size: 25px;
    top: -5px;
    left: 2px;
}