.text-with-outline {
    position: relative;
    overflow: hidden;

    font-family: PixeloidSans;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.3em;
    text-align: center;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
    /* For correct box-shadow and outline offset */
    padding: 0 10px 10px;
}
.text-with-outline.active {
        background: rgba(61, 93, 240, 0.9);
    }
@media (max-width: 768px) {
    .text-with-outline {
        font-size: 20px;
}
    }
.text-with-outline .text {
        color: white;
        position: relative;
        /* To place it on the same level with outline */
        transform: translate3d(0,0,0);
    }
.text-with-outline .outline {
        color: #171816;
        pointer-events: none;
    }
.text-with-outline .top, .text-with-outline .left, .text-with-outline .right, .text-with-outline .bottom {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
    }
.text-with-outline .top    { transform: translateY(-3px); }
.text-with-outline .left   { transform: translateX(-3px); }
.text-with-outline .right  { transform: translateX(3px); }
.text-with-outline .bottom { transform: translateY(3px); }
@media (max-width: 768px) {
        .text-with-outline .top    { transform: translateY(-2px); }
        .text-with-outline .left   { transform: translateX(-2px); }
        .text-with-outline .right  { transform: translateX(2px); }
        .text-with-outline .bottom { transform: translateY(2px); }
    }
section.launch {
    height: 100vh;
}
section.launch .container {
        min-height: 100vh;
        display: flex;
        flex-direction: column;

        background: url(https://cdn-b.heybabes5years.ru/media/pc_background.cf6d89cab99df30144e0.svg)
            no-repeat center center;
        background-size: cover;
        background-attachment: fixed;

        /* Base padding, it will be recalculated for each resize. */
        padding: 260px 220px 380px;
    }
@media (max-width: 768px) {
    section.launch .container {
            padding: 70px 30px;
    }
        }
section.launch .border {
        transform-origin: left top;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        z-index: 1;
        pointer-events: none;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
    }
@media (max-width: 768px) {
    section.launch .border {
            display: none;
    }
        }
section.launch .game-icons {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 40px;
        gap: 40px;
        justify-content: space-between;
    }
@media (max-width: 580px) {
    section.launch .game-icons {
            grid-template-columns: repeat(2, 140px);
    }
        }
section.launch .game-icons .icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            position: relative;
        }
section.launch .game-icons .icon img {
                width: 110px;
                height: 110px;
                margin-bottom: 8px;
                -webkit-user-select: none;
                   -moz-user-select: none;
                        user-select: none;
                pointer-events: none;
            }
section.launch .game-icons .icon img.bonus {
                width: 104px;
                position: absolute;
                top: -50%;
                transform: translate3d(-50%, 50%, 0);
            }
section.launch .game-icons .icon.active img {
                    filter: opacity(0.9);
                    background-color: rgba(61, 93, 240, 0.95);
                }
section.launch p.description {
        padding: 16px;
        max-width: 600px;
        border: 3px solid #ff91b4;
        background: rgba(255,255,255,0.8);
        border-radius: 25px;
        font-family: PixeloidSans;
        font-weight: 400;
        font-size: 18px;
        line-height: 18px;
    }
@media (min-width: 768px) {
    section.launch p.description {
            margin: 24px;
            padding: 16px 32px;
            font-size: 20px;
    }
        }
section.launch .line-launch {
        background: #f790b2;
        border-top: 2px solid black;
        margin-top: auto;
        height: 44px;
        overflow: hidden;

        /* To match padding */
    }
@media (max-width: 768px) {
    section.launch .line-launch {
            position: relative;
            width: calc(100% + 30px + 30px);
            left: -30px;
            bottom: -30px;
    }
        }
@media (max-width: 768px) {
    section.launch .line-launch {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
    }
        }
section.launch .line-launch img {
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
            position: relative;
            top: -2px;
            cursor: pointer;
        }

button.promo-code {
    margin: 30px auto 0;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25098);
    text-align: center;
    display: flex;
    align-items: center;
    border: none;
    border-radius: 25px;
    position: relative;
    padding: 22px 40px 22px 20px;
    width: 260px;
    max-width: 100%;
    cursor: pointer;
}
button.promo-code span {
        font-family: Manrope;
        font-weight: 700;
        font-size: 18px;
        line-height: 27px;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
button.promo-code img {
        width: 30px;
        position: absolute;
        right: 7px;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
        pointer-events: none;
    }
button.promo-code.copied {
        background: #ff91b4;
        padding: 16px 24px 15px;
    }
button.promo-code.copied span {
            font-size: 22px;
            line-height: 19.8px;
            color: white;
        }
button.promo-code.copied img {
            display: none;
        }

.gameResults {
    background: rgba(255,145,180,0.8);
    padding: 16px 8px;
    max-width: 380px;
    margin: 0 auto;
    border: 3px solid black;
    box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25098);
}
.gameResults.captcha iframe {
        margin: 16px auto;
        display: block;
    }
.gameResults h1 {
        font-weight: 700;
        font-size: 30px;
        line-height: 36px;
        text-align: center;
        color: white;
    }
@media (max-width: 400px) {
    .gameResults h1 {
            font-size: 24px;
    }
        }
.gameResults p {
        color: white;
        margin-top: 20px;
        font-weight: 400;
        font-size: 20px;
        line-height: 18px;
        text-align: center;
        padding: 0 28px;
    }
@media (max-width: 400px) {
    .gameResults p {
            font-size: 15px;
    }
        }
.gameResults .action {
        box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25098);
        background: white;
        color: black;
        border: 3px solid black;
        width: 100%;
        display: block;
        -webkit-text-decoration: none;
        text-decoration: none;
        font-weight: 700;
        font-size: 24px;
        line-height: 21.6px;
        text-align: center;
        padding: 16px 0;
        cursor: pointer;
    }
@media (max-width: 400px) {
    .gameResults .action {
            font-size: 22px;
    }
        }
.gameResults a.action {
        margin-top: 30px;
    }
.gameResults a + button {
        margin-top: 8px;
    }

.game-header {
    display: flex;
    background: #FF91B4;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 3px 5px;
}
.game-header h1 {
        color: white;
        font-family: PixeloidSans;
        font-weight: 700;
        font-size: 20px;
        line-height: 18px;
    }
.game-header button {
        cursor: pointer;
        border-radius: 5px;
        overflow: hidden;
        background: white;
        border: none;
        width: 35px;
        height: 35px;
        padding: 0;
    }
.game-header button img {
            width: 23px;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
            pointer-events: none;
        }
