body,
html {
    max-width: 100vw;
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    letter-spacing: -.04em
}

body,
h1,
html {
    text-transform: uppercase
}

h1 {
    font-family: Antonio, sans-serif;
    font-weight: 700 !important;
    font-size: 60px !important;
    line-height: 58px !important;
    -webkit-text-stroke: 2px #000
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0
}

a {
    color: inherit;
    text-decoration: none
}

button {
    background-color: transparent;
    border: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    font-size: 30px !important
}

body,
button {
    font-family: Antonio, sans-serif
}

body {
    color: var(--foreground);
    background: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

body main {
    position: relative;
    height: calc(100vh - 130px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: min-height .3s ease-in-out;
    justify-content: center;
    background: #fc0
}

@supports(height: 100svh) {
    body main {
        height: calc(100svh - 130px);
        min-height: calc(100svh - 130px)
    }

    @media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
        body main {
            height: calc(100svh - 100px)
        }
    }

    @media(max-height: 630px)and (orientation:portrait) {
        body main {
            height: calc(100svh - 50px)
        }
    }
}

@media screen and (orientation: landscape)and (max-height:600px) {
    body main:after {
        content: "Please rotate your device";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fc0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-size: 50px;
        z-index: 6
    }

    @supports(height: 100svh) {
        body main:after {
            height: 100svh
        }
    }

    body main.desktop:after {
        content: "Please view in full screen"
    }
}

body main.fade-out-intro {
    min-height: 100vh
}

@supports(height: 100svh) {
    body main.fade-out-intro {
        min-height: 100svh
    }
}

body main .top-wrapper {
    flex-direction: column;
    flex-grow: 1;
    padding: 40px 20px 0;
    text-align: center
}

body main .top-wrapper,
body main .top-wrapper button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    z-index: 3;
}

body main .top-wrapper button {
    width: 100%;
    line-height: 1em;
    font-weight: 500;
    padding: 10px;
    text-transform: none;
    border: 5px solid transparent;
    border-image-source: url(/border.svg);
    border-image-slice: 32.1% 34.3%;
    border-image-repeat: stretch;
    background-color: #000;
    color: #fff
}

body main .top-wrapper button img {
    margin-left: 10px;
    max-height: 30px
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    body main .top-wrapper button {
        border-width: 3px
    }
}

@media(hover: hover) {
    body main .top-wrapper button:hover {
        background-color: #fff;
        color: #000
    }

    body main .top-wrapper button.black-bg:hover img {
        filter: invert(100%)
    }
}

body main .top-wrapper button.share-button,
body main .top-wrapper button.try-again {
    color: #000;
    border-image: none;
    background-color: transparent;
    width: unset;
    margin: 0 auto;
    padding: 0 0 10px;
    position: relative
}

@media(hover: hover) {

    body main .top-wrapper button.share-button:hover,
    body main .top-wrapper button.try-again:hover {
        background-color: transparent;
        color: #000
    }

    body main .top-wrapper button.share-button:hover:after,
    body main .top-wrapper button.try-again:hover:after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        border-bottom: 4px solid #000;
        margin-top: 5px
    }
}

