@font-face {
    font-family: 'Unbounded-Medium';
    src: url('../fonts/Unbounded-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NunitoSans-Regular';
    src: url('../fonts/NunitoSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Alice-Regular';
    src: url('../fonts/Alice-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.main {
    min-height: 100vh;
    z-index: 1;
    background-color: #ffffff;

    position: relative;
    display: block;
    /* overflow: auto; */
}

.footer-rounded {
    /* overflow: hidden; */
    border-bottom-right-radius: 64px;
    border-bottom-left-radius: 64px;

    @media (max-width: 600px) {
        border-bottom-right-radius: 32px;
        border-bottom-left-radius: 32px;
    }
}

.footer {
    color: #ffffff;
    background-color: #000000;
    margin-top: -64px;
    padding-top: 140px;
    position: sticky;
    bottom: 0;
    overflow: hidden;
    display: block;
}

.footer a {
    color: #888787 !important;
    transition: color .15s;
    text-decoration: none !important;
}

.footer a:hover {
    color: #ffffff !important;
}

.footer .logo {
    color: #ff8762;
    width: 100%;
    margin-bottom: -4.6vw;
    font-size: calc(15vw - 9px);
    font-family: Unbounded-Medium, Arial Black, sans-serif;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
}

@media (min-width: 1300px) {
    .footer .logo {
        margin-bottom: -62px;
        font-size: 188px;
    }
}

.list {
    list-style: inside;
    list-style-position: outside;
    margin-left: 1.5em;
}

.body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.animated-text {
    font-family: 'Alice-Regular';
    font-size: 1.25em;
    display: inline-block;
    position: relative;
    transition: width 0.3s ease;
}

.word {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
}

.letter {
    display: inline-block;
}


/* headers */
.main-header {
    font-size: 1.7em !important;
}
@media (min-width: 600px) {
    .main-header {
        font-size: 3em !important;
    }
}
@media (min-width: 1280px) {
    .main-header {
        font-size: 3.2em !important;
    }
}

.my-image {
    max-width: 100%;
}
@media (min-width: 600px) {
    .my-image {
        max-width: 80%;
    }
}
@media (min-width: 1280px) {
    .my-image {
        max-width: 100%;
    }
}

.my-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
}
@media (min-width: 600px) {
    .my-content {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}


/* gap */
.my-gap {
    gap: 0.5rem !important;
}
@media (min-width: 960px) {
    .my-gap {
        gap: 1.5rem !important;
    }
}


/* layout */
.my-row-column {
    display: flex !important;
    flex-direction: column !important;
}
@media (min-width: 960px) {
    .my-row-column {
        flex-direction: row !important;
    }
}

.my-column-row {
    display: flex !important;
    flex-direction: row !important;
}
@media (min-width: 960px) {
    .my-column-row {
        flex-direction: column !important;
    }
}

.my-direction {
    display: flex !important;
    flex-direction: column-reverse !important;
}
@media (min-width: 960px) {
    .my-direction {
        flex-direction: row !important;
    }
}
.my-direction-reverse {
    display: flex !important;
    flex-direction: column-reverse !important;
}
@media (min-width: 960px) {
    .my-direction-reverse {
        flex-direction: row-reverse !important;
    }
}

.my-grid-2{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 960px) {
    .my-grid-2{
        grid-template-columns: repeat(2, 1fr);
    }
}

.my-grid-3{
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 600px) {
    .my-grid-3{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1280px) {
    .my-grid-3{
        grid-template-columns: repeat(3, 1fr);
    }
}

.my-sticky-top {
    position: sticky;
    top: 56px;
}
@media (min-width: 600px) {
    .my-sticky-top {
        top: 64px;
    }
}

.my-border-radius {
    border-radius: 2rem;
}
@media (min-width: 600px) {
    .my-border-radius {
        border-radius: 3rem;
    }
}


/* buttons */
.my-button {
    width:100% !important;
}
@media (min-width: 600px) {
    .my-button {
        max-width:300px !important;
    }
}


/* typography */
.my-body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #000000;
    font-family: NunitoSans-Regular, sans-serif;
    letter-spacing: 0.00938em;
    text-transform: none;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    font-weight: 400;
    line-height: 1;
    color: #000000;
    font-family: Unbounded-Medium, Arial Black, sans-serif;
    letter-spacing: 0;
}

h1, .h1 {
    font-size: 3rem;
    font-weight: 400;
    /*line-height: 1.167;*/
    letter-spacing: 0;
}
@media (max-width: 1280px) {
    h1, .h1 {
        font-size: 2.125rem;
        font-weight: 400;
        /*line-height: 1.235;*/
        letter-spacing: 0.00735em;
    }
}
@media (max-width: 600px) {
    h1, .h1 {
        font-size: 1.5rem;
        font-weight: 400;
        /*line-height: 1.334;*/
        letter-spacing: 0;
    }
}

h2, .h2 {
    font-size: 2.125rem;
    font-weight: 400;
    /*line-height: 1.235;*/
    letter-spacing: 0.00735em;
}
@media (max-width: 1280px) {
    h2, .h2 {
        font-size: 1.5rem;
        font-weight: 400;
        /*line-height: 1.334;*/
        letter-spacing: 0;
    }
}
@media (max-width: 600px) {
    h2, .h2 {
        font-size: 1.25rem;
        font-weight: 500;
        /*line-height: 1.6;*/
        letter-spacing: 0.0075em;
    }
}


/* swiper */
.swiper {
    width:100%; 
    aspect-ratio: 3 / 2; 
    --swiper-navigation-color: #fff;
    --swiper-pagination-color: #fff;
    border-radius: 1rem;
}
@media (min-width: 960px) {
    .swiper {
        border-radius: 2rem;
    }
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    object-fit: cover;
}

/* custom */
.my-gallery {
    margin-left: -16px;
    margin-right: -16px;
    padding: 16px;
    gap: 16px;
}
@media (min-width: 600px) {
    .my-gallery {
        margin-left: -24px;
        margin-right: -24px;
        padding: 24px;
        gap: 24px;
    }
}
@media (min-width: 960px) {
    .my-gallery {
        margin-left: 0;
        margin-right: 0;
        gap: 32px;
        border-radius: 4rem;
        padding: 2.5rem;
    }
}


.quest-info-text, .quest-info-image {
    width:100%;
}
@media (min-width: 960px) {
    .quest-info-text {
        width:60%
    }
    .quest-info-image {
        width:40%
    }
}


@media (max-width: 600px) {
    .show-sm {
        display: none !important;
    }
}
@media (max-width: 960px) {
    .show-md {
        display: none !important;
    }
}
@media (min-width: 960px) {
    .hide-md {
        display: none !important;
    }
}


.payment-widget {
    width: 100%;
    bottom: -20px;
    background-color: #fff3ef;
    z-index: 1;
    padding: 0 20px 20px 20px;
    border-radius: 22px; margin-top: 88px;
}
@media (min-width: 600px) {
    .payment-widget{
        border-radius: 22px; margin-top: 88px; max-width:400px;
    }
}
@media (min-width: 960px) {
    .payment-widget{
        gap: 16px;
        padding: 0 32px 40px 32px;
        border-radius: 22px; margin-top: 88px; max-width:400px;
    }
}

.payment-widget-header {
    height: 140px; 
    margin-top: -88px;
}
@media (min-width: 960px) {
    .payment-widget-header{
        height: 180px; margin-top: -114px;
    }
}

.payment-widget-direction {
    flex-direction: row;
}
@media (min-width: 960px) {
    .payment-widget-direction{
        flex-direction: column;
    }
}

.payment-widget-price {
    font-family: Unbounded-Medium, Arial Black, sans-serif;
    font-weight: 400;
    color: #000000;
    font-size: 2.125rem;
    line-height: 1.235;
    letter-spacing: .00735em;
}
@media (min-width: 960px) {
    .payment-widget-price {
        font-size: 3.75rem;
        line-height: 1.2;
        letter-spacing: -.00833em;
    }
}

.my-grid-order{
    cursor: pointer;
    height: 300px; 
    border-radius: 2rem;
}
@media (min-width: 960px) {
    .my-grid-order{
        height: 400px; 
        border-radius: 3rem;
    }
}


.my-quest-info {
    bottom: 16px; 
    width:100%; 
    background: linear-gradient(to bottom, #ffffff00 0%, #ffffff 30%, #ffffff 100%);
}
@media (min-width: 600px) {
    .my-quest-info{
        max-width:420px;
    }
}

.my-quest-links {
    gap: 4px;
}
@media (min-width: 600px) {
    .my-quest-links{
        gap: 16px;
    }
}

.my-quest-links h2 {
    font-size: 1.25rem;
    font-weight: 500;
    /*line-height: 1.6;*/
    letter-spacing: 0.0075em;
}
@media (min-width: 600px) {
    .my-quest-links h2 {
        font-size: 1.5rem;
        font-weight: 400;
        /*line-height: 1.334;*/
        letter-spacing: 0;
    }
}

.my-quest-links img {
    width: 60px;
}
@media (min-width: 600px) {
    .my-quest-links img{
        width: 80px;
    }
}

.bottom-buttons {
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
    padding: 16px;
    margin-top: 24px;
    margin-bottom: 16px;
    position: sticky;
    width:100%; 
    bottom:0; 
    z-index: 2;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 30%, #ffffff 100%);
}
@media (min-width: 600px) {
    .bottom-buttons {
        padding: 16px 24px 16px 24px;
    }
}


.quest-player {
    display: flex;
    flex-grow: 1;
    align-items: center;
    gap: 0;
    padding: 16px;
    flex-direction: column;
    opacity: 0.7;
    pointer-events: none;

    /*class="@_scr.Map("d-flex flex-row flex-grow-1 align-center", (Scr.xs, "gap-0 pa-4 flex-column"), (Scr.md, $"gap-6 pa-20 {((taskIndex % 2) == 0 ? "flex-row" : "flex-row-reverse")}"))"*/
    /*style="@(!isCurrentTask ? "opacity: 0.7; pointer-events: none;" : @_scr.Map("background-color: #eff3ff;", (Scr.xs, "border-radius: 16px;"), (Scr.md, "border-radius: 32px;")))"*/
}
.quest-player.current-task {
    opacity: 1;
    pointer-events: auto;
    background-color: #eff3ff;
    border-radius: 16px;
}
@media (min-width: 960px) {
    .quest-player {
        gap: 24px;
        padding: 80px;
        flex-direction: row;
    }
    .quest-player .reverse {
        flex-direction: row-reverse !important;
    }
    .quest-player .current-task {
        border-radius: 32px;
    }
}

.quest-player-content {
    width: 100%; 
}
@media (min-width: 960px) {
    .quest-player-content {
        width: auto;
    }
}


.support-widget{
    position: fixed;
    right: 16px;
    bottom: 80px;
    z-index: 10;
    gap: 8px;
}
@media (min-width: 960px) {
    .support-widget{
        right: 40px;
        bottom: 40px;
        gap: 12px;
    }
}

.support-widget-buttons{
    gap: 8px;
}
@media (min-width: 960px) {
    .support-widget-buttons{
        gap: 12px;
    }
}
.support-widget-buttons img{
    width: 44px; 
    height: 44px; 
    cursor: pointer;
}


/* template */
/*xs – 600 pixels wide or less.*/
.template{}
/*sm – Between 600 and 960 pixels wide.*/
@media (min-width: 600px) {
    .template{}
}
/*md – Between 960 and 1280 pixels wide.*/
@media (min-width: 960px) {
    .template{}
}
/*lg – Between 1280 and 1920 pixels wide.*/
@media (min-width: 1280px) {
    .template{}
}
/*xl – Between 1920 and 2560 pixels wide.*/
@media (min-width: 1920px) {
    .template{}
}
/*xxl – 2560 or more pixels wide.*/
@media (min-width: 2560px) {
    .template{}
}