img {
    max-width: 100%;
    height: auto
}

::-webkit-scrollbar {
    display: none
}

a {
    text-decoration: none
}

.bg-top-1 {
    top: 0;
    background: linear-gradient(180deg, #fff, rgba(30, 31, 34, 0))
}

.bg-bottom-1,
.bg-top-1 {
    position: fixed;
    width: 100%;
    height: 50%
}

.bg-bottom-1 {
    bottom: 0;
    background: linear-gradient(0deg, #fff, rgba(30, 31, 34, 0))
}

.main_page {
    width: 100%;
    height: 100% !important;
    min-height: 100vh !important;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-attachment: fixed;
    background: radial-gradient(circle at 10% 20%, rgba(23, 32, 49, .8), transparent 40%), radial-gradient(circle at 90% 30%, rgba(35, 45, 65, .7), transparent 50%), radial-gradient(circle at 50% 80%, rgba(23, 32, 49, .6), transparent 60%), radial-gradient(circle at 30% 50%, rgba(45, 55, 75, .7), transparent 70%), radial-gradient(circle at 70% 10%, rgba(23, 32, 49, .8), transparent 80%)
}

.main_page :is(h1, h2, h3, h4, h5, h6, p) {
    margin-bottom: 0
}

.main_page:before {
    content: "";
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: .85
}

.main_page .content_set {
    position: relative;
    max-width: 428px;
    width: 100%;
    min-height: 100vh !important;
    background-color: #172031;
    color: #fff;
    padding: 15px
}

.main_page .content_set .heading {
    font-size: 25px;
    text-align: center
}

.main_page .content_set .description {
    color: hsla(0, 0%, 100%, .639);
    text-align: center
}

.main_page .content_set .question_box {
    max-width: 100%;
    width: 100%;
    background-color: #3b4559;
    display: block;
    margin: 40px auto;
    position: relative;
    border-radius: 16px;
    padding: 15px 10px
}

.main_page .content_set .question_box .question_number {
    max-width: 150px;
    width: 100%;
    border-radius: 50px;
    padding: 5px;
    border: 4px solid #3b4559;
    display: block;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    top: 0;
    background-color: #172031;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%);
    z-index: 999
}

.main_page .content_set .question_box .question_list h4 {
    font-size: 18px;
    text-align: center;
    padding: 20px 0
}

.main_page .content_set .question_box .option_list .question .correct {
    background-color: rgba(0, 255, 40, .431)
}

.main_page .content_set .question_box .option_list .question .wrong {
    background-color: rgba(255, 0, 0, .529)
}

.main_page .content_set .question_box .option_list .question button {
    background-color: #172031;
    width: 100%;
    height: 100%;
    padding: 10px;
    border-radius: 6px;
    color: #fff;
    text-align: center;
    font-weight: 600;
    border: none
}

.main_page .content_set .featured-section {
    background: #3b4559;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0
}

.main_page .content_set .featured-section h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 16px;
    text-align: center
}

.main_page .content_set .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 15px;
    gap: 15px;
    margin-top: 15px
}

.main_page .content_set .feature-item {
    background: #172031;
    padding: 15px;
    border-radius: 8px;
    color: #fff;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.main_page .content_set .feature-item h5 {
    margin-bottom: 8px;
    color: #fff
}

.main_page .content_set .feature-item p {
    font-size: .9rem;
    color: #a09e9e;
    margin: 0
}

.main_page .content_set .how-to-play {
    background: #3b4559;
    padding: 20px;
    border-radius: 10px
}

.main_page .content_set .how-to-play h3 {
    color: #fff;
    margin-bottom: 15px
}

.main_page .content_set .play-steps {
    padding-left: 20px
}

.main_page .content_set .play-steps li {
    margin-bottom: 10px;
    color: #fff
}

@media(max-width:768px) {
    .main_page .content_set .features-grid {
        grid-template-columns: 1fr
    }

    .main_page .content_set .featured-section,
    .main_page .content_set .how-to-play {
        padding: 15px
    }
}

.main_page .content_set .fact_box {
    background-color: #3b4559;
    padding: 15px;
    border-radius: 16px;
    text-align: center
}

