GameMenu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("/ui/backgrounds/cutting_board.jpg");
    animation: scrolling-background 600s linear infinite;
    pointer-events: all;

    .background-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(24, 13, 0, 0.555);
    }

    .menu-buttons {
        margin-top: 8px;
        margin-left: 8px;
        flex-direction: column;
        gap: 8px;
        z-index: 100;
        pointer-events: none;
    }

    .pizza-button {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 400px;
        height: 400px;
        margin: -200px 0 0 -200px;
        transition: all 0.12s ease-in-out;
        transform: scale(1 1);
        z-index: 100;
        cursor: pointer;
        background-image: url("/ui/pizzas/cheese_pizza.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;

        &:hover {
            transform: scale(1.025 1.025);
        }

        &:active {
            transform: scale(1.1 0.95);
            transition: all 0.05s ease-in-out;
        }
    }

    .shop {
        position: absolute;
        right: 0px;
        top: 0px;
        bottom: 0px;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        margin: 32px;
        gap: 8px;

        h1 {
            font-family: Verdana;
            width: 380px;
            font-size: 32px;
            font-weight: black;
            text-align: center;
            color: white;
            text-shadow: 0 0 10px black;
        }

        .upgrades {
            flex-direction: column;
            align-items: flex-end;
            justify-content: center;
            gap: 4px;
            z-index: 100;
            opacity: 1;
            width: 100%;
            transition: all 0.2s ease-out;

            h1 {
                font-family: Verdana;
                width: 380px;
                font-size: 32px;
                font-weight: black;
                text-align: center;
                color: white;
                text-shadow: 0 0 10px black;
                justify-content: center;
            }

            .upgrade-content {
                background-color: rgba(black, 0.4);
                flex-grow: 1;
                width: 380px;
                //overflow: visible;
                padding: 4px;
                overflow-y: scroll;
                align-items: center;
                flex-wrap: wrap;
                gap: 4px;
                max-height: 240px;
            }

            &.hidden {
                height: 0px;
                opacity: 0;
                background-color: rgba(black, 0);

                .upgrade-content {
                    background-color: rgba(black, 0);
                }
            }
        }

        .buildings {
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
            gap: 4px;
            z-index: 100;

            h1 {
                justify-content: center;
            }

            .building-list {
                flex-direction: column;
                overflow-y: scroll;
                align-items: flex-end;
                gap: 4px;
                width: 1000px;
                max-height: 550px;
            }
        }
    }
}

@keyframes scrolling-background {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -8192px -1024px;
    }
}