GameMenu
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: url("/ui/backgrounds/cutting_board.jpg");
    background-size: 1024px;

    animation: scrolling-background 600s linear infinite;

    .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: 500;
    }

    > .header
    {
        position: absolute;
        top: 100px;
        left: 0;
        width: 100%;
        gap: 2px;

        flex-direction: column;
        justify-content: center;
        align-items: center;
        pointer-events: none;

        .pizza-count
        {
            font-family: Verdana;
            font-size: 64px;
            font-weight: black;
            color: white;
            text-shadow: 0 0 10px black;
            text-transform: lowercase;
        }

        .pps-count
        {
            font-family: Verdana;
            font-size: 20px;
            color: white;
            text-shadow: 0 0 10px black;
        }

    }

    .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;

        
        
        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: center;
        margin: 32px;
        gap: 8px;

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

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

            h1
            {
                font-family: Verdana;
                width: 100%;
                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-x: scroll;
                align-items: center;
                flex-wrap: wrap;
                gap: 4px;
            }

            &.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: 400;
        }
    }
}

@keyframes scrolling-background
{
    from
    {
        background-position: 0 0;
    }
    to
    {
        background-position: -8192px -1024px;
    }
}