:root {
    --menu-transition-time: 1s;
    --menu-bg-colour: #ef900c;
    --menu-icon-covering-ratio: 0.48; /* how much of the icon centre is solid colour */
}

#fullscreen-menu .content  * {
    pointer-events: none;
}
#fullscreen-menu.active .content  * {
    pointer-events: auto;
}
#fullscreen-menu .content {
    pointer-events: none;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
}

#fullscreen-menu .button {
    --menu-button-size: calc(max(min(1vh, 1vw) * 5, 1.5em));
    width: var(--menu-button-size);
    height: var(--menu-button-size);
    max-width: 40px;
    max-height: 40px;
    position: fixed;
    top: calc(min(1vh, 1vw) * 1);
    right: calc(min(1vh, 1vw) * 1);
}
#fullscreen-menu .button .click-target {
    width: min(80px, max(7vw, 7vh));
    height: min(80px, max(7vw, 7vh));
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
}
#fullscreen-menu .button .expandable {
    visibility: hidden;
    position: absolute;
    --active-scale: 1000; /* actual value computed in code */
    top: 0;
    right: 0;
    transform: scale(0.001);
    fill: black;
    /* for transition back to default state */
    transition: visibility, transform, fill;
    transition-timing-function: linear, cubic-bezier(0, 1, .2, 1), linear;
    transition-delay: var(--menu-transition-time), 0s, 0s;
    transition-duration: 0s, var(--menu-transition-time), var(--menu-transition-time);
}
#fullscreen-menu.active .button .expandable {
    transition: visibility, transform, fill;
    transition-timing-function: linear, cubic-bezier(1, 0, 1, 0), cubic-bezier(1, 0, 1, 0);
    transition-delay: 0s, 0s, 0s;
    transition-duration: 0s, var(--menu-transition-time), var(--menu-transition-time);
    visibility: visible;
    transform: scale(var(--active-scale));
    fill: var(--menu-bg-colour);
}
#fullscreen-menu .button .decorative {
    position: relative;
    animation-fill-mode: forwards;
    animation-name: menu-button-appearing;
    animation-duration: calc(var(--menu-transition-time) * 2);
}
#fullscreen-menu.active .button .decorative {
    animation-name: menu-button-expanding;
}
#fullscreen-menu.inactive .button .decorative {
    animation-name: menu-button-collapsing;
}
@keyframes menu-button-collapsing {
      0% { visibility: visible; opacity: 1; transform: scale(1); }
      4% { visibility: hidden;  opacity: 0; transform: scale(0.001); }
     49% { visibility: hidden;  opacity: 0; transform: scale(0.001); }
     50% { visibility: visible; opacity: 0; transform: scale(0.001); }
     60% { visibility: visible; opacity: 1; transform: scale(1); }
    100% { visibility: visible; opacity: 1; transform: scale(1); }
}
@keyframes menu-button-appearing {
      0% { visibility: hidden; }
     29% { visibility: hidden;  opacity: 0; transform: scale(0.001); }
     30% { visibility: visible; opacity: 1; transform: scale(0.001); }
     50% { visibility: visible; opacity: 1; transform: scale(1); }
}
@keyframes menu-button-expanding {
      0% { visibility: visible; opacity: 1; transform: scale(1); }
     10% { visibility: visible; opacity: 0; transform: scale(0.001); }
     11% { visibility: hidden;  opacity: 0; transform: scale(0.001); }
     59% { visibility: hidden;  opacity: 0; transform: scale(0.001); }
     60% { visibility: visible; opacity: 0; transform: scale(0.001); }
     70% { visibility: visible; opacity: 1; transform: scale(1); }
    100% { visibility: visible; opacity: 1; transform: scale(1); }
}