:root {
    --navright: -0.7em;
}
#mainmenu {
    /*background-color: #00FF007F;*/
    position: sticky;
    top: 0px;
    height: 0;
    right: 0px;
    width: auto;
    margin: auto;
    z-index: 99;
    pointer-events: none;
}
#mainmenu > div > * {
    pointer-events: all;
}
#mainmenu > div {overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
/* === BURGER SYMBOL === */
#mainmenu > div > label:first-of-type {
    cursor: pointer;
    position: relative;
    animation-name: hideright;
    animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.25s;
    right: var(--navright);
    font-size: clamp(4rem,15vw,100rem);
    transform: scale(1.3,1);
    line-height: 0.9em;
    padding: 0.05em 0.1em 0em 0.1em;
    margin-right: 0.1em;
    border-radius: 0 0 0 5px;

    background-color: rgba(var(--colA), 1);
    color: #FFF;
}
#mainmenu > div > label:first-of-type:hover, 
#mainmenu > div > label:has(+ :checked) {
    right:0em;
    animation-name: showright;
    animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.25s;
}
#mainmenu input[type="checkbox"] {
    display: none;
}
#mainmenu input[type="checkbox"] + *{
    display: none;
}
#mainmenu input[type="checkbox"]:checked + *{
    display: block;
}
#mainmenu > div > ul:first-of-type {
    background-color: rgba(var(--colA), 0.95);
}
#mainmenu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;

    animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 0.2s;
}
/* === Menu Items === */
#mainmenu ul li a, #mainmenu ul li label {
    font-size: clamp(1rem,2vh,100rem);
    min-width: 33vw;
    line-height: 2em;
    display: block;
    padding: 0.4em 1em;
    color: #FFF;
}
#mainmenu ul li:not(:first-child) {
    border-top: #FFFFFF7F 1px solid;
}

@keyframes hideright {
    0% {
		right: 0em;
	}
	100% {
		right: var(--navright);
	}
}
@keyframes showright {
    0% {
		right: var(--navright);
	}
	100% {
		right: 0em;
	}
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}