body main .top-wrapper button.share-button.open:after,
body main .top-wrapper button.try-again.open:after {
    content: none
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {

    body main .top-wrapper button.share-button,
    body main .top-wrapper button.try-again {
        font-size: 22px;
        line-height: 25px;
        padding: 0
    }

    body main .top-wrapper button.share-button img,
    body main .top-wrapper button.try-again img {
        width: 24px;
        height: auto
    }
}

body main .top-wrapper button.next-steps {
    width: unset;
    margin-top: 40px;
    padding: 10px 40px 10px 10px;
    background-image: url(/_next/static/media/carat-right.222d719c.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 10px)
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    body main .top-wrapper button.next-steps {
        font-size: 20px !important;
        background-size: 10px;
        padding: 9px 30px 9px 10px
    }
}

@media(hover: hover) {
    body main .top-wrapper button.next-steps:hover {
        background-image: url(/_next/static/media/carat-right-hover.34a7f5f1.svg)
    }
}

body main .top-wrapper .intro-text {
    transition: .5s ease-in;
    z-index: 1
}

body main .top-wrapper .intro-text.fade-out-intro {
    opacity: 0
}

body main .top-wrapper .intro-text.fade-in-game {
    opacity: 1
}

body main .top-wrapper .intro-text h1 {
    font-size: 80px !important;
    font-weight: 700;
    line-height: 1em !important;
    letter-spacing: -.03em;
    text-align: center
}

body main .top-wrapper .intro-text h1 br.mobile-only {
    display: none
}

@media screen and (max-width: 660px) {
    body main .top-wrapper .intro-text h1 {
        font-size: 53px !important
    }

    body main .top-wrapper .intro-text h1 br.mobile-only {
        display: block
    }
}

@media screen and (max-width: 370px) {
    body main .top-wrapper .intro-text h1 {
        font-size: 49px !important
    }
}

@media(max-height: 630px)and (orientation:portrait) {
    body main .top-wrapper .intro-text h1 {
        font-size: 44px !important
    }
}

body main .top-wrapper .intro-text h1 mark {
    z-index: -1;
    position: relative;
    background-color: #fff;
    padding: 8px
}

body main .top-wrapper .intro-text h1 mark span {
    position: relative
}

body main .top-wrapper .intro-text h2.sub-heading {
    font-size: 33px;
    font-weight: 500;
    line-height: 40px;
    margin-top: 35px;
    text-align: center
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    body main .top-wrapper .intro-text h2.sub-heading {
        font-size: 25px;
        line-height: 30px
    }
}

body main .top-wrapper .score-results {
    font-size: 44px;
    font-weight: 700;
    -webkit-text-stroke: 1px #000;
    margin-bottom: 20px
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    body main .top-wrapper .score-results {
        font-size: 36px
    }
}

body main .top-wrapper .score-results mark {
    background-color: #fff;
    position: relative;
    padding: 10px
}

body main .top-wrapper .score-results mark span {
    position: relative
}

body main .top-wrapper .great-work {
    font-size: 44px;
    font-weight: 700;
    -webkit-text-stroke: 1px #000;
    margin-bottom: 20px;
    margin-top: -15px;
    z-index: 2
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    body main .top-wrapper .great-work {
        font-size: 36px
    }

    body main .top-wrapper .end-screen-message {
        font-size: 28px;
        line-height: 30px
    }
}

body main .top-wrapper .end-screen-message.all-correct {
    line-height: 1.3em;
    text-wrap: balance
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    body main .top-wrapper .end-screen-message.all-correct {
        font-size: 22px;
        line-height: 24px
    }
}

body main .top-wrapper .share-wrapper {
    position: relative;
    display: flex;
    justify-content: center
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    body main .top-wrapper .share-wrapper {
        padding-bottom: 5px
    }
}

body main .top-wrapper .share-wrapper .share-panel {
    display: flex;
    position: absolute;
    width: 256px;
    height: 32px;
    border: 2px solid transparent;
    border-image-source: url(/border.svg);
    border-image-slice: 33% 37%;
    border-image-repeat: stretch;
    z-index: 2;
    background-color: #000;
    bottom: -20px
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    body main .top-wrapper .share-wrapper .share-panel {
        bottom: -20px;
        width: 173px;
        height: 25px
    }
}

body main .top-wrapper .share-wrapper .share-panel a,
body main .top-wrapper .share-wrapper .share-panel button {
    padding: 0;
    line-height: 0;
    border: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

body main .top-wrapper .share-wrapper .share-panel a:hover,
body main .top-wrapper .share-wrapper .share-panel button:hover {
    background-color: #000
}

body main .top-wrapper .share-wrapper .share-panel a:after,
body main .top-wrapper .share-wrapper .share-panel button:after {
    content: "";
    border-right: 1px solid #fefefe;
    height: 100%
}

body main .top-wrapper .share-wrapper .share-panel a:last-child:after,
body main .top-wrapper .share-wrapper .share-panel button:last-child:after {
    border-right: none
}

body main .top-wrapper .share-wrapper .share-panel a.insta img,
body main .top-wrapper .share-wrapper .share-panel button.insta img {
    height: 19px;
    width: 18px
}

body main .top-wrapper .share-wrapper .share-panel a img,
body main .top-wrapper .share-wrapper .share-panel button img {
    margin-left: 0
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {

    body main .top-wrapper .share-wrapper .share-panel a img,
    body main .top-wrapper .share-wrapper .share-panel button img {
        height: 15px !important
    }
}

body main .top-wrapper .share-wrapper .link-copied {
    text-align: center;
    position: absolute;
    right: 25px;
    bottom: -50px;
    font-size: 19px;
    animation: fadeOut 1.5s 1;
    animation-delay: 1.5s
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    body main .top-wrapper .share-wrapper .link-copied {
        right: unset;
        bottom: -50px
    }
}

@keyframes fadeOut {
    to {
        opacity: 0
    }
}

body main .top-wrapper .knowing-facts {
    max-width: 700px;
    font-size: 30px;
    line-height: 38px;
    font-weight: 600;
    text-wrap: balance
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    body main .top-wrapper .knowing-facts {
        font-size: 25px;
        line-height: 26px;
        max-width: 600px
    }
}

body main .game-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: .5s ease-in;
    position: relative;
    z-index: 1;
}

body main .game-wrapper.fade-out-intro {
    transform: translateY(400px)
}

body main .game-wrapper.fade-in-game {
    transform: translateY(0);
    /* margin-top: 75px */
    margin-top: 20px;
}

body main .game-wrapper.fade-in-game .character {
    position: absolute;
    left: calc(30vw - 65px);
    top: 90px;
    z-index: 2;
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    body main .game-wrapper.fade-in-game .character {
        left: calc(20vw - 65px)
    }
}

body main .game-wrapper .start-button {
    font-size: 33px !important;
    font-weight: 500;
    line-height: 40px;
    color: #000;
    text-align: center;
    margin-top: 40px;
    padding: 16px 40px 28px;
    background-image: url(/start-now-button.svg);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    transition: transform .3s ease-out, opacity .5s ease-in, scale .3s ease-out;
    transform-origin: bottom;
    animation: idleBop 2s infinite;
    animation-timing-function: steps(4);
    width: 209px;
    height: 84px
}

@media(max-height: 630px)and (orientation:portrait) {
    body main .game-wrapper .start-button {
        width: 170px;
        height: 85px;
        font-size: 23px !important
    }
}

body main .game-wrapper .start-button:hover {
    background-position: 100% 50%;
    color: #fff;
    scale: 1.1
}

body main .game-wrapper .start-button.fade-out-intro {
    opacity: 0
}

body main .game-wrapper .floor-intro {
    width: 100vw;
    height: 80px;
    position: relative;
    background-image: url(/_next/static/media/road.svg);
    background-repeat: repeat-x;
    background-size: 500px;
    background-position: 50% 0
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    body main .game-wrapper .floor-intro {
        height: 50px
    }
}

body main .game-wrapper .floor-intro .intro-weeds {
    position: absolute;
    width: 100vw;
    height: 29px;
    top: -29px;
    left: 10px;
    background-image: url(/intro-weeds.svg);
    background-repeat: repeat-x;
    background-size: 500px;
    background-position: calc(50% - 130px) 0
}

body main .game-wrapper .floor-game {
    width: 100vw;
    height: 200px;
    position: relative;
    background-repeat: repeat-x;
    background-size: 500px;
    background-position: 50% 0;
    display: flex
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    body main .game-wrapper .floor-game {
        height: 130px
    }
}

@media(max-height: 630px)and (orientation:portrait) {
    body main .game-wrapper .floor-game {
        height: 80px
    }
}

body main .game-wrapper .floor-game .ground-left,
body main .game-wrapper .floor-game .ground-right {
    width: 35%;
    height: 100%;
    background-image: url(/_next/static/media/road.svg);
    background-color: #fc0;
    background-repeat: repeat-x;
    background-size: 498px;
    position: relative
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {

    body main .game-wrapper .floor-game .ground-left,
    body main .game-wrapper .floor-game .ground-right {
        width: 30%
    }
}

body main .game-wrapper .floor-game .ground-left .intro-weeds,
body main .game-wrapper .floor-game .ground-right .intro-weeds {
    position: absolute;
    width: 100%;
    height: 29px;
    top: -29px;
    background-image: url(/intro-weeds.svg);
    background-repeat: repeat-x;
    background-size: 500px;
    background-position: calc(50% - 130px) 0;
    z-index: -1
}

body main .game-wrapper .floor-game .ground-left .ground-bricks,
body main .game-wrapper .floor-game .ground-right .ground-bricks {
    background-image: url(/ground-bricks.svg);
    height: 100%;
    margin-top: 20px;
    background-size: 230px
}

body main .game-wrapper .floor-game .ground-left {
    border-right: 4px solid #000;
    background-position-x: right
}

body main .game-wrapper .floor-game .ground-left .intro-weeds {
    background-position-x: 100%;
    right: 8vw
}

body main .game-wrapper .floor-game .ground-left .ground-bricks {
    background-position-x: calc(100% - 20px)
}

body main .game-wrapper .floor-game .ground-right {
    border-left: 4px solid #000;
    background-position-x: -60px
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    body main .game-wrapper .floor-game .ground-right {
        background-position-x: -15%
    }
}

body main .game-wrapper .floor-game .ground-right .intro-weeds {
    background-position-x: 50px
}

body main .game-wrapper .floor-game .ground-right .ground-bricks {
    background-position-x: -10px
}

body main .game-wrapper .floor-game .chasm {
    width: 30%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0 5px;
    grid-gap: 5px;
    gap: 5px;
    animation: chasmFall 1.5s both;
    animation-timing-function: cubic-bezier(.935, 0, 1, 1);
    animation-delay: 2s
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    body main .game-wrapper .floor-game .chasm {
        width: 40%
    }
}

body main .game-wrapper .floor-game .chasm .chasm-left,
body main .game-wrapper .floor-game .chasm .chasm-right {
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-gap: 5px;
    gap: 5px;
    transition: transform .5s ease-in-out
}

body main .game-wrapper .floor-game .chasm .block {
    width: 100%;
    height: 100%;
    border-image-source: url(/border.svg);
    border-image-slice: 34% 37%;
    border-image-repeat: stretch;
    border-image-width: 3px;
    padding: 5px
}

body main .game-wrapper .floor-game .chasm .block .block-inner {
    background-image: url(/block-tile.svg);
    background-size: 13px;
    background-position: 50%;
    width: 100%;
    height: 100%
}

@keyframes chasmFall {
    0% {
        transform: translateX(0) translateY(0)
    }

    8% {
        transform: translateX(10px) translateY(0)
    }

    11% {
        transform: translateX(-7px) translateY(0)
    }

    15% {
        transform: translateX(5px) translateY(2%)
    }

    20% {
        transform: translateX(0) translateY(4%)
    }

    to {
        transform: translateY(100%)
    }
}

body main .disclaimers-wrapper {
    position: absolute;
    font-family: Arial, Helvetica, sans-serif;
    bottom: 9px;
    left: 8px;
    right: 8px;
    text-transform: none;
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;
    text-wrap: balance;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    body main .disclaimers-wrapper {
        bottom: 5px
    }
}

body main .disclaimers-wrapper .privacy {
    white-space: nowrap;
    text-decoration: underline
}

body noscript {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 2em;
    background: hsla(0, 0%, 100%, .95);
    z-index: 1;
    padding: 2em;
    flex-direction: column;
    line-height: 1.5em
}

@font-face {
    font-family: Antonio;
    src: url(/_next/static/media/antonio-regular-webfont.700ce096.woff2) format("woff2"), url(/_next/static/media/antonio-regular-webfont.4bbe987a.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    ascent-override: 90%;
    descent-override: 5%
}

@font-face {
    font-family: Antonio;
    src: url(/_next/static/media/antonio-bold-webfont.3dbaccb0.woff2) format("woff2"), url(/_next/static/media/antonio-bold-webfont.0512165c.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    ascent-override: 90%;
    descent-override: 5%;
    z-index: 2;
}

body main .game-wrapper .floor-intro,
body main .game-wrapper .floor-intro .intro-weeds {
    background: unset;
}

/* body main {
    background-image: url(/_next/static/media/bg.svg);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    height: calc(100svh - 0px);
    min-height: calc(100svh - 0);
    background-color: #797b7c;
} */

body main {
    background-image: url(/_next/static/media/bg.svg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    height: 100vh;
    min-height: calc(100svh - 0);
    background-color: #9aaeba;
}

footer {
    display: none;
}

/* body main.fade-out-intro{
        background-image: unset;
    } */
.truck_icon {
    position: absolute;
    right: 1%;
    bottom: 12%;
    z-index: 2;
}

.truck_img {
    width: 350px;
    height: auto;
}

body main .game-wrapper .floor-game {
    height: 305px;
}

body main .game-wrapper .floor-game .ground-left,
body main .game-wrapper .floor-game .ground-right,
body main .game-wrapper .floor-game .ground-left .intro-weeds,
body main .game-wrapper .floor-game .ground-right .intro-weeds,
body main .game-wrapper .floor-game .ground-left .ground-bricks,
body main .game-wrapper .floor-game .ground-right .ground-bricks {
    background: unset;
    border: 0;
}

.game-wrapper.fade-out-intro .truck_icon {
    bottom: 35%;
}

.game-wrapper.fade-out-intro .floor-game:after {
    content: '';
    position: absolute;
    /* background: #ffffff; */
    background-image: url(/_next/static/media/creck.png);
    width: 30%;
    background-size: 78%;
    background-repeat: no-repeat;
    background-position: center;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

body main .game-wrapper .floor-game .chasm .block .block-inner {
    background-image: unset;
    background-color: #9aaeba;
    background-size: 235%;
    background-position: bottom;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

body main .game-wrapper .floor-game .chasm .block {
    border: 0;
    padding: 0;
}

body main .game-wrapper .floor-game .chasm {
    z-index: 1;
    gap: 0;
}

body main .game-wrapper .floor-game .chasm .chasm-left,
body main .game-wrapper .floor-game .chasm .chasm-right {
    gap: 0;
}

body main .game-wrapper.fade-in-game .character {
    /* left: calc(30vw - 204px); */
    left: calc(30vw - 24%);
}

.intro-text img {
    width: 230px;
    height: auto;
    margin-top: 30px;
}

body main .top-wrapper .intro-text h1 {
    font-size: 55px !important;
}

body main .top-wrapper .intro-text h2.sub-heading {
    font-size: 20px;
}

.character,
.character * {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.character.pop-in {
    animation: characterPopIn 1s both !important;
    animation-delay: .2s
}

@keyframes characterPopIn {
    0% {
        transform: translateY(100px) rotate(-180deg)
    }

    70% {
        transform: translateY(-20px) rotate(0)
    }

    to {
        transform: translateY(0)
    }
}

.character.still {
    animation: none !important
}

.character.jump {
    animation: jump 1s 3 !important
}

@keyframes jump {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }

    to {
        transform: translateY(0)
    }
}

.character.flip .character-body-wrapper {
    animation: flip 1s 3 !important;
    animation-timing-function: step-end !important
}

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

    50% {
        transform: rotateY(-180deg)
    }

    to {
        transform: rotateY(0deg)
    }
}

.character.fall {
    animation: fall .8s linear both !important;
    transform: translateX(calc(10vw + 15px))
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .character.fall {
        transform: translateX(calc(15vw + 15px));
        animation: fall-mobile .8s linear both !important
    }
}

@keyframes fall {
    0% {
        transform: translateX(calc(5vw + 15px)) rotate(10deg)
    }

    20% {
        transform: translateX(calc(5vw + 60px)) translateY(20px) rotate(36deg)
    }

    40% {
        transform: translateX(calc(5vw + 75px)) translateY(40px) rotate(72deg)
    }

    to {
        transform: translateX(calc(5vw + 90px)) translateY(200px) rotate(180deg)
    }
}

@keyframes fall-mobile {
    0% {
        transform: translateX(calc(15vw + 15px)) rotate(10deg)
    }

    20% {
        transform: translateX(calc(15vw + 50px)) translateY(20px) rotate(36deg)
    }

    40% {
        transform: translateX(calc(15vw + 60px)) translateY(40px) rotate(72deg)
    }

    to {
        transform: translateX(calc(10vw + 70px)) translateY(130px) rotate(180deg)
    }
}

.character.walk-to-edge {
    animation: walkToEdge 1s linear both !important
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .character.walk-to-edge {
        animation: walkToEdgeMobile 1s linear both !important
    }
}

@keyframes walkToEdge {
    to {
        transform: translateX(calc(5vw + 15px))
    }
}

@keyframes walkToEdgeMobile {
    to {
        transform: translateX(calc(10vw + 15px))
    }
}

.character.walk-first-block {
    animation: walkFirstBlock 2s linear both !important
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .character.walk-first-block {
        animation: walkFirstBlockMobile 2s linear both !important
    }
}

@keyframes walkFirstBlock {
    to {
        transform: translateX(calc(20vw + 15px))
    }
}

@keyframes walkFirstBlockMobile {
    to {
        transform: translateX(calc(30vw + 15px))
    }
}

.character.walk-across {
    animation: walkAcross 3s linear both !important
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .character.walk-across {
        animation: walkAcrossMobile 3s linear both !important
    }
}

@keyframes walkAcross {
    to {
        transform: translateX(50vw)
    }
}

@keyframes walkAcrossMobile {
    to {
        transform: translateX(65vw)
    }
}

.character .character-body-wrapper {
    height: 73px;
    width: 60px;
    position: relative;
    margin-bottom: -2px
}

.character .character-body-wrapper .upper-body {
    position: absolute;
    height: 100%;
    animation: idleBop 2s infinite;
    animation-timing-function: steps(4)
}

.character .character-body-wrapper .upper-body.peeking {
    left: 20px
}

.character .character-body-wrapper .upper-body .character-body {
    height: 100%;
    position: absolute;
    background-image: url(/_next/static/media/character-body.ef623ddf.svg);
    width: 60px;
    background-repeat: no-repeat;
    background-position-x: 0;
    background-size: cover
}

.character .character-body-wrapper .upper-body .character-body.walking {
    animation: bodyWalking .6s infinite;
    animation-timing-function: step-end
}

@keyframes bodyWalking {
    0% {
        background-position-x: 20%
    }

    50% {
        background-position-x: 40%
    }
}

.character .character-body-wrapper .upper-body .character-body.peeking {
    animation: bodyPeeking .6s infinite;
    animation-timing-function: step-end
}

@keyframes bodyPeeking {
    0% {
        background-position-x: 60%
    }

    50% {
        background-position-x: 80%
    }
}

.character .character-body-wrapper .upper-body .character-body.jumping {
    animation: bodyJumping 3s 1
}

@keyframes bodyJumping {
    0% {
        background-position-x: 100%
    }

    to {
        background-position-x: 100%
    }
}

.character .character-body-wrapper .upper-body .character-eyes {
    transform-origin: 50% 35%;
    animation: blink 4s infinite
}

@keyframes blink {
    0% {
        transform: scaleY(1)
    }

    90% {
        transform: scaleY(1)
    }

    95% {
        transform: scaleY(0)
    }

    to {
        transform: scaleY(1)
    }
}

.character .character-body-wrapper .character-eyes,
.character .character-body-wrapper .character-legs,
.character .character-body-wrapper .character-mouth-neutral {
    height: 100%;
    position: absolute;
    width: auto
}

.character .character-body-wrapper .character-legs {
    width: 60px;
    height: 73px;
    background-image: url(/_next/static/media/character-legs.08b2044e.svg);
    background-size: 400% 100%
}

.character .character-body-wrapper .character-legs.walking {
    animation: legsWalking .6s infinite;
    animation-timing-function: step-end
}

@keyframes legsWalking {
    0% {
        background-position: 66% 50%
    }

    50% {
        background-position: 100% 50%
    }
}

.character .character-body-wrapper .character-legs.peeking {
    left: 10px;
    background-position: 33% 50%
}

.character .heart {
    position: absolute;
    width: 31px;
    height: 29px;
    background-image: url(/_next/static/media/heart.82495492.svg);
    background-repeat: no-repeat;
    top: -10px;
    right: -40px;
    animation: rotateHeart 3s infinite forwards;
    animation-timing-function: steps(8)
}

.character .heart.broken {
    width: 34px;
    height: 36px;
    background-image: none;
    animation: none
}

.character .heart.broken:after,
.character .heart.broken:before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    animation-timing-function: steps(8) !important
}

.character .heart.broken .heart-sparks {
    background-image: url(/_next/static/media/broken-heart-sparks.6b4e77d6.svg);
    animation: none;
    background-size: 110% 100%;
    position: absolute;
    width: 100%;
    height: 100%;
    animation: brokenHeartSparks 3s infinite;
    background-size: 100% 100%;
    top: 7px
}

@keyframes brokenHeartSparks {
    0% {
        transform: scale(.2);
        opacity: 1
    }

    10% {
        transform: scale(.2)
    }

    60% {
        opacity: 1
    }

    to {
        transform: scale(1.2);
        opacity: 0
    }
}

@keyframes brokenHeartLeft {
    15% {
        transform: translateX(0) translateY(0) rotate(0);
        opacity: 1
    }

    80% {
        transform: translateX(-7px) translateY(10px) rotate(-30deg);
        opacity: 0
    }

    to {
        transform: translateX(-7px) translateY(10px) rotate(-30deg);
        opacity: 0
    }
}

@keyframes brokenHeartRight {
    15% {
        transform: translateX(0) translateY(0) rotate(0);
        opacity: 1
    }

    80% {
        transform: translateX(10px) translateY(10px) rotate(20deg);
        opacity: 0
    }

    to {
        transform: translateX(10px) translateY(10px) rotate(20deg);
        opacity: 0
    }
}

.character .heart.broken:before {
    background-image: url(/_next/static/media/broken-heart-left.966525fa.svg);
    animation: brokenHeartLeft 3s infinite
}

.character .heart.broken:after {
    background-image: url(/_next/static/media/broken-heart-right.f9ac0d1d.svg);
    animation: brokenHeartRight 3s infinite
}

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

    30% {
        transform: rotateY(0deg)
    }

    70% {
        transform: rotateY(180deg)
    }

    to {
        transform: rotateY(180deg)
    }
}

@keyframes idleBop {
    30% {
        transform: translateY(0)
    }

    70% {
        transform: translateY(5%)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

footer {
    background-color: #000;
    z-index: 2;
    position: relative;
    max-height: 100px;
    transition: max-height .3s ease-in-out, margin-top .3s ease-in-out;
    padding: 0;
    overflow: hidden;
    margin-top: 0
}

@media(max-height: 630px)and (orientation:portrait) {
    footer {
        max-height: 70px
    }
}

footer .footer-wrapper {
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    footer .footer-wrapper {
        padding: 15px
    }

    footer .footer-wrapper .pay-gap-logo {
        width: 60px
    }

    footer .footer-wrapper .wgea-logo {
        width: 140px
    }
}

@media(max-height: 630px)and (orientation:portrait) {
    footer .footer-wrapper {
        padding: 0 15px
    }

    footer .footer-wrapper .pay-gap-logo {
        width: 40px;
        height: 40px
    }

    footer .footer-wrapper .wgea-logo {
        width: 130px
    }
}

footer.fade-out-intro {
    max-height: 0
}

footer.end-screen {
    margin-top: -130px;
    max-height: unset;
    width: 100%
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    footer.end-screen {
        margin-top: -100px
    }
}

@media(max-height: 630px)and (orientation:portrait) {
    footer.end-screen {
        margin-top: -50px
    }
}

.questions-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transition: opacity .5s ease-out;
    width: 100%;
    text-align: center
}

.questions-wrapper.fade-in-game {
    animation: fadeIn .5s both;
    animation-delay: 4.5s
}

.questions-wrapper .question-number {
    font-size: 30px;
    line-height: 1em;
    margin-bottom: 20px;
    font-weight: 600
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .questions-wrapper .question-number {
        font-size: 23px;
        line-height: 30px
    }
}

.questions-wrapper .question-text {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    text-align: center;
    max-width: 660px;
    z-index: 1;
    -webkit-text-stroke: 1px #000
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .questions-wrapper .question-text {
        font-size: 40px;
        line-height: 45px
    }
}

.questions-wrapper .question-text.question-1 {
    max-width: 555px
}

.questions-wrapper .question-text.question-2 {
    max-width: 620px
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .questions-wrapper .question-text.question-4 {
        max-width: 555px;
        text-wrap: balance
    }
}

.questions-wrapper .question-text.question-6 {
    max-width: 700px
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .questions-wrapper .question-text.question-7 {
        max-width: 500px;
        text-wrap: balance
    }
}

.questions-wrapper .question-text.question-8 {
    max-width: 550px
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .questions-wrapper .question-text.question-8 {
        max-width: 400px
    }
}

.questions-wrapper .question-text mark {
    background-color: #fff;
    z-index: -1;
    position: relative;
    padding: 9px
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .questions-wrapper .question-text mark {
        padding: 7px
    }
}

.questions-wrapper .question-text mark span {
    position: relative
}

.questions-wrapper .answers-wrapper {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 20px;
    gap: 20px;
    width: 100%;
    max-width: 600px;
    margin-top: 50px
}

@media(max-width: 500px) {
    .questions-wrapper .answers-wrapper {
        gap: 10px
    }
}

.questions-wrapper .answers-wrapper.disabled {
    pointer-events: none
}

.questions-wrapper .answers-wrapper button {
    position: relative
}

.questions-wrapper .answers-wrapper button:after {
    position: absolute;
    left: calc(50% - 13px);
    width: 40px;
    height: 40px;
    top: -30px;
    animation: scaleIn .3s;
    animation-timing-function: steps(4)
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .questions-wrapper .answers-wrapper button:after {
        width: 30px;
        height: 30px;
        top: -20px;
        background-size: contain
    }
}

@keyframes scaleIn {
    0% {
        transform: scale(0)
    }
}

.questions-wrapper .answers-wrapper button.correct {
    background-color: #fff;
    color: #000
}

.questions-wrapper .answers-wrapper button.correct:after {
    content: "";
    background-image: url(/_next/static/media/answer-correct-icon.ea4ee277.svg);
    z-index: 3
}

.questions-wrapper .answers-wrapper button.wrong {
    background-color: #fff;
    color: #000
}

.questions-wrapper .answers-wrapper button.wrong:after {
    content: "";
    background-image: url(/_next/static/media/answer-wrong-icon.00d00d8f.svg);
    z-index: 3
}

.questions-wrapper .answers-wrapper button:first-of-type:after {
    left: -20px
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .questions-wrapper .answers-wrapper button:first-of-type:after {
        left: -10px
    }
}

.questions-wrapper .answers-wrapper button:last-of-type:after {
    left: calc(100% - 20px)
}

.questions-wrapper .answer-outcome {
    background-color: #fff;
    padding: 0 10px;
    position: relative;
    font-size: 40px;
    line-height: 54px;
    font-weight: 700;
    -webkit-text-stroke: 1px #000
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .questions-wrapper .answer-outcome {
        font-size: 40px;
        line-height: 41px;
        padding: 5px 10px
    }
}

.questions-wrapper .answer-explanation {
    margin-top: 20px;
    font-size: 30px;
    line-height: 38px;
    max-width: 660px;
    font-weight: 600;
    text-wrap: balance;
    text-transform: none
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .questions-wrapper .answer-explanation {
        margin-top: 15px;
        font-size: 19px;
        line-height: 24px
    }
}

.questions-wrapper .answer-explanation.question-2 {
    max-width: 750px
}

.questions-wrapper .answer-explanation.question-4 {
    max-width: 700px
}

.questions-wrapper .next-question-wrapper {
    margin-top: 30px
}

.questions-wrapper .next-question-wrapper button {
    padding: 10px
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .questions-wrapper .next-question-wrapper button {
        padding: 9px
    }
}

.questions-wrapper .next-question-wrapper button.next-question {
    padding-right: 40px;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='28' viewBox='0 0 18 28' fill='none'%3E%3Cg id='Layer_1' clip-path='url(%23clip0_20024_13207)'%3E%3Cpath id='Vector' d='M11.1892 14L0 3.26667L3.40541 0L18 14L3.40541 28L0 24.7333L11.1892 14Z' fill='%23fff'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_20024_13207'%3E%3Crect width='18' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 10px)
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .questions-wrapper .next-question-wrapper button.next-question {
        font-size: 20px !important;
        background-size: 10px;
        padding-right: 30px
    }
}

@media(hover: hover) {
    .questions-wrapper .next-question-wrapper button.next-question:hover {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='28' viewBox='0 0 18 28' fill='none'%3E%3Cg id='Layer_1' clip-path='url(%23clip0_20024_13207)'%3E%3Cpath id='Vector' d='M11.1892 14L0 3.26667L3.40541 0L18 14L3.40541 28L0 24.7333L11.1892 14Z' fill='%23000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_20024_13207'%3E%3Crect width='18' height='28' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E")
    }
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .questions-wrapper .next-question-wrapper button.view-results {
        font-size: 20px !important;
        background-size: 10px
    }
}

.top-wrapper .answers-wrapper {
    display: grid;
    grid-auto-flow: column;
    grid-gap: 10px;
    gap: 10px;
    width: 100%;
    max-width: 600px;
    margin-top: 50px
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .top-wrapper .answers-wrapper {
        gap: 10px;
        margin-top: 20px
    }
}

.top-wrapper .answers-wrapper.end-screen {
    max-width: 700px
}

.top-wrapper .answers-wrapper.end-screen-after {
    grid-auto-flow: row
}

@media(max-width: 500px) {
    .top-wrapper .answers-wrapper.end-screen-after {
        margin-top: 20px;
        gap: 20px
    }
}

.top-wrapper .answers-wrapper .answers-row {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
    gap: 10px;
    margin: auto;
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .top-wrapper .answers-wrapper .answers-row {
        grid-template-columns: unset;
        padding: 0 30px;
        justify-items: center
    }

    .top-wrapper .answers-wrapper .answers-row.all-correct a {
        max-width: 260px
    }

    .top-wrapper .answers-wrapper .answers-row.some-wrong a {
        max-width: 200px
    }
}

.top-wrapper .answers-wrapper .answers-row a {
    width: 100%
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .top-wrapper .answers-wrapper .answers-row img {
        height: 20px
    }

    .top-wrapper .answers-wrapper .answers-row.no-bg-buttons {
        gap: 0
    }

    .top-wrapper .answers-wrapper .answers-row.no-bg-buttons img {
        height: 30px
    }
}

.top-wrapper .answers-wrapper.end-screen {
    grid-auto-flow: row
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .top-wrapper .answers-wrapper button {
        font-size: 20px !important;
        line-height: 25px;
        padding: 7px;
        border-width: 3px
    }
}

.progress-bar {
    width: 100%;
    max-width: 600px;
    margin: 40px 0 30px;
    padding: 2px;
    border: 4px solid transparent;
    border-image-source: url(/border.svg);
    border-image-slice: 32.1% 34.3%;
    border-image-repeat: stretch;
    background-color: #fc0;
    position: relative;
    /* top: 5vh */
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .progress-bar {
        top: none;
        width: calc(100% - 40px)
    }
}

.progress-bar .progress-bar-fill {
    height: 15px;
    background-color: #000;
    transition: .6s
}

.progress-bar.fade-in-game {
    animation: fadeIn .5s both;
    animation-delay: 4.5s
}

.volume-toggle {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: bottom .3s ease-in-out
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .volume-toggle {
        right: 10px;
        bottom: 10px
    }
}

.volume-toggle.end-screen {
    bottom: 140px
}

@media((min-aspect-ratio: 3/2) and (max-height:800px)), (max-width:767px) {
    .volume-toggle.end-screen {
        bottom: 110px;
        right: 10px
    }
}

.volume-toggle .volume-toggle-inner {
    background-image: url(/_next/static/media/volume-icon.03d86d9e.svg);
    background-size: 40px;
    background-repeat: no-repeat;
    background-position: 0;
    width: 20px;
    height: 20px;
    overflow: hidden
}

.volume-toggle .volume-toggle-inner.volume-off {
    background-position: 100%
}

.intro-text-img {
    width: 100%;
    margin: 0 0 50px;
    text-align: center;
}

/* .intro-text-img {
    position: absolute;
    left: 0;
    right: 0;
    width: 200px;
    margin: auto;
    top: 54%;
} */

.intro-text-img .pay-gap-logo {
    width: 200px;
}



.d-none {
    display: none;
}

@media(max-width:767px) {
    .truck_icon {
        bottom: 80%;
        z-index: 2;
        right: 0;
        width: 100%;
        text-align: center;
    }

    .truck_img {
        width: 230px;
    }
}

body main .game-wrapper .floor-game .chasm .chasm-left,
body main .game-wrapper .floor-game .chasm .chasm-right {
    grid-template-rows: 1fr 1fr !important;
}

.bg_img {
    background-image: url(/_next/static/media/truck.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28%;
    height: calc(100% - 50%);
    position: absolute;
    left: 30%;
    top: 65%;
    width: 100%;
    transition: left 1s;
}

.vichicle_wrap {
    position: fixed;
    width: 100%;
    height: calc(100% - 50%);
}

.fade-out-intro .vichicle_wrap {
    z-index: 2;
}

/* .vehicle_anim {
    animation: moveVehicle 5s linear forwards;
}

@keyframes moveVehicle {
    0% {
        left: 26%;
    }

    100% {
        left: -30%;
    }
}

.tire {
    width: 3vw;
    max-width: 60px;
    height: 3vw;
    max-height: 60px;
    background-image: url(https://assets.tractorjunction.com/truck-junction/animations/tyre.png);
    background-size: cover;
    position: absolute;
    top: 61%;
}

.tire_anim {
    animation: rotate 1s linear infinite;
}

.tire.front {
    left: 43%;
}

.tire.rear {
    left: 53.4%;
}

@keyframes rotate {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
} */