#menu {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

#menu #moonTitle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12vh;
    letter-spacing: 1vh;
    white-space: nowrap;
    overflow: visible;
    display: flex;
    align-items: center;
    gap: 0.25em;
    transition: letter-spacing 0.5s ease;
}

#menu #moonTitle .titleText {
    transition: opacity 0.5s ease;
}

#menu #moonTitle .titleText.fadeout {
    opacity: 0;
}

#menu #moonTitle canvas {
    image-rendering: pixelated;
    height: 2em;
    width: 2em;
    flex: 0 0 auto;
    transition: height 0.5s ease, width 0.5s ease;
    cursor: pointer;
    transform-origin: 50% 50%;
}

#menu #moonTitle canvas.hovered {
    height: 2.5em;
    width: 2.5em;
}

#menu #moonTitle canvas.pre-transition {
    pointer-events: none;
}

#menu #moonTitle canvas.transition {
    transition: height 1s ease, width 1s ease;
    height: 0;
    width: 0;
}

#menu #moonTitle #moonWrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

#menu #moonTitle #moonWrap #moonPlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 10vh;
    width: 10vh;
    pointer-events: none;
    transition: height 0.5s ease, width 0.5s ease, opacity 0.2s ease;
    z-index: 1;
}

#menu #moonTitle #moonWrap #moonPlay.hovered {
    height: 5vh;
    width: 5vh;
}

#menu #moonTitle #moonWrap #moonPlay.fadeout {
    opacity: 0;
}

#menu #settingsBtn {
    position: absolute;
    bottom: 5vh;
    left: 5vh;
    height: 8vh;
    cursor: pointer;
    z-index: 50;
    transition: height 0.2s ease, width 0.2s ease, left 0.2s ease, bottom 0.2s ease, opacity 0.5s ease;
}

#menu #settingsBtn.hovered {
    height: 9vh;
    left: 4.5vh;
    bottom: 4.5vh;
}

#menu #settingsBtn.fadeout {
    opacity: 0;
    pointer-events: none;
}

#menu #settingsBtn #setBg {
    height: 100%;
}

#menu #settingsBtn #setIcon {
    position: absolute;
    top: 50%;
    left: 51%;
    transform: translate(-50%, -50%);
    height: 70%;
    pointer-events: none;
    transition: height 0.2s ease, width 0.2s ease;
}

#menu #settingsBtn #setIcon.hovered {
    height: 40%;
}