ui/mainmenupanel.razor.scss
MainMenuPanel {
    position: absolute;
    //min-width: 60%;
    width: 100%;
    height: 750px;
    //bottom: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    //border-radius: 35px;
    //background-color: #050505f9;
    //background-color: #eee;
    //background-color: #bbccff;
    flex-direction: column;
    padding: 24px;
    //backdrop-filter: blur(5px);
    //overflow: visible;
    //pointer-events: all;
    //box-shadow: 0px 20px 8px #000000dd;
    //border: 20px solid #eee;
    //.innerBox {
    //    position: absolute;
    //    width: 450px;
    //    height: 550px;
    //    background-color: #9999ff;
    //    border-radius: 35px;
    //}

    .titleContainer {
        position: absolute;
        //height: 300px;
        //background-color: #0000ff99;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 35px;
    }

    .title {
        //width: 800px;
        height: 180px;
        //width: 100%;
        font-size: 150px;
        color: #ffff66;
        //padding-top: 20px;
        //padding-top: 20px;
        font-weight: 900;
        //background-color: blue;
        justify-content: center;
        align-items: center;
        text-align: center;
        line-height: 200px;
        letter-spacing: -0.05em;
        text-stroke: 20px black;
        pointer-events: none;
        padding-bottom: 20px;
        text-shadow: 2px 25px 10px #000000;
    }
    //.title2 {
    //    position: absolute;
    //width: 800px;
    //height: 180px;
    //font-size: 80px;
    //    color: #ffff66;
    //padding-top: 20px;
    //padding-top: 20px;
    //    font-weight: 600;
    //background-color: blue;
    //justify-content: center;
    //align-items: center;
    //    text-align: center;
    //    text-stroke: 15px black;
    //    pointer-events: none;
    //    overflow: visible;
    //    z-index: 100;
    //}

    .emoji {
        position: absolute;
        width: 150px;
        height: 150px;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
        z-index: -100;
    }

    .button_container {
        position: absolute;
        //width: 80%;
        height: 60%;
        flex-direction: column;
        gap: 12px;
        //border: 1px solid black;
        align-items: flex-start;
    }

    .button {
        //position: absolute;
        //width: 300px;
        //height: 80px;
        font-size: 95px;
        //color: #ffffffaa;
        color: #dddddd;
        justify-content: center;
        align-items: center;
        pointer-events: all;
        border-radius: 8px;
        transform: scale( 1 );
        transition: all 0.05s ease-out;
        //background-color: #ffffff05;
        text-stroke: 15px black;
        //margin-bottom: 8px;
        //border: 1px solid black;

        &:hover {
            color: #fff;
            //background-color: #153582;
            //color: #eee;
            //opacity: 0.8;
            transform: scale( 1.01 );
            //font-size: 56px;
            //text-stroke: 16px black;
        }

        &:active {
            color: #ffff88;
            //background-color: #3555d2;
            //color: #fff;
            //opacity: 1;
            transform: scale( 1.02 );
            //font-size: 57px;
            //text-stroke: 20px black;
        }

        .button_icon {
            width: 100px;
            height: 100px;
            //border: 1px solid black;
            margin: 4px;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center center;
            filter: drop-shadow(2px 25px 12px #00000088);
        }

        .button_text {
            pointer-events: none;
            padding-bottom: 4px;
            text-shadow: 2px 25px 10px #000000;
        }
    }
}