.main_page .content_set .fact_box h5 {
    font-size: 18px;
    font-weight: 600
}

.main_page .content_set .quiz_rules {
    padding-top: 40px;
    width: 100%
}

.main_page .content_set .quiz_rules h3 {
    font-size: 20px;
    font-weight: 600;
    border-bottom: 2px solid;
    display: block;
    margin: 0 auto;
    width: -moz-fit-content;
    width: fit-content;
    padding-bottom: 10px
}

.main_page .content_set .quiz_rules .quiz_rules_set {
    padding: 15px
}

.main_page .content_set .quiz_rules .quiz_rules_set li {
    padding: 3px 0;
    color: hsla(0, 0%, 100%, .678)
}

.main_page .content_set .result_box {
    background-color: #fff;
    border-radius: 15px;
    padding: 10px
}

.main_page .content_set .result_box .winner_img {
    max-width: 100%;
    width: 100%;
    height: 150px;
    display: block;
    margin: 0 auto;
    object-fit: contain
}

.main_page .content_set .result_box h3 {
    color: #172031;
    text-align: center;
    font-weight: 700;
    font-size: 22px;
    word-wrap: break-word
}

.main_page .content_set .result_box h3 .coin_set {
    color: #ffb540;
    letter-spacing: 2.5px;
    padding: 0 2px
}

.main_page .content_set .result_box button {
    padding: 6px;
    max-width: 300px;
    width: 100%;
    font-size: 22px;
    letter-spacing: 2px;
    background-color: #ffb540;
    color: #fff;
    display: block;
    margin: 25px auto 10px;
    border-radius: 6px;
    border: 2px solid;
    font-weight: 700
}

.main_page .content_set .result_box button:hover {
    background-color: #fff;
    border-color: #ffb540;
    color: #ffb540
}

.home_section_header {
    position: relative
}

.home_section_header .menu_set {
    padding: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.home_section_header .menu_set .logo_set {
    cursor: pointer;
    font-size: 28px;
    font-weight: 600;
    color: bisque;
    font-family: monospace;
    color: #ffb540
}

.home_section_header .menu_set .logo_set b {
    font-size: 29px
}

.home_section_header .menu_set .coin_set {
    border: 2px solid #ffb540;
    border-radius: 25px;
    padding: 4px 15px;
    cursor: pointer
}

.home_section_header .menu_set .coin_set .score-image {
    color: "transparent";
    width: "90px";
    height: "40px";
    object-fit: "fill"
}

.home_section_header .menu_set .coin_set .score-container {
    position: "absolute";
    right: "20px";
    display: "flex";
    align-items: "center"
}

.home_section_header .menu_set .coin_set .score-container .coinimage {
    max-width: "16px";
    width: "100%"
}

.home_section_header .menu_set .coin_set .score-container p {
    font-size: 15px
}

.menu_btn {
    all: unset !important
}

.menu_btn .menu_icon {
    font-size: 33px
}

.MuiTouchRipple-root {
    border-radius: 0;
    left: auto !important
}

.canvas_set {
    width: 100% !important;
    height: 100%;
    color: #fff
}

.canvas_set .profile {
    display: flex;
    align-items: center;
    padding: 20px
}

.canvas_set .profile h3 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 0
}

.canvas_set .profile h4 {
    font-size: 14px;
    padding-top: 3px;
    margin-bottom: 10px;
    color: #ffb540
}

.canvas_set .profile .signin_btn {
    font-size: 13px !important;
    all: unset;
    background: #ffb540;
    margin: 7px 0;
    padding: 8px 5px;
    border-radius: 50px;
    font-weight: 700;
    max-width: 150px;
    width: 100%;
    display: block;
    text-align: center;
    letter-spacing: 2px;
    cursor: pointer
}

.canvas_set .profile img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px
}

.canvas_set .logout_btn {
    cursor: pointer;
    width: 70px;
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 50%;
    transform: translate(-50%, -50%)
}

.canvas_set .logout_btn p {
    font-weight: 600;
    font-size: 17px
}

