@{
    ViewBag.Title = "MiniGame";
    Layout = "~/Views/Shared/_LayoutMiniGame.cshtml";
}
<div class="main minigame">
    <div class="minigame-container fixed top-0 left-0 right-0 z-50  w-full  overflow-x-hidden overflow-y-auto md:inset-0 h-screen max-h-full  z-[99999] backdrop-filter-1">

        <div class="fixed z-[1] w-full blend-mode bottom-[0%] left-[0%]">
            <img src="~/Content/assets/mini_game/assets/images/bg_icon_2.png" class="" />
        </div>


        <div class="fixed z-[1] blend-mode bottom-[0%] right-[0px] flex flex-col">
            <img src="~/Content/assets/mini_game/assets/images/bg_icon_3.png" class="" />
        </div>

        <div class="fixed z-[1] blend-mode top-[-20%] left-[-30%]">
            <img src="~/Content/assets/mini_game/assets/images/bg_icon_4.png" class="" />
        </div>

        <div class="minigame_content">
            <div>
                <div class="text-c-1 text-s-36 justify-center top-50">
                    MINI GAME
                </div>

                <div class="pb-[10px]">
                    <div class="text-c-2 w-full justify-center font-z-10 top-30 bottom-30 text-s-15">
                        Let me know your answers!
                    </div>
                </div>

                <div class="flex justify-center items-center gap-[20px] top-50" >
                    <a href="@Url.Action("Play", "MiniGame")">
                        <div class="btn-c-2">
                            <div>
                                <img src="~/Content/assets/mini_game//assets/images/cup_icon.png" />
                            </div>
                            <div class="text-c-1 font-z-18">
                                Play Now
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>