section.clothes {
    min-height: 100vh;
    background: url(https://cdn-b.heybabes5years.ru/media/bg_pink.82014c44485c9fcd8476.webp)
        no-repeat center center;
    background-size: cover;
    padding: 60px 20px;
}

section.clothes.demo {
        overflow: hidden;
        padding: 0;

        background: url(https://cdn-b.heybabes5years.ru/media/bg_babes.49bc817c1a6184f47d1a.webp);
        background-size: 500px;
        background-repeat: repeat;
        animation: moveBackground 30s linear infinite;
    }

section.clothes .game-container {
        background: white;
        border: 3px solid #ff91b4;
        border-radius: 5px;
        margin: 0 auto;
        max-width: 380px;
        position: relative;
    }

section.clothes .babe {
        position: relative;
    }

section.clothes .babe img {
            width: 100%;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
            pointer-events: none;
        }

section.clothes .babe img.hidden {
                height: 374px;
                width: auto;
                width: initial;
                margin: 0 auto;
                display: block;
            }

section.clothes .babe .selected img {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;

                /* Head */
            }

section.clothes .babe .selected img:nth-child(1) {
                    z-index: 5;
                }

/* Top */

section.clothes .babe .selected img:nth-child(2) {
                    z-index: 4;
                }

/* Bottom */

section.clothes .babe .selected img:nth-child(3) {
                    z-index: 3;
                }

/* Shoes */

/* Start not from 1 for special case for leggins. */

section.clothes .babe .selected img:nth-child(4) {
                    z-index: 2;
                }

/* Extra */

section.clothes .babe .selected img:nth-child(5) {
                    z-index: 6;
                }

section.clothes .demo-container {
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

section.clothes .demo-container .babe {
            width: 100%;
            margin: 40px auto 0;
            max-width: 500px;
        }

section.clothes .demo-container img.remember {
            width: 136px;
            margin: 0 auto;
            display: block;
            pointer-events: none;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
        }

@media (min-width: 768px) {

section.clothes .demo-container img.remember {
                width: 300px;
        }
            }

section.clothes .demo-container button {
            background: #ff5099;
            border: 5px solid #ffffff;
            color: #ffffff;
            font-family: PixeloidSans;
            font-weight: 700;
            font-size: 40px;
            line-height: 90%;
            text-align: center;
            border-radius: 50%;
            width: 156px;
            height: 156px;
            margin: 40px auto 60px;
            display: block;
            cursor: pointer;
            padding: 0;
        }

section.clothes .main-action {
        background: url(https://cdn-b.heybabes5years.ru/media/bg.a327e41b19be09659bff.svg) no-repeat
            center center;
        background-size: 98%;
        background-position-y: -100%;
        position: relative;
        padding: 20px 0;
    }

section.clothes .main-action .timer {
            font-family: PixeloidSans;
            font-weight: 700;
            font-size: 20px;
            line-height: 18px;
            text-align: center;
            color: #ff91b4;
            position: absolute;
            bottom: 2px;
            left: 0;
            right: 0;
        }

section.clothes .main-action .hints {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 67px;
            height: 67px;
            border-radius: 50%;
            border: 3px solid black;
            box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25098);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            cursor: pointer;
        }

section.clothes .main-action .hints:active {
                transform: translateY(2px);
            }

section.clothes .main-action .hints {
            background: #ff91b4;
            color: #000000;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
            /* To handle clicks and render hints button above all other layers. */
            z-index: 10;
        }

section.clothes .main-action .hints img {
                width: 42px;
                -webkit-user-select: none;
                   -moz-user-select: none;
                        user-select: none;
                pointer-events: none;
            }

section.clothes .main-action .hints span {
                margin-top: 4px;
                font-weight: 700;
                font-size: 12px;
                line-height: 10.8px;
                text-align: center;
            }

section.clothes .description {
        padding: 0 24px 28px;
    }

section.clothes .description .title {
            border: 3px solid black;

            display: flex;
            justify-content: space-between;
            align-items: center;

            background: #ff91b4;
            box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25098);
            padding: 24px;
        }

section.clothes .description .title.with-arrows {
                padding: 24px 3px;
            }

section.clothes .description .title img {
                cursor: pointer;
            }

section.clothes .description .title img.right {
                    transform: rotate(180deg);
                }

section.clothes .description h1 {
            font-family: PixeloidSans;
            font-weight: 700;
            font-size: 20px;
            line-height: 18px;
            text-align: center;
            color: white;
            flex: 1;
        }

section.clothes .description p {
            margin-top: 20px;
            text-align: center;
        }

section.clothes .description p span.no-wrap {
                text-wrap: nowrap;
            }

section.clothes .description p b {
                font-weight: 700;
            }

section.clothes .description .selectable {
            margin-top: 20px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 25px 20px;
            gap: 25px 20px;
        }

section.clothes .description .selectable li {
                border: 2px solid #ff91b4;
                cursor: pointer;
            }

section.clothes .description .selectable li.selected {
                    border-width: 5px;
                }

section.clothes .description .selectable li img {
                    width: 100%;
                    -webkit-user-select: none;
                       -moz-user-select: none;
                            user-select: none;
                    pointer-events: none;
                }

section.clothes .description button {
            cursor: pointer;
            width: 100%;
            padding: 15px;
            margin-top: 22px;
            font-family: PixeloidSans;
            font-weight: 700;
            font-size: 40px;
            line-height: 36px;
            text-align: center;
            color: black;
            background: white;
            border: 3px solid #ff91b4;
            box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25098);
        }

section.clothes .description.final button {
                font-size: 20px;
                line-height: 18px;
            }

section.clothes .description.hidden {
            opacity: 0;
            pointer-events: none;
        }

section.clothes .results {
        margin: 8px;
        position: absolute;
        bottom: 0;
        z-index: 10;
        max-width: calc(100% - 16px);
    }

section.clothes .hidden-share-form {
        position: absolute;
        top: 99999px;
        width: 0;
        overflow: hidden;
    }

section.clothes .share-container {
        width: 900px;
        background: url(https://cdn-b.heybabes5years.ru/media/bg_pink.82014c44485c9fcd8476.webp)
            no-repeat center center;
        background-size: cover;
        position: relative;
        padding: 135px 15px;
    }

section.clothes .share-container img.share-label {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 1;
        }

section.clothes .share-container .inner-container {
            height: 1330px;
            border-radius: 50px;
            border: #64293e 5px solid;
            background: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
        }

section.clothes .share-container .babe {
            background: url(https://cdn-b.heybabes5years.ru/media/bg.a327e41b19be09659bff.svg)
                no-repeat center center;
            background-size: 88%;
            background-position-y: 100%;
            flex: 1;
        }

section.clothes .share-container .babe img {
                width: 90%;
                margin: 350px auto 0;
                display: block;
            }

section.clothes .share-container .footer {
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 26px 40px;
        }

section.clothes .share-container .footer p {
                font-family: Manrope;
                font-weight: 400;
                font-size: 32px;
                line-height: 90%;
                text-align: right;
                color: #ff91b4;
            }

section.clothes .share-container .footer img {
                width: 270px;
            }

@keyframes moveBackground {
    0% {
        background-position-y: 10000px;
    }
    100% {
        background-position-y: 0;
    }
}

section.dance {
    min-height: 100vh;
    position: relative;
}

section.dance .bg-container {
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #f6bde7;
        z-index: -1;
    }

section.dance .bg-container img.bg {
            position: absolute;
            z-index: -1;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
            pointer-events: none;
            min-width: 1000px;
            width: calc(max(100vh, 100vw) * 2);
            position: absolute;
            top: 50%;
            left: 50%;
            -o-object-fit: cover;
               object-fit: cover;
            animation: rotate-lollipop 10s linear infinite;
            transform: translate3d(-50%, -50%, 0) rotate(0deg);
            will-change: transform;
        }

section.dance .demo {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        width: 100vw;
    }

section.dance .dance-machine {
        display: block;
        width: 320px;
        margin: 55px auto 0;
        position: relative;
    }

section.dance .dance-machine.clickable {
            animation: zoom-in-out 1s ease-in-out infinite;
            cursor: pointer;
        }

section.dance .dance-machine img.gif {
            position: absolute;
            top: 16%;
            left: 0;
            right: 0;
            width: 70%;
            max-height: 50%;
            margin: 0 auto;
        }

section.dance .dance-machine img.machine {
            width: 100%;
            transform: translate3d(0, 0, 0);
        }

section.dance .dance-machine .gradient {
            position: absolute;
            top: 20%;
            left: 0;
            right: 0;
            height: 39%;
            width: 70%;
            margin: 0 auto;
            background: linear-gradient(180deg, #ffffff 0%, #503ef8 100%);
        }

section.dance .dance-machine img.press {
            position: absolute;
            top: 26%;
            left: 0;
            right: 0;
            margin: 0 auto;
        }

section.dance .play .dance-machine {
        width: 100%;
        max-width: 600px;
        margin-top: 0;
    }

section.dance .play {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }

section.dance .game-container {
        background: white;
        border: 3px solid #ff91b4;
        border-radius: 5px;
        margin: 0 auto;
        max-width: 380px;
        position: relative;
        top: 20px;
    }

section.dance .progress {
        position: fixed;
        top: 5%;
        left: 0;
        right: 0;
        margin: 0 auto;
        border: 3px solid #ffffff;
        border-radius: 50px;
        height: 25px;
        width: 280px;
        background: rgba(255, 255, 255, 0.8);
    }

section.dance .progress .value {
            height: 100%;
            background: #64d6ab;
            border-radius: 50px;
            transition: width 0.5s;
        }

section.dance .track {
        position: fixed;
        width: 100%;
        min-height: 75vh;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        transform: perspective(10px) rotateX(1deg);
        border-radius: 8px;
        max-width: 600px;
        border: 5px solid #ff646f;
    }

section.dance .track .spans {
            position: relative;
        }

section.dance .track .spans span {
                position: absolute;
                font-family: PixeloidSans;
                font-weight: 700;
                font-size: 60px;
                line-height: 90%;
                text-align: center;
                display: block;
            }

section.dance .track .spans span.wait {
                    color: #ffffff;
                    top: 3vh;
                    left: 0;
                    right: 0;
                    margin: 0 auto;
                }

section.dance .track .spans span.press {
                    color: #ffe343;
                    top: 18vh;
                    -webkit-text-stroke: 3px #7278d6;
                }

section.dance .track .spans span.press:nth-child(2) {
                        left: 5vh;
                    }

section.dance .track .spans span.press:nth-child(3) {
                        right: 5vh;
                    }

section.dance .track .bg,
        section.dance .track .green {
            position: fixed;
            width: 100%;
            height: 100%;
            opacity: 0.8;
            border-radius: 4px;
        }

section.dance .track .bg {
            background: linear-gradient(180deg, #ff646f 0%, #ffffff 100%);
        }

section.dance .track .green {
            background: linear-gradient(
                180deg,
                transparent 20%,
                #64d6ab 20%,
                #00ff9f 60%,
                transparent 60%
            );
        }

section.dance .track .arrows {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 100%;
            gap: 100px;
        }

section.dance .track .arrows .arrow {
                width: 120px;
                display: block;

                /* Directions */
            }

section.dance .track .arrows .arrow.down {
                    transform: rotate(90deg);
                }

section.dance .track .arrows .arrow.left {
                    transform: rotate(180deg);
                }

section.dance .track .arrows .arrow.up {
                    transform: rotate(270deg);
                }

/* States */

section.dance .track .arrows .arrow.outside {
                    opacity: 0.6;
                }

/* &.inside  { opacity: 1; } */

/* &.active  { opacity: 1; } */

/* TODO: For debug, delete */

/* &.outside {
                    border: 5px solid blue;
                }
                &.inside {
                    border: 5px solid yellow;
                }
                &.active {
                    border: 5px solid black;
                }
                &.missed {
                    border: 5px solid red;
                }
                &.passed {
                    border: 5px solid green;
                } */

section.dance .controls {
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

section.dance .controls .column {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 15px;
        }

section.dance .controls button {
            width: 120px;
            height: 120px;
            background: radial-gradient(
                50% 50% at 50% 50%,
                #f6bde7 0%,
                #804b9f 100%
            );
            border-radius: 50%;
            border: 5px solid #7278d6;
            outline: none;
            cursor: pointer;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;

            /* Base arrow - right */
            transform: rotate(0deg);
        }

section.dance .controls button:active {
                transform: translateY(5px);
            }

section.dance .controls button.down {
                transform: rotate(90deg);
            }

section.dance .controls button.down:active {
                    transform: rotate(90deg) translateX(5px);
                }

section.dance .controls button.left {
                transform: rotate(180deg);
            }

section.dance .controls button.left:active {
                    transform: rotate(180deg) translateY(-5px);
                }

section.dance .controls button.up {
                transform: rotate(270deg);
            }

section.dance .controls button.up:active {
                    transform: rotate(270deg) translateX(-5px);
                }

section.dance .results {
        position: relative;
        top: 20px;
    }

section.dance .description {
        padding: 0 24px 28px;
    }

section.dance .description h1 {
            margin-top: 35px;
            font-family: PixeloidSans;
            font-weight: 700;
            font-size: 30px;
            line-height: 27px;
        }

section.dance .description p {
            margin-top: 20px;
        }

section.dance .description p span.no-wrap {
                text-wrap: nowrap;
            }

section.dance .description p b {
                font-weight: 700;
            }

section.dance .description button,
        section.dance .description a {
            width: 100%;
            padding: 15px;
            margin-top: 22px;
            font-family: PixeloidSans;
            font-weight: 700;
            font-size: 40px;
            line-height: 36px;
            text-align: center;
            color: black;
            background: white;
            border: 3px solid #ff91b4;
            box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25098);
        }

section.dance .description button {
            cursor: pointer;
        }

section.dance .description a {
            -webkit-text-decoration: none;
            text-decoration: none;
            display: block;
            margin-top: 8px;
        }

section.dance .description.final button,
            section.dance .description.final a {
                font-size: 20px;
                line-height: 18px;
            }

@keyframes zoom-in-out {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes rotate-lollipop {
    0% {
        transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }
    100% {
        transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
}

section.crush {
    min-height: 100vh;
    background: url(https://cdn-b.heybabes5years.ru/media/bg.9595816117c5b001d941.webp) center center;
    background-size: cover;
    padding: 60px 20px;
    position: relative;
}

section.crush.full-screen {
        padding: 60px 0;
    }

section.crush .game-container {
        background: white;
        border: 3px solid #ff91b4;
        border-radius: 5px;
        margin: 0 auto;
        max-width: 380px;
        position: relative;
    }

section.crush .demo-items {
        margin: 30px 20px 0;
        position: relative;
        height: 380px;
        background: #ff7755;
        border-radius: 50px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
        gap: 20px;
    }

section.crush .demo-items img {
            position: relative;
            width: 146px;
            transform: rotate(-15deg);
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
            pointer-events: none;
        }

section.crush .demo-items img:nth-child(1) {
            animation: random-translate-1 3s infinite linear;
        }

section.crush .demo-items img:nth-child(2) {
            animation: random-translate-2 3s infinite linear;
        }

section.crush .demo-items img:nth-child(3) {
            top: -50px;
            animation: random-translate-3 3s infinite linear;
        }

section.crush .demo-items img:nth-child(4) {
            top: -50px;
            animation: random-translate-4 3s infinite linear;
        }

section.crush .demo {
        overflow: hidden;
        width: 100%;
    }

section.crush .demo .middle {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
        }

section.crush .demo .line {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

section.crush .demo .line.top {
                bottom: 30px;
            }

section.crush .demo .line.top .cards-container {
                    animation: infinite-scroll-left 6s linear infinite;
                    /* Pre-position for the animation */
                    transform: translateX(0);
                }

section.crush .demo .line.top img {
                    transform: rotate(-15deg);
                }

section.crush .demo .line.bottom {
                top: 30px;
            }

section.crush .demo .line.bottom .cards-container {
                    animation: infinite-scroll-right 6s linear infinite;
                    /* Pre-position for the animation */
                    transform: translateX(-50%);
                }

section.crush .demo .line.bottom img {
                    transform: rotate(15deg);
                }

section.crush .demo .line .cards-container {
                display: flex;
                /* Allow container to be as wide as needed */
                width: -moz-max-content;
                width: max-content;
                /* Prevent any flickering during animation */
                backface-visibility: hidden;
                will-change: transform;
            }

section.crush .demo .line img {
                position: relative;
                width: 146px;
                /* To not overflow */
                margin: 20px 0;
                -webkit-user-select: none;
                   -moz-user-select: none;
                        user-select: none;
                pointer-events: none;
            }

section.crush .demo .line img + img {
                /* Little offset */
                margin-left: -20px;
            }

section.crush .demo .name {
            cursor: pointer;
            display: block;
            margin: 0 auto;
            position: relative;
            /* Ensure it stays above the scrolling cards */
            z-index: 1;

            animation: name-zoom-in-out 2s infinite ease-in-out;
        }

section.crush .play {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

section.crush .play .quiz {
        width: 335px;
        /* For matches row */
        padding-bottom: 120px;
    }

@media (min-width: 600px) {

section.crush .play .quiz {
            width: 405px;
    }
        }

section.crush .play .quiz p.title {
            height: 116px;

            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            background: #ff7755;
            border: 3px solid white;
            margin: 0 auto;
            color: #ffffff;

            font-family: PixeloidSans;
            font-weight: 400;
            font-size: 26px;
            line-height: 90%;
        }

section.crush .play .quiz .answers {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: 5px;
            gap: 5px;
            margin-top: 10px;
        }

section.crush .play .quiz .card {
            position: relative;
            width: 165px;
            height: 250px;

            border-radius: 20px;
            overflow: hidden;
            transition: all cubic-bezier(0.23, 1, 0.32, 1) 0.3s;
            perspective: 1000px;
            transform-style: preserve-3d;
        }

@media (min-width: 600px) {

section.crush .play .quiz .card {
                width: 200px;
                height: 300px;
        }
            }

section.crush .play .quiz .card .front,
            section.crush .play .quiz .card .back {
                position: absolute;
                width: 100%;
                height: 100%;
                backface-visibility: hidden;
                transform-style: preserve-3d;
                transition: ease-in-out 600ms;
            }

section.crush .play .quiz .card .front {
                background: url(https://cdn-b.heybabes5years.ru/media/back.53b25951e8e99047aa02.svg)
                    no-repeat center center;
                background-size: contain;
                padding: 22px 16px;
            }

section.crush .play .quiz .card .front .answer {
                    border-radius: 20px;
                    width: 100%;
                    height: 100%;
                    background: #ffeeee;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    flex-direction: column;
                }

section.crush .play .quiz .card .front span {
                    display: block;
                    margin-top: 12px;
                    font-family: PixeloidSans;
                    font-weight: 700;
                    font-size: 16px;
                    line-height: 100%;
                    text-align: center;
                }

section.crush .play .quiz .card .front img {
                    max-height: 60%;
                    -o-object-fit: contain;
                       object-fit: contain;
                    max-width: 80%;
                    -webkit-user-select: none;
                       -moz-user-select: none;
                            user-select: none;
                    pointer-events: none;
                }

section.crush .play .quiz .card .front p {
                    font-family: PixeloidSans;
                    font-weight: 700;
                    font-size: 14px;
                    line-height: 100%;
                    text-align: center;
                }

@media (min-width: 600px) {

section.crush .play .quiz .card .front p {
                        font-size: 20px;
                }
                    }

section.crush .play .quiz .card .front p.small {
                        font-size: 14px;
                    }

@media (min-width: 600px) {

section.crush .play .quiz .card .front p.small {
                            font-size: 16px;
                    }
                        }

section.crush .play .quiz .card .back {
                transform: rotateY(-180deg);
            }

section.crush .play .quiz .card .back p.person-comment {
                    position: absolute;
                    left: 0;
                    right: 0;
                    width: 100%;
                    background: #ffffff;
                    bottom: 10px;
                    border-radius: 50%;
                    padding: 14px;
                    border: 2px solid #d763aa;
                    font-family: PixeloidSans;
                    font-weight: 700;
                    font-size: 13px;
                    line-height: 100%;
                    text-align: center;
                    vertical-align: middle;
                }

@media (min-width: 600px) {

section.crush .play .quiz .card .back p.person-comment {
                        font-size: 16px;
                }
                    }

section.crush .play .quiz .card .back img.person {
                    display: block;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    -o-object-fit: cover;
                       object-fit: cover;
                    z-index: 0;
                }

section.crush .play .quiz .card.selected {
                transform: scale(1.1);
                z-index: 2;
            }

section.crush .play .quiz .card.selected.opened {
                animation: card-opening-zoom-in-out 1s ease-in-out forwards;
            }

section.crush .play .quiz .card.selected.opened .front {
                    animation: card-opening-front 600ms ease-in-out forwards;
                    transform: rotateY(0deg);
                }

section.crush .play .quiz .card.selected.opened .back {
                    animation: card-opening-back 600ms ease-in-out forwards;
                    transform: rotateY(-180deg);
                }

section.crush .play .quiz button {
            width: 100%;
            padding: 15px;
            margin-top: 22px;
            font-family: PixeloidSans;
            font-weight: 700;
            font-size: 40px;
            line-height: 36px;
            text-align: center;
            color: black;
            background: white;
            border: 3px solid #ff91b4;
            box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25098);
            cursor: pointer;
            outline: none;

            opacity: 0;

            /* To prevent change size of bg and struggling. */
        }

section.crush .play .quiz button.visible {
                opacity: 1;
            }

section.crush .play .quiz .matches {
            position: fixed;
            bottom: 0;
            pointer-events: none;
            z-index: 1;
        }

section.crush .play .quiz .matches img {
                width: 120px;
                animation: crush-matched 1s ease-in-out;
                transform: translateY(50%) rotate(-15deg);
                -webkit-user-select: none;
                   -moz-user-select: none;
                        user-select: none;
                pointer-events: none;
            }

section.crush .play .quiz .matches img + img {
                /* Little offset */
                margin-left: -70px;
            }

@media (min-width: 768px) {

section.crush .play .quiz .matches img + img {
                    margin-left: -20px;
            }
                }

section.crush .description {
        padding: 0 24px 28px;
    }

section.crush .description h1 {
            margin-top: 35px;
            font-family: PixeloidSans;
            font-weight: 700;
            font-size: 30px;
            line-height: 27px;
        }

section.crush .description p {
            margin-top: 20px;
        }

section.crush .description p span.no-wrap {
                text-wrap: nowrap;
            }

section.crush .description p b {
                font-weight: 700;
            }

section.crush .description button,
        section.crush .description a {
            width: 100%;
            padding: 15px;
            margin-top: 22px;
            font-family: PixeloidSans;
            font-weight: 700;
            font-size: 40px;
            line-height: 36px;
            text-align: center;
            color: black;
            background: white;
            border: 3px solid #ff91b4;
            box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25098);
        }

section.crush .description button {
            cursor: pointer;
        }

section.crush .description a {
            -webkit-text-decoration: none;
            text-decoration: none;
            display: block;
            margin-top: 8px;
        }

section.crush .description.final button,
            section.crush .description.final a {
                font-size: 20px;
                line-height: 18px;
            }

section.crush .final {
        text-align: center;
    }

section.crush .final .person {
            border-top-left-radius: 50px;
            border-top-right-radius: 50px;
            margin-top: 20px;
            padding: 24px 0 0;
        }

section.crush .final .person p {
                margin-top: 0;
                font-family: PixeloidSans;
                line-height: 90%;
                color: white;
            }

section.crush .final .person .text p {
                font-weight: 700;
                font-size: 20px;
                padding: 0 8px;
            }

section.crush .final .person .additional-text p {
                font-weight: 400;
                font-size: 16px;
                padding: 0 8px;
            }

section.crush .final .person img {
                margin-top: 16px;
                width: 100%;
                -webkit-user-select: none;
                   -moz-user-select: none;
                        user-select: none;
                pointer-events: none;

                /* Strange hack to fill empty space under image */
                position: relative;
                top: 4px;
            }

section.crush .final button + button {
            margin-top: 8px;
        }

section.crush .hidden-share-form {
        position: absolute;
        top: 99999px;
        width: 0;
        overflow: hidden;
    }

section.crush .share-container {
        width: 900px;
        height: 1600px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: url(https://cdn-b.heybabes5years.ru/media/bg.9595816117c5b001d941.webp) center
            center;
    }

section.crush .share-container img.share-person {
            width: 831px;
        }

@keyframes random-translate-1 {
    0% {
        transform: translate(0, 0) rotate(-15deg);
    }
    18% {
        transform: translate(-5px, -7px) rotate(-13deg);
    }
    47% {
        transform: translate(-7px, 5px) rotate(-17deg);
    }
    82% {
        transform: translate(5px, -3px) rotate(-14deg);
    }
    100% {
        transform: translate(0, 0) rotate(-15deg);
    }
}

@keyframes random-translate-2 {
    0% {
        transform: translate(0, 0) rotate(-15deg);
    }
    20% {
        transform: translate(-5px, 7px) rotate(-14deg);
    }
    35% {
        transform: translate(4px, -5px) rotate(-16deg);
    }
    50% {
        transform: translate(6px, 7px) rotate(-13deg);
    }
    65% {
        transform: translate(-5px, -4px) rotate(-17deg);
    }
    80% {
        transform: translate(-4px, 7px) rotate(-14deg);
    }
    100% {
        transform: translate(0, 0) rotate(-15deg);
    }
}

@keyframes random-translate-3 {
    0% {
        transform: translate(0, 0) rotate(-15deg);
    }
    22% {
        transform: translate(4px, -5px) rotate(-14deg);
    }
    48% {
        transform: translate(-3px, -7px) rotate(-16deg);
    }
    73% {
        transform: translate(5px, -7px) rotate(-13deg);
    }
    100% {
        transform: translate(0, 0) rotate(-15deg);
    }
}

@keyframes random-translate-4 {
    0% {
        transform: translate(0, 0) rotate(-15deg);
    }
    25% {
        transform: translate(-5px, 5px) rotate(-14deg);
    }
    50% {
        transform: translate(5px, -5px) rotate(-16deg);
    }
    75% {
        transform: translate(-7px, 7px) rotate(-13deg);
    }
    100% {
        transform: translate(0, 0) rotate(-15deg);
    }
}

/* Improved infinite scroll animations for perfect looping */
@keyframes infinite-scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move exactly one set of cards */
        transform: translateX(-50%);
    }
}

@keyframes infinite-scroll-right {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes name-zoom-in-out {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes card-opening-zoom-in-out {
    0% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1.1);
    }
}

@keyframes card-opening-front {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(-180deg);
    }
}

@keyframes card-opening-back {
    0% {
        transform: rotateY(-180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}

@keyframes crush-matched {
    0% {
        transform: translateY(100%);
    }
    50% {
        transform: translateY(0%);
    }
    100% {
        transform: translateY(50%) rotate(-15deg);
    }
}

section.bestie {
    min-height: 100vh;
    background: #ffffff;
    padding: 60px 20px;
    position: relative;
}

section.bestie .crop-container {
        position: relative;
        width: 100%;
        height: 400px; /* Adjust height as needed */
        background: #333;
    }

section.bestie .reactEasyCrop_CropArea {
        border: 2px solid #fff;
    }

section.bestie.full-screen {
        padding: 0;
    }

section.bestie .game-header {
        background: #ffaef4;
    }

section.bestie .eyes-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #f1ecff;
    }

section.bestie .eyes-bg .eyes-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            position: absolute;
            top: -70px;
            left: -70px;
            width: calc(100% + 140px);
            height: calc(100% + 140px);
        }

section.bestie .eyes-bg .eyes-container img {
                height: 140px;
            }

section.bestie .game-container {
        background: white;
        border: 3px solid #ffaef4;
        border-radius: 5px;
        margin: 0 auto;
        max-width: 380px;
        position: relative;
    }

section.bestie .demo-item {
        margin: 10px 20px 0;
        position: relative;
        height: 380px;
        background: #ffe958;
        border-radius: 50px;
    }

section.bestie .demo-item img {
            width: 100%;
            height: 100%;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
            pointer-events: none;
            transform: rotate(-5deg);
            animation: left-right 1.5s infinite ease-in-out;
            user-select: none;
            pointer-events: none;
        }

section.bestie .demo {
        width: 100vw;
        overflow-x: hidden;
        min-height: 100vh;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 1;
        position: relative;
    }

section.bestie .demo span.cta {
            font-family: PixeloidSans;
            font-weight: 700;
            font-size: 44px;
            line-height: 90%;
            text-align: center;
            color: #ffe958;
            -webkit-text-stroke: 2px #ff57c1;
        }

section.bestie .demo .images {
            position: relative;
            margin: 10px auto;
            animation: margin-down-and-up 2s infinite ease-in-out;
        }

section.bestie .demo img.cta {
                margin: 0 auto;
                -webkit-user-select: none;
                   -moz-user-select: none;
                        user-select: none;
                pointer-events: none;
            }

section.bestie .demo img.star {
                width: 430px;
                max-width: 80%;
                animation: rotate-star 10s infinite linear;
                -webkit-user-select: none;
                   -moz-user-select: none;
                        user-select: none;
                pointer-events: none;
                display: block;
                margin: 0 auto;
            }

section.bestie .demo img.form {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 200px;
                max-width: 80%;
                transform: translate(-50%, -50%) scale(1) rotate(-10deg);
                animation: zoom-and-rotate 2s infinite ease-in-out;
                cursor: pointer;
                -webkit-user-select: none;
                   -moz-user-select: none;
                        user-select: none;
            }

section.bestie .paper-ruler {
        width: 100%;
        height: 100%;
        min-height: 100vh;
        min-width: 100vw;
        background-image: linear-gradient(
                90deg,
                rgba(215,225,255,0.6) 0.2em,
                transparent 0.2em
            ),
            linear-gradient(rgba(215,225,255,0.6) 0.2em, transparent 0.2em);
        background-size: 1.5em 1.5em;
        flex-grow: 1;
        line-height: 1.2;
    }

section.bestie .paper-ruler .circle-bg-gradient {
            z-index: 0;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.2;
            background: radial-gradient(
                    circle 550px at 100% 0,
                    rgba(255,174,244,0.6) 0%,
                    transparent 100%
                ),
                radial-gradient(
                    circle 550px at 0 100%,
                    rgba(255,174,244,0.6) 0%,
                    transparent 100%
                );
        }

section.bestie .play {
        width: 100%;
        height: 100%;
        background-color: #fff;
        display: flex;
        flex-direction: column;
    }

section.bestie .play .question {
            padding: 30px 20px;
            position: relative;
            z-index: 1;
            max-width: 440px;
            margin: 0 auto;
            text-align: center;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

section.bestie .play .question .question-number {
                display: flex;
                align-items: flex-start;
                justify-content: center;
            }

@media (max-width: 768px) {

section.bestie .play .question .question-number {
                    /* Hack to not resize each image separately */
                    transform: scale(0.8);
            }
                }

section.bestie .play .question .question-number img {
                    flex: 0 1 auto;
                    max-width: 100%;
                    height: auto;
                }

section.bestie .play .question .question-number .text {
                    margin-right: 12px;
                    transform: rotate(2.77deg);
                }

section.bestie .play .question .title {
                font-family: Manrope;
                font-weight: 700;
                font-size: 50px;
                line-height: 90%;
                text-align: center;
                margin-top: -10px;
            }

@media (max-width: 768px) {

section.bestie .play .question .title {
                    margin-top: -20px;
                    font-size: 40px;
            }
                }

section.bestie .play .question button {
                max-width: 380px;
            }

section.bestie .play .question button.answer,
            section.bestie .play .question input.text-input {
                border: 5px solid #afc3ff;
                border-radius: 50px;
                width: 100%;
                max-width: 380px;
                text-align: center;
                vertical-align: middle;
                color: #ffaef4;
                background: #ffffff;
            }

section.bestie .play .question button.answer {
                font-family: PixeloidSans;
                font-weight: 700;
                font-size: 26px;
                min-height: 50px;
                margin-top: 20px;
                cursor: pointer;
                padding: 12px;
            }

section.bestie .play .question button.answer.selected {
                    border-color: #ffaef4;
                }

@media (max-width: 768px) {

section.bestie .play .question button.answer {
                    font-size: 18px;
            }
                }

section.bestie .play .question button.answer + button.answer {
                margin-top: 16px;
            }

section.bestie .play .question input.text-input {
                height: 3em;
                margin: 20px auto 0;
                font-family: PixeloidSans;
                font-weight: 700;
                font-size: 30px;
                line-height: 90%;
                outline: none;
                display: block;
            }

section.bestie .play .question input.text-input::-moz-placeholder {
                    color: #ffaef4;
                }

section.bestie .play .question input.text-input::placeholder {
                    color: #ffaef4;
                }

section.bestie .play .question .upload-form {
                border-radius: 50px;
                border: 5px solid #afc3ff;
                background: #ffffff;
                padding: 30px;
                margin-top: 20px;
            }

section.bestie .play .question .upload-form img.photo {
                    width: 200px;
                    margin: 20px auto;
                    display: block;
                }

section.bestie .play .question .upload-form label {
                    display: block;
                    margin: 0 auto;
                    font-family: PixeloidSans;
                    font-weight: 700;
                    font-size: 24px;
                    line-height: 90%;
                    text-align: center;
                    color: #ffaef4;
                }

section.bestie .play .question .upload-form .file-input input {
                        display: none;
                    }

section.bestie .play .question .canvas {
                border-radius: 5px;
                border: 5px solid #afc3ff;
                background: #ffffff;
                margin: 20px auto 0;
            }

section.bestie .play .question .inner {
                padding-bottom: 60px;
            }

section.bestie .play .question .nav-actions {
                margin-top: 40px;
            }

section.bestie .play .question button.action,
            section.bestie .play .question button.nav {
                width: 100%;
                padding: 15px;
                font-family: PixeloidSans;
                font-weight: 700;
                color: black;
                background: white;
                border: 3px solid #ffaef4;
                box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25098);
                cursor: pointer;
            }

section.bestie .play .question button.action {
                margin-top: 30px;
                font-size: 32px;
                line-height: 90%;
                text-align: center;
                vertical-align: middle;
            }

@media (max-width: 400px) {

section.bestie .play .question button.action {
                    font-size: 18px;
            }
                }

section.bestie .play .question button.action.nowrap {
                    text-wrap: nowrap;
                }

section.bestie .play .question button.action + button.action {
                margin-top: 8px;
            }

section.bestie .play .question button.nav {
                margin-top: auto;
                font-size: 36px;
                line-height: 36px;
                text-align: center;
            }

section.bestie .play .question button.nav + button.nav {
                margin-top: 20px;
            }

section.bestie .play img.caption {
            position: absolute;
            bottom: 0;
            right: 0;
        }

section.bestie .description {
        padding: 0 24px 28px;
    }

section.bestie .description h1 {
            margin-top: 35px;
            font-family: PixeloidSans;
            font-weight: 700;
            font-size: 30px;
            line-height: 27px;
        }

section.bestie .description p {
            margin-top: 20px;
        }

section.bestie .description p span.no-wrap {
                text-wrap: nowrap;
            }

section.bestie .description p b {
                font-weight: 700;
            }

section.bestie .description button,
        section.bestie .description a {
            width: 100%;
            padding: 15px;
            margin-top: 22px;
            font-family: PixeloidSans;
            font-weight: 700;
            font-size: 40px;
            line-height: 36px;

            text-align: center;
            color: black;
            background: white;
            border: 3px solid #ffaef4;
            box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25098);
        }

section.bestie .description button {
            cursor: pointer;
        }

section.bestie .description a {
            -webkit-text-decoration: none;
            text-decoration: none;
            display: block;
            margin-top: 8px;
        }

section.bestie .description.final button,
            section.bestie .description.final a {
                font-size: 20px;
                line-height: 18px;
            }

section.bestie .final {
        text-align: center;
    }

section.bestie .final button + button {
            margin-top: 8px;
        }

section.bestie button:disabled {
        opacity: 0.5;
        pointer-events: none;
    }

section.bestie .hidden {
        /* visibility: hidden; */
        position: absolute;
        top: 99999px;
        width: 0;
        /* height: 0; */
        overflow: hidden;
    }

section.bestie .filled-form {
        padding: 50px 70px;
        width: 900px;
        min-height: 1600px;
        display: flex;
        align-items: center;
    }

section.bestie .filled-form .eyes-bg {
            min-width: 900px;
        }

section.bestie .filled-form .form-container {
            border: 5px solid #e64f91;
            border-radius: 50px;
            position: relative;
            z-index: 1;
            overflow: hidden;
            background: #ffffff;
        }

section.bestie .filled-form .form {
            display: flex;
            flex-direction: column;
            padding: 45px 30px 30px;
            min-width: auto;
        }

section.bestie .filled-form .title {
            position: relative;
            z-index: 1;
        }

section.bestie .filled-form .title h1,
            section.bestie .filled-form .title img {
                display: inline;
            }

section.bestie .filled-form .title h1 {
                font-family: Manrope;
                font-weight: 700;
                font-size: 70px;
                line-height: 90%;
            }

section.bestie .filled-form .title img {
                position: relative;
                top: 14px;
                left: 14px;
            }

section.bestie .filled-form .signs {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
        }

section.bestie .filled-form .signs img {
                -webkit-user-select: none;
                   -moz-user-select: none;
                        user-select: none;
                pointer-events: none;
            }

section.bestie .filled-form .signs img.love {
                    width: 140px;
                    position: absolute;
                    right: 43px;
                    transform: scale(0.7);
                }

section.bestie .filled-form .signs img.arrow {
                    position: absolute;
                    top: 460px;
                    right: 260px;
                    transform: rotate(-90deg) scale(0.8);
                }

section.bestie .filled-form .signs img.caption {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                }

section.bestie .filled-form .answers {
            margin-top: 64px;
            position: relative;
            z-index: 1;
        }

section.bestie .filled-form .answers .avatar {
                position: absolute;
                top: 20px;
                right: 20px;
                width: 280px;
                height: 280px;

                background: #f8eaff;
                box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25098);

                transform: rotate(-8.5deg);
            }

section.bestie .filled-form .answers .avatar img {
                    width: 100%;
                    -o-object-fit: contain;
                       object-fit: contain;
                    transform: translate3d(20px, -20px, 0);
                    border: 5px solid #000000;
                }

section.bestie .filled-form .answers .draw {
                position: absolute;
                top: 400px;
                right: 30px;
                width: 200px;
                height: 200px;
                z-index: -1;
            }

section.bestie .filled-form .answers .draw img {
                    width: 100%;
                    -o-object-fit: contain;
                       object-fit: contain;
                }

/* Image offset */

section.bestie .filled-form .answers .answer:nth-child(3),
                section.bestie .filled-form .answers .answer:nth-child(4),
                section.bestie .filled-form .answers .answer:nth-child(5),
                section.bestie .filled-form .answers .answer:nth-child(6) {
                    width: calc(100% - 330px);
                }

/* Draw offset */

section.bestie .filled-form .answers .answer:nth-child(7),
                section.bestie .filled-form .answers .answer:nth-child(8) {
                    width: calc(100% - 230px);
                }

section.bestie .filled-form .answers .answer span {
                    font-family: Manrope;
                    font-weight: 400;
                    font-size: 30px;
                    line-height: 85%;
                    color: #e64f91;
                }

section.bestie .filled-form .answers .answer p {
                    font-family: Manrope;
                    font-weight: 700;
                    font-size: 40px;
                    line-height: 85%;
                    color: #000000;
                }

section.bestie .filled-form .answers .answer + .answer {
                margin-top: 32px;
            }

section.bestie .filled-form .footer {
            margin-top: 64px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 1;
            position: relative;
        }

section.bestie .filled-form .footer p {
                font-family: Manrope;
                font-weight: 400;
                font-size: 32px;
                line-height: 90%;
                text-align: right;
            }

section.bestie .filled-form .footer img {
                width: 180px;
            }

section.bestie .gameResults {
        position: relative;
    }

@keyframes left-right {
    0% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(-5deg);
    }
}

@keyframes margin-down-and-up {
    0% {
        margin: 10px auto;
    }
    50% {
        margin: 50px auto;
    }
    100% {
        margin: 10px auto;
    }
}

@keyframes rotate-star {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes zoom-and-rotate {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(-10deg);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.3) rotate(10deg);
    }

    100% {
        transform: translate(-50%, -50%) scale(1) rotate(-10deg);
    }
}

.circle-text {
    height: 100%;
    width: 100%;
    position: fixed;

    font-family: PixeloidSans;
    font-weight: 700;
    overflow: hidden;
    display: grid;
    align-items: center;
    justify-items: center;
    place-items: center;

    pointer-events: none;
    z-index: 0;
}

.circle-text .text-container {
        position: relative;
    }

.circle-text .text-container span {
            position: absolute;
            width: 1em;
            white-space: nowrap;
            overflow: hidden;
        }

.circle-text .text-container span:nth-child(1) {
                    text-indent: calc((1 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(-90deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(2) {
                    text-indent: calc((2 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(-74.35deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(3) {
                    text-indent: calc((3 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(-58.7deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(4) {
                    text-indent: calc((4 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(-43.05deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(5) {
                    text-indent: calc((5 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(-27.4deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(6) {
                    text-indent: calc((6 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(-11.75deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(7) {
                    text-indent: calc((7 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(3.9deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(8) {
                    text-indent: calc((8 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(19.55deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(9) {
                    text-indent: calc((9 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(35.2deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(10) {
                    text-indent: calc((10 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(50.85deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(11) {
                    text-indent: calc((11 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(66.5deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(12) {
                    text-indent: calc((12 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(82.15deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(13) {
                    text-indent: calc((13 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(97.8deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(14) {
                    text-indent: calc((14 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(113.45deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(15) {
                    text-indent: calc((15 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(129.1deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(16) {
                    text-indent: calc((16 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(144.75deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(17) {
                    text-indent: calc((17 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(160.4deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(18) {
                    text-indent: calc((18 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(176.05deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(19) {
                    text-indent: calc((19 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(191.7deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(20) {
                    text-indent: calc((20 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(207.35deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(21) {
                    text-indent: calc((21 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(223deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(22) {
                    text-indent: calc((22 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(238.65deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text .text-container span:nth-child(23) {
                    text-indent: calc((23 - 1) * -1em);
                    transform:
                        translate(-50%, -50%)
                        rotate(254.3deg)
                        translateY(-3.607em)
                        rotateX(-90deg);
                }

.circle-text.level-1 .text-container {
            perspective: 12em;
            color: #FFFFFF;
            animation: rotate-right 24s infinite linear;
        }

.circle-text.level-1 .text-container span { font-size: 50px; }

.circle-text.level-2 .text-container {
            perspective: 14em;
            color: #FFD2E6;
            animation: rotate-left 24s infinite linear;
        }

.circle-text.level-2 .text-container span { font-size: 66px; }

.circle-text.level-3 .text-container {
            perspective: 22em;
            color: #FF8ABC;
            animation: rotate-right 24s infinite linear;
        }

.circle-text.level-3 .text-container span { font-size: 88px; }

.circle-text.level-4 .text-container {
            perspective: 30em;
            color: #AC436B;
            animation: rotate-left 24s infinite linear;
        }

.circle-text.level-4 .text-container span { font-size: 111px; }

.circle-text.level-5 .text-container {
            perspective: 36em;
            color: #64293E;
            animation: rotate-right 24s infinite linear;
        }

.circle-text.level-5 .text-container span { font-size: 140px; }

.circle-text.level-6 .text-container {
            perspective: 40em;
            color: #FFD2E6;
            animation: rotate-left 24s infinite linear;
        }

.circle-text.level-6 .text-container span { font-size: 180px; }

.circle-text.level-7 .text-container {
            perspective: 44em;
            color: #FF8ABC;
            animation: rotate-right 24s infinite linear;
        }

.circle-text.level-7 .text-container span { font-size: 240px; }

@keyframes rotate-right {
    from { transform: rotate(0deg) rotateX(0deg) rotate(720deg); }
    to { transform: rotate(360deg) rotateX(0deg) rotate(0deg); }
}

@keyframes rotate-left {
    from { transform: rotate(360deg) rotateX(0deg) rotate(0deg); }
    to { transform: rotate(0deg) rotateX(0deg) rotate(720deg); }
}
section.bag {
    min-height: 100vh;
    background: #ffa7c3;
    padding: 60px 20px;
    position: relative;
}

section.bag.demo {
        position: fixed;
        width: 100vw;
    }

section.bag.inside {
        background: radial-gradient(
            42% 42% at 50% 50%,
            #cb7f5c 0%,
            #33221a 100%
        );
    }

section.bag.inside.game {
            height: 100vh;
            overflow: hidden;
        }

section.bag .black-overlay {
        opacity: 0;
        pointer-events: none;
        z-index: 0;
        background: black;
        position: fixed;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

section.bag.zooming .black-overlay {
            z-index: 1;
            opacity: 1;
            transition: opacity 1s linear;
        }

section.bag .background-spans {
        background: #ffa7c3;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        pointer-events: none;
    }

section.bag img.bag {
        display: block;
        width: 308px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
    }

section.bag.zooming img.bag {
        transform: translate(-50%, -50%) scale(20);
        transition: transform 1s ease-in-out;
    }

section.bag .game-container {
        background: white;
        border: 3px solid #ff91b4;
        border-radius: 5px;
        margin: 0 auto;
        max-width: 380px;
        position: relative;
    }

section.bag .demo-items {
        border: 8px solid white;
        overflow: hidden;
        position: relative;
        width: 380px;
        max-width: 100%;
        height: 400px;
    }

section.bag .demo-items img:nth-child(1) {
            position: absolute;
            top: -30%;
            right: -20%;
            width: 100%;
            animation: bag-item-random-translate1 3s infinite linear;
        }

section.bag .demo-items img:nth-child(2) {
            position: absolute;
            top: 25%;
            left: -3%;
            width: 80%;
            animation: bag-item-random-translate2 3s infinite linear;
        }

section.bag .demo-items img:nth-child(3) {
            position: absolute;
            bottom: -40%;
            right: -40%;
            width: 100%;
            animation: bag-item-random-translate3 3s infinite linear;
        }

section.bag .description {
        padding: 0 24px 28px;
    }

section.bag .description h1 {
            margin-top: 35px;
            font-family: PixeloidSans;
            font-weight: 700;
            font-size: 30px;
            line-height: 27px;
        }

section.bag .description p {
            margin-top: 20px;
        }

section.bag .description p span.no-wrap {
                text-wrap: nowrap;
            }

section.bag .description p b {
                font-weight: 700;
            }

section.bag .description button,
        section.bag .description a {
            width: 100%;
            padding: 15px;
            margin-top: 22px;
            font-family: PixeloidSans;
            font-weight: 700;
            font-size: 40px;
            line-height: 36px;
            text-align: center;
            color: black;
            background: white;
            border: 3px solid #ff91b4;
            box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25098);
        }

section.bag .description button {
            cursor: pointer;
        }

section.bag .description a {
            -webkit-text-decoration: none;
            text-decoration: none;
            display: block;
            margin-top: 8px;
        }

section.bag .description.final button,
            section.bag .description.final a {
                font-size: 20px;
                line-height: 18px;
            }

section.bag .inside-bag {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

section.bag .inside-bag img.border {
            z-index: 1;
            height: 100vh;
            -o-object-fit: cover;
               object-fit: cover;
            position: fixed;
            top: 0;
        }

section.bag .inside-bag img.border.left {
                left: 0;
            }

section.bag .inside-bag img.border.right {
                right: 0;
            }

section.bag .inside-bag img.bag-item {
            cursor: pointer;
            position: absolute;
            left: 0;
            top: 0;
            transform-origin: top left;
        }

section.bag ul.need-find {
        border: 3px solid #ffffff;
        padding: 15px 24px 20px;
        border-radius: 50px;
        background: #ff91b4;
        display: flex;
        justify-content: space-between;
        gap: 12px;
        z-index: 2;
        position: relative;
        width: 440px;
        max-width: 100%;
        margin: 5% auto 50px;
        flex-wrap: wrap;
    }

@media (max-width: 400px) {

section.bag ul.need-find {
            margin-top: 0;
            padding: 8px 16px;
    }
        }

section.bag ul.need-find li {
            display: flex;
            flex-direction: column;
            flex: 0;
        }

section.bag ul.need-find li span {
                font-family: PixeloidSans;
                font-weight: 400;
                font-size: 16px;
                line-height: 14.4px;
                text-align: center;
                color: #000000;
            }

section.bag ul.need-find img {
            display: block;
            padding: 5px;
            -o-object-fit: contain;
               object-fit: contain;
            width: 85px;
            height: 85px;
            border-radius: 50%;
            background: #ffffff;
            -webkit-user-select: none;
               -moz-user-select: none;
                    user-select: none;
            pointer-events: none;
        }

@keyframes bag-item-random-translate1 {
    0% {
        transform: translate(0, 0);
    }
    18% {
        transform: translate(-12px, -15px);
    }
    47% {
        transform: translate(-15px, 10px);
    }
    82% {
        transform: translate(11px, -5px);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes bag-item-random-translate2 {
    0% {
        transform: translate(0, 0);
    }
    20% {
        transform: translate(-10px, 12px);
    }
    35% {
        transform: translate(8px, -10px);
    }
    50% {
        transform: translate(12px, 14px);
    }
    65% {
        transform: translate(-10px, -8px);
    }
    80% {
        transform: translate(-7px, 15px);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes bag-item-random-translate3 {
    0% {
        transform: translate(0, 0);
    }
    22% {
        transform: translate(7px, -10px);
    }
    48% {
        transform: translate(-6px, -15px);
    }
    73% {
        transform: translate(10px, -15px);
    }
    100% {
        transform: translate(0, 0);
    }
}

section.landing {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

section.landing::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        z-index: -1;
        background: url(https://cdn-b.heybabes5years.ru/media/bg.a0d47bb984c83e405755.webp) repeat center
            center;
        background-size: cover;
    }

@media (min-width: 1000px) {

section.landing::before {
            background-size: contain;
    }
        }

section.landing img.logo {
        display: block;
        margin: 0 auto;
        padding: 0 16px;
        animation: up-down 1.5s infinite linear;
        width: 500px;
        max-width: 100%;
        -webkit-user-select: none;
           -moz-user-select: none;
                user-select: none;
        pointer-events: none;
    }

section.landing p {
        font-weight: 400;
        font-size: 15px;
        line-height: 18.5px;
        text-align: center;
        padding: 0 16px;
        max-width: 600px;
        margin: 0 auto 40px;
    }

@media (min-width: 1024px) {

section.landing p {
            font-size: 25px;
            line-height: 1.23em;
            text-align: center;
            max-width: 900px;
            margin: 0 auto 40px;
    }
        }

section.landing p b {
            font-weight: 700;
        }

section.landing .table {
        background: url(https://cdn-b.heybabes5years.ru/media/table.6c8a459d0cdf2fdbe153.webp) repeat-X
            center bottom;
        background-size: cover;
        background-position-y: 160px;
        margin-top: auto;
        overflow: hidden;
    }

@media (min-width: 470px) {

section.landing .table {
            background-position-y: 210px;
    }
        }

/* Little hack to not overflow background of pc */

@media (max-width: 768px) {

section.landing .table {
            padding-bottom: 10px;
    }
        }

section.landing .table .computer {
            position: relative;
            margin: 0 auto;
            width: 410px;
            max-width: 80%;
        }

section.landing .table .computer .pc {
                position: relative;
                z-index: 1;
            }

section.landing .table .computer .pc img {
                    display: block;
                    margin: 0 auto;
                    width: 100%;
                    -webkit-user-select: none;
                       -moz-user-select: none;
                            user-select: none;
                    pointer-events: none;
                }

section.landing .table .computer .pc img.background {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    z-index: 0;

                    width: 59%;
                    top: 1%;
                    right: 6%;
                }

section.landing .table .computer .pc img.screen {
                    /* To place it over background */
                    transform: translate3d(0, 0, 0);
                }

section.landing .table .computer button.start-game {
                width: 180px;
                position: absolute;
                z-index: 2;
                top: 22%;
                left: -7%;
                right: 0;
                padding: 12px 0;
                margin: 0 auto;

                border: 3px solid #ff91b4;
                border-radius: 25px;
                background: rgba(255, 255, 255, 0.8);
                color: #000000;

                font-family: "PixeloidSans";
                font-weight: 700;
                font-size: 24px;
                line-height: 21.6px;
                text-align: center;

                cursor: pointer;
            }

@media (max-width: 768px) {

section.landing .table .computer button.start-game {
                    width: 110px;
                    padding: 10px 0;
                    font-size: 16px;
            }
                }

section.landing .table .accessories img {
                display: block;
                position: absolute;
                -webkit-user-select: none;
                   -moz-user-select: none;
                        user-select: none;
                pointer-events: none;
            }

section.landing .table .accessories img.over-monitor {
                    z-index: 2;
                }

section.landing .table .accessories .bear {
                top: 19%;
                left: -27%;
                transform: rotate(-5deg);
            }

@media (max-width: 460px) {

section.landing .table .accessories .bear {
                    width: 160px;
                    top: 29%;
            }
                }

@media (max-width: 340px) {

section.landing .table .accessories .bear {
                    width: 120px;
            }
                }

section.landing .table .accessories .anua {
                top: 60%;
                left: 9%;
            }

@media (max-width: 768px) {

section.landing .table .accessories .anua {
                    top: 55%;
                    left: 26%;
            }
                }

@media (max-width: 460px) {

section.landing .table .accessories .anua {
                    width: 25px;
            }
                }

section.landing .table .accessories .braye {
                top: 0%;
                left: 9%;
            }

section.landing .table .accessories .fwee {
                top: 65%;
                left: 71%;
            }

section.landing .table .accessories .fwee2 {
                top: 66%;
                left: 97%;
            }

@media (max-width: 460px) {

section.landing .table .accessories .fwee2 {
                    top: 96%;
            }
                }

section.landing .table .accessories .huxley {
                top: 65%;
                left: 37%;
            }

section.landing .table .accessories .photo {
                top: 31%;
                left: 80%;
            }

section.landing .table .accessories .bag {
                top: 10%;
                left: -95%;
            }

@media (max-width: 460px) {

section.landing .table .accessories .bag {
                    width: 280px;
                    left: -80%;
            }
                }

@media (max-width: 340px) {

section.landing .table .accessories .bag {
                    left: -90%;
            }
                }

section.landing .table .accessories .tocobo {
                top: 58%;
                left: 57%;
            }

@media (max-width: 460px) {

section.landing .table .accessories .tocobo {
                    width: 20px;
            }
                }

section.landing .table .accessories .tickets {
                top: 50%;
                left: 110%;
            }

section.landing .table .accessories .spf {
                top: 50%;
                left: 140%;
            }

section.landing .table .accessories .rubberBand {
                top: 70%;
                left: 120%;
            }

section.landing .table .accessories .keypass {
                top: 56%;
                left: -40%;
            }

section.landing .table .accessories .gum {
                top: 65%;
                left: 80%;
            }

@media (max-width: 460px) {

section.landing .table .accessories .gum {
                    top: 98%;
                    left: 75%;
            }
                }

section.landing .table .accessories .fwee3 {
                top: 69%;
                left: -20%;
            }

@media (max-width: 460px) {

section.landing .table .accessories .fwee3 {
                    top: 110%;
            }
                }

section.landing .table .accessories .cube {
                transform: rotate(-25deg);
                top: 60%;
                left: -100%;
            }

section.landing .table .accessories .form {
                transform: perspective(10px) rotateX(1deg) rotateZ(6deg);
                top: 55%;
                left: 170%;
            }

section.landing .table .accessories .bubble {
                top: 55%;
                left: 140%;
            }

section.landing .table .accessories .headphones {
                transform: perspective(9px) rotateX(1deg) rotateZ(-20deg);
                top: 70%;
                left: -65%;
            }

section.landing .table .accessories .glasses {
                top: 85%;
                left: 160%;
            }

section.landing .table .accessories .glasses2 {
                top: 70%;
                left: -95%;
            }

section.landing .table p.legal {
            padding: 40px 24px;
            margin: 0 auto;

            font-family: PixeloidSans;
            font-weight: 700;
            font-size: 12px;
            line-height: 100%;
            text-align: center;

            color: #ffffff;
        }

section.landing .table p.legal .rules {
                display: block;
                margin-top: 16px;
                font-family: PixeloidSans;
                font-weight: 400;
                font-size: 12px;
                line-height: 100%;
                letter-spacing: 0%;
                text-align: center;
                color: #ffb1de;
            }

/* Small hack to not pass it as a variable. */
.app.loading button.start-game {
        display: none;
    }

@keyframes up-down {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    box-sizing: border-box;
    line-height: 1.3em;
}

input {
	box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

@font-face {
    font-family: 'PixeloidSans';
    font-weight: 400;
    src: url(https://cdn-b.heybabes5years.ru/fonts/PixeloidSans.2d030fcbfbc2e819a256.ttf) format('truetype');
}

@font-face {
    font-family: 'PixeloidSans';
    font-weight: 700;
    src: url(https://cdn-b.heybabes5years.ru/fonts/PixeloidSans-Bold.63800a85c37751a7444b.ttf) format('truetype');
}

@font-face {
    font-family: 'Manrope';
    font-weight: 700;
    src: url(https://cdn-b.heybabes5years.ru/fonts/Manrope-Bold.47f6d7143da9d8c0e480.ttf) format('truetype');
}

@font-face {
    font-family: 'Manrope';
    font-weight: 400;
    src: url(https://cdn-b.heybabes5years.ru/fonts/Manrope-Regular.a9b9e09fe6b69741f316.ttf) format('truetype');
}

html {
    background: #fff;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "PixeloidSans";
}

button {
    font-family: PixeloidSans;
}

/* To match our fonts */
b {
    font-weight: 700;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.description {
    .gifts {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 16px;

        @media (max-width: 400px) {
            gap: 0px;
        }

        .gift {
            width: 80px;
            justify-self: center;
            position: relative;

            img.photo {
                width: 80px;
            }

            p {
                font-family: PixeloidSans;
                font-weight: 400;
                font-size: 14px;
                line-height: 90%;
                text-align: center;
                margin-top: 8px;
            }

            &.sold-out {
                img,
                p {
                    opacity: 0.5;
                }
            }

            span.sold-out {
                font-weight: 700;
                position: absolute;
                font-size: 22px;
                top: 10px;
                text-align: center;
            }
        }
    }
}

.shake {
    animation: shake 500ms linear;
}

@keyframes shake {
    8%,
    41% {
        transform: translateX(-10px);
    }

    25%,
    58% {
        transform: translateX(10px);
    }

    75% {
        transform: translateX(-5px);
    }

    92% {
        transform: translateX(5px);
    }

    0%,
    100% {
        transform: translateX(0);
    }
}


section.not-found {
    background: #3c3af0;
    padding: 32px 16px;
}
@media (min-width: 768px) {
    section.not-found {
        padding: 100px 50px;
}
    }
section.not-found p {
        font-family: PixeloidSans;
        font-weight: 400;
        font-size: 22px;
        line-height: 90%;
        letter-spacing: 0%;
        vertical-align: middle;
        color: #ffffff;
    }
section.not-found p a {
            color: #ffffff;
        }
@media (min-width: 768px) {
    section.not-found p {
            font-size: 40px;
    }
        }
section.not-found img.logo {
        width: 332px;
        margin-top: 75px;
        display: block;
    }
@media (min-width: 768px) {
    section.not-found img.logo {
            width: 800px;
    }
        }
section.not-found img.fufajka {
        width: 226px;
        margin-top: 75px;
        display: block;
    }
@media (min-width: 768px) {
    section.not-found img.fufajka {
            width: 400px;
    }
        }

.app {
    animation: fade-in 1s steps(5, end);

    width: 100%;
}
.app .white-bg {
        position: fixed;
        display: block;
        background: #fff;
        width: 100%;
        height: 100%;
        z-index: 1000000;
    }