.navigation_list ul {
    padding: 0;
    list-style: none
}

.navigation_list ul li a {
    color: #fff;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px
}

.navigation_list ul li a.active {
    background-color: #ffb540
}

.navigation_list ul li a:hover {
    background-color: rgba(255, 181, 64, .478)
}

.navigation_list ul li a h5 {
    margin-bottom: 0;
    font-weight: 500;
    font-size: 14px;
    margin-left: 6px
}

.navigation_list ul li a svg {
    margin-right: 5px;
    font-size: 22px
}

.MuiPaper-elevation {
    transition: none !important;
    left: 38% !important;
    background-color: #fff !important;
    box-shadow: none !important;
    max-width: 340px;
    width: 100%
}

.MuiModal-backdrop {
    background-color: transparent !important
}

.category_sec .MuiBox-root {
    background-color: #172031
}

.category_sec .MuiBox-root .MuiSvgIcon-root {
    font-size: 28px;
    margin-bottom: 10px
}

.category_sec .MuiBox-root .MuiTab-textColorPrimary {
    color: #fff
}

.category_sec .MuiBox-root .Mui-selected {
    color: #ffb540;
    border: 2px solid;
    border-radius: 40px;
    font-weight: 700
}

.category_sec .MuiBox-root .MuiTabs-indicator {
    background-color: transparent
}

.category_sec .tab_panel .MuiBox-root {
    padding: 0 10px
}

.category_sec .Tbs_heightSet {
    max-height: calc(100vh - 130px)
}

.category_sec .with_ads {
    max-height: calc(100vh - 410px)
}

.category_sec .tab_set {
    height: 100%;
    overflow-y: scroll
}

.category_sec .tab_set::-webkit-scrollbar {
    display: none
}

.category_sec .game_box {
    border: 1px solid hsla(0, 0%, 68%, .6);
    padding: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0
}

