.\$mainmenu {
    display: none;

    @media (min-width: 1000px) {
        display: inherit;

        --text-indent: 1vw;
        --outline-width: 0.5vw;
        --tilt: 10vw;

        --button-size: 13vh;

        .modes {
            position: relative;
            width: 100%;
            height: 75vh;
            overflow: hidden;

            .singleplayer,
            .multiplayer {
                position: absolute;
                inset: 0;

                display: flex;
                align-items: flex-end;
                padding-bottom: 3vh;

                transition: clip-path 0.25s ease-in-out;

                img {
                    position: absolute;
                    inset: 0;
                    width: 60%;
                    height: 100%;
                    object-fit: cover;

                    filter: blur(0.5vh) brightness(0.7);
                    scale: 1.1;
                    transition: filter 0.25s ease-in-out;
                }

                &:hover img {
                    filter: blur(0);
                }

                :not(img) {
                    position: relative;
                    z-index: 1;
                }
            }

            .singleplayer {
                justify-content: flex-start;
                padding-left: var(--text-indent);

                clip-path: polygon(
                        0 0,
                        50% 0,
                        50% 100%,
                        0 100%
                );
            }

            .multiplayer {
                text-align: right;
                justify-content: flex-end;
                padding-right: var(--text-indent);

                img {
                    transform: translate(60%, 0);
                }

                clip-path: polygon(
                        50% 0,
                        100% 0,
                        100% 100%,
                        50% 100%
                );
            }

            .mode-bottom {
                position: absolute;

                bottom: 0;

                width: 100%;
                height: var(--outline-width);

                background: white;
            }

            .mode-divider {
                position: absolute;
                inset: 0;

                pointer-events: none;

                background: white;

                clip-path: polygon(
                        calc(50% - var(--outline-width) / 2) 0,
                        calc(50% + var(--outline-width) / 2) 0,
                        calc(50% + var(--outline-width) / 2) 100%,
                        calc(50% - var(--outline-width) / 2) 100%
                );
                transition: clip-path 0.25s ease-in-out;
            }

            &:has(.singleplayer:hover) {
                .singleplayer {
                    clip-path: polygon(
                            0 0,
                            calc(50% + var(--tilt)) 0,
                            50% 100%,
                            0 100%
                    );
                }

                .multiplayer {
                    clip-path: polygon(
                            calc(50% + var(--tilt)) 0,
                            100% 0,
                            100% 100%,
                            50% 100%
                    );
                }

                .mode-divider {
                    clip-path: polygon(
                            calc(50% + var(--tilt) - var(--outline-width) / 2) 0,
                            calc(50% + var(--tilt) + var(--outline-width) / 2) 0,
                            calc(50% + var(--outline-width) / 2) 100%,
                            calc(50% - var(--outline-width) / 2) 100%
                    );
                }
            }

            &:has(.multiplayer:hover) {
                .singleplayer {
                    clip-path: polygon(
                            0 0,
                            calc(50% - var(--tilt)) 0,
                            50% 100%,
                            0 100%
                    );
                }

                .multiplayer {
                    clip-path: polygon(
                            calc(50% - var(--tilt)) 0,
                            100% 0,
                            100% 100%,
                            50% 100%
                    );
                }

                .mode-divider {
                    clip-path: polygon(
                            calc(50% - var(--tilt) - var(--outline-width) / 2) 0,
                            calc(50% - var(--tilt) + var(--outline-width) / 2) 0,
                            calc(50% + var(--outline-width) / 2) 100%,
                            calc(50% - var(--outline-width) / 2) 100%
                    );
                }
            }
        }

        .alt-manager {
            position: absolute;
            top: 2vh;
            right: 2vw;

            button {
                background-color: rgba(22,22,22,0.4);
                border: none;
            }

            div {
                display: flex;
                gap: 0.5vw;
                padding: 0.5vh 10vw 0.5vh 0.5vh;

                align-items: center;
            }

            img {
                width: 2.5vw;
                object-fit: contain;
            }
        }

        .options {
            display: flex;
            gap: 4vw;
            justify-content: center;

            button, a {
                margin-top: calc(19vh - var(--button-size));

                img {
                    transition: all 0.25s ease-in-out;

                    height: var(--button-size);

                    filter: brightness(0.6);

                    &:hover {
                        filter: brightness(1);
                        scale: 1.3;
                    }
                }
            }
        }
    }
}