AscensionMenu
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url("/ui/backgrounds/space.jpg");
    opacity: 1;
    transition: opacity 1s ease-out, all 5s ease-out;
    transform: scale(1);
    z-index: 0;
    animation: scrolling-background 10s linear infinite;
    // pointer-events: all;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 64px;

    .header
    {
        flex-direction: column;
        align-items: center;

        h1
        {
            font-family: Verdana;
            font-size: 48px;
            font-weight: black;
            margin-bottom: 16px;
            text-shadow: 2px 2px 0px black;
        }

        .info
        {
            width: 400px;
            height: 120px;
            background-color: rgba(black, 0.5);
            padding: 2px;
            flex-direction: column;
            font-weight: black;
            justify-content: center;
            align-content: center;
            text-align: center;

            .panel
            {
                flex-direction: column;
            }

            .head
            {
                font-size: 20px;
            }

            p
            {
                justify-content: center;
                align-content: center;
                text-align: center;
                font-size: 16px;
            }
        }
    }

    .content
    {
        flex-direction: column;
        padding: 8px;
        flex-grow: 1;
        overflow-y: scroll;
        justify-content: center;
        align-items: center;

        .tier
        {
            gap: 16px;
            padding: 8px;
            justify-content: center;
            align-items: center;

            .spacer
            {
                width: 68px;
                height: 68px;
            }

            .half
            {
                width: 22px;
                height: 68px;
            }
        }

    }

    .ascend-button
    {
        width: 300px;
        height: 64px;
        background-color: gold;
        color: black;
        font-size: 24px;
        font-weight: black;
        font-family: Verdana;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s ease-out;
        justify-content: center;
        align-items: center;
        transform: scale(1);

        .bar
        {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: all 0.2s ease-out;
            transform: scale(1);
            z-index: 0;

            .bar-fill
            {
                background-image: url("/ui/backgrounds/space.jpg");
                animation: scrolling-background 25s linear infinite;
            }
        }

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

        &:active
        {
            transform: scale(1.05);

            .bar
            {
                opacity: 0.7;
            }
        }
    }

    &:intro
    {
        opacity: 0;
    }
}

@keyframes scrolling-background
{
    from
    {
        background-position: 0px 0px;
    }
    to
    {
        background-position: -720px -360px;
    }
}