.category_sec .game_box .content_set_box {
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.category_sec .game_box img {
    max-width: 55px;
    width: 100%;
    height: 55px
}

.category_sec .game_box .game_des {
    display: flex;
    align-items: center
}

.category_sec .game_box .game_des .game_des_set {
    width: 235px;
    margin-left: 10px
}

.category_sec .game_box .game_des h6 {
    max-width: 235px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: capitalize
}

.category_sec .game_box .game_des .game_description {
    font-size: 13px;
    background: hsla(0, 0%, 50%, .259);
    display: flex;
    padding: 2px 7px;
    margin-top: 7px;
    border-radius: 50px;
    align-items: center;
    max-width: -moz-fit-content;
    max-width: fit-content
}

.category_sec .game_box .game_des .game_description img {
    max-width: 15px;
    width: 100%;
    height: auto;
    margin: 0 5px
}

.category_sec .game_box .game_des .game_description .coin_color {
    font-size: 16px;
    color: #ffb540
}

.category_sec .game_box .game_des h6 {
    font-size: 11px
}

.category_sec .game_box .game_des h3 {
    font-size: 17px;
    font-weight: 700;
    padding-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.category_sec .game_box .play_btn {
    all: unset;
    cursor: pointer;
    width: 55px;
    height: 55px;
    background: #ffb540;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 10px
}

.category_sec .game_box .play_btn .play_icon {
    font-size: 30px
}

.score_board {
    border: 1px solid #3b4559;
    padding: 10px;
    margin: 10px;
    border-radius: 10px
}

.score_board img {
    width: 150px;
    height: 150px;
    border-radius: 10px;
    display: block;
    margin: 0 auto
}

.score_board h4 {
    text-align: center;
    margin: 10px 0
}

.score_board button {
    max-width: 300px;
    width: 100%;
    padding: 5px;
    margin: 15px auto;
    background-color: #ffb540;
    border-radius: 8px;
    border: 2px solid #ffb540;
    font-weight: 700;
    font-size: 18px;
    display: block;
    color: #fff;
    text-align: center
}

.login_section {
    padding: 20px;
    text-align: center;
    background: hsla(0, 0%, 100%, .11);
    margin: 15px;
    border-radius: 10px
}

.login_section h3 {
    font-size: 25px;
    margin: 10px 0
}

.login_section p {
    font-size: 15px;
    color: #ffb540;
    margin: 10px 0
}

.login_section .form_control label {
    text-align: left;
    display: block
}

.login_section .form_control input,
.login_section .form_control textarea {
    display: block;
    width: 100%;
    background-color: #fff;
    margin-bottom: 10px;
    padding: 5px;
    border-radius: 6px;
    border: none;
    color: #000
}

.login_section .form_control button {
    margin: 10px 0;
    font-weight: 600;
    background-color: #ffb540;
    padding: 5px;
    color: #fff
}

.login_section .form_control button,
.login_section button {
    max-width: 100%;
    width: 100%;
    font-size: 20px;
    border: none;
    border-radius: 7px
}

.login_section button {
    font-weight: 800;
    background-color: #fff;
    padding: 10px
}

.login_section button img {
    max-width: 30px;
    width: 100%
}

.login_section button span {
    color: #172031;
    margin-left: 10px;
    font-weight: 800;
    font-size: 20px
}

.hide_modal {
    display: none
}

.show_modal {
    width: 100%;
    height: 90vh;
    position: absolute;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center
}

.show_modal .modal_body {
    max-width: 380px;
    position: absolute;
    display: block;
    margin: 0 auto;
    background-color: #fff;
    width: 100%;
    top: 30%;
    border-radius: 8px;
    padding: 10px
}

.show_modal .modal_body .close_modal_btn {
    position: absolute;
    right: 10px;
    color: #000;
    font-size: 24px
}

.show_modal .modal_body .modal_content img {
    animation: flip 3s infinite;
    margin: 20px auto 5px;
    display: block
}

.show_modal .modal_body .modal_content h3 {
    text-align: center;
    color: #172031;
    font-size: 20px
}

.show_modal .modal_body .modal_content h3 b {
    font-size: 22px;
    color: #ffb540
}

@keyframes flip {
    0% {
        transform: rotateY(0deg)
    }

    50% {
        transform: rotateY(180deg)
    }

    to {
        transform: rotateY(1turn)
    }
}

.drawer_set {
    width: 360px;
    height: 100vh;
    position: absolute;
    background: #172031;
    top: 0;
    z-index: 999
}

.drawer_set .close_btn {
    position: absolute;
    right: 5%;
    font-size: 25px;
    top: 1%
}

.drawer_hide {
    display: none
}

.loader_set {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, .529);
    position: absolute;
    top: 0;
    z-index: 999
}

.timeline_set {
    margin: 10px
}

.timeline_set table {
    max-width: 100%;
    width: 100%
}

.timeline_set table td,
.timeline_set table th {
    padding: 5px;
    border: 1px solid #fff;
    font-size: 13px
}

.timeline_set table thead {
    padding: 5px;
    text-align: center
}

.timeline_set table tbody {
    text-align: center
}

.timeline_set table svg {
    color: #ffb540
}

.timeline_set .not_found {
    text-align: center;
    margin: 10px 0
}

.timeline_set .total_score {
    margin: 10px 0
}

.model_hide {
    display: none
}

.model_set {
    position: absolute;
    width: 100%;
    background-color: rgba(23, 32, 49, .29);
    height: 100%;
    top: 0;
    bottom: 0
}

.model_set .model_content {
    max-width: 390px;
    width: 100%;
    z-index: 999;
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    position: absolute;
    top: 45%;
    color: #000;
    left: 50%;
    transform: translate(-50%, -50%)
}

.model_set .model_content .btn_group button {
    max-width: 110px;
    width: 100%;
    font-size: 15px;
    margin: 10px;
    border: none;
    padding: 5px;
    border-radius: 6px;
    color: #fff
}

.model_set .model_content .btn_group button.cancel_btn {
    background-color: #ffb540
}

.model_set .model_content .btn_group button.stop_btn {
    background-color: #172031
}

.user_auth_link a {
    display: block;
    margin: 10px auto;
    max-width: 250px;
    width: 100%;
    padding: 5px;
    border-radius: 6px;
    font-size: 20px;
    font-weight: 600
}

.user_auth_link a:first-child {
    background-color: #ffb540;
    color: #fff
}

.user_auth_link a:last-child {
    background-color: #fff;
    color: #172031
}

.rules_set {
    padding: 10px
}

.rules_set h2 {
    text-align: center;
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 10px
}

.rules_set ul {
    padding-left: 20px
}

.score_box {
    justify-content: space-between;
    padding: 10px;
    border: 1px solid;
    margin: 10px;
    border-radius: 5px
}

.score_box,
.score_box .img_set {
    display: flex;
    align-items: center
}

.score_box .img_set .img_text {
    margin-left: 10px;
    text-transform: capitalize
}

.score_box .img_set .img_text h4 {
    font-size: 15px;
    font-weight: 600
}

.score_box .img_set .img_text h6 {
    font-size: 13px;
    color: gray
}

.score_box .coin_set {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.score_box .coin_set p {
    font-size: 15px;
    font-weight: 600
}

.score_box .coin_set .red_text {
    color: rgba(255, 0, 0, .529)
}

.score_box .coin_set .green_text {
    color: rgba(0, 255, 40, .431)
}

.score_box .coin_set img {
    height: 15px
}

.score_box p {
    font-size: 13px
}

.no_quiz {
    text-align: center
}

.no_quiz a {
    background-color: #ffb540;
    color: #fff;
    max-width: 300px;
    width: 100%;
    padding: 5px;
    border-radius: 6px;
    margin: 10px auto;
    border: none;
    display: block;
    text-decoration: none
}

.report_form {
    padding: 10px
}

.report_form select,
.report_form textarea {
    max-width: 100%;
    width: 100%;
    padding: 5px;
    margin: 10px 0;
    border-radius: 6px
}

.report_form button {
    all: unset;
    max-width: 300px;
    width: 100%;
    border-radius: 6px;
    padding: 5px;
    margin: 10px auto;
    background-color: #ffb540;
    color: #fff;
    text-align: center;
    display: block
}

.blog_group {
    padding: 10px
}

.blog_group .blog_box {
    border: 2px solid #5c5c5c;
    border-radius: 8px;
    margin: 10px 0
}

.blog_group .blog_box img {
    max-width: 100%;
    width: 100%;
    height: 200px;
    object-fit: fill;
    border-radius: 8px 8px 0 0
}

.blog_group .blog_box .blog_content {
    padding: 10px
}

.blog_group .blog_box .blog_content h5 {
    font-size: 13px;
    color: #ffb540;
    margin: 5px 0
}

.blog_group .blog_box .blog_content h4 {
    font-size: 15px;
    margin: 5px 0;
    font-weight: 700
}

.blog_group .blog_box .blog_content h6 {
    font-size: 14px;
    color: gray
}

.ad_set {
    max-width: 400px;
    transform: translate(-50%, 87px)
}

.ad_set,
.ad_sets {
    width: 100%;
    position: absolute;
    z-index: 999;
    left: 50%;
    right: 50%
}

.ad_sets {
    max-width: 350px;
    transform: translate(-50%)
}

.ads_heights_set {
    margin-top: 330px
}

.margin_set_ads {
    margin-top: 317px
}

@media only screen and (min-width:769px) {
    .main_page .content_set .option_list .question button:hover {
        background-color: #ffb540
    }
}

@media only screen and (max-width:768px) {
    .MuiBox-root {
        max-width: 100% !important
    }

    .MuiPaper-elevation {
        left: 0 !important
    }

    .category_sec .game_box {
        padding: 10px;
        margin: 10px 0
    }

    .category_sec .game_box img {
        max-width: 40px;
        height: 40px
    }

    .category_sec .game_box .game_des .game_des_set {
        width: 185px
    }

    .category_sec .game_box .game_des h6 {
        font-size: 10px
    }

    .category_sec .game_box .game_des h3 {
        font-size: 15px
    }

    .category_sec .game_box .play_btn {
        width: 40px;
        height: 40px
    }

    .category_sec .game_box .play_btn .play_icon {
        font-size: 20px
    }
}