*{
    box-sizing: border-box;
    font-family: FC-Orbit, sans-serif;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    touch-action: none;
}

body{
    width: 100%;
    height: 100%;
    margin: 0;
    position: fixed;
    overflow: hidden;
    overflow-y: hidden;
    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    touch-action: none;
    background-color: black;
}

@font-face {
    font-family: FC-Orbit;
    src: url('./Fonts/FC_OrbitRounded.ttf');
    font-weight: bold;
}

.screen{
    position: absolute;
    margin: 0;
    left: 0;
    top: 1.5%;
    height: 100%;
    width: 100%;
    background-color: black;
    touch-action: manipulation;
    overflow: hidden;
}

.background{
    /* position: absolute; */
    margin: 0;
    left: 0;
    top: 0;
    touch-action: none;
}

.flex{
    display: flex;
    --count: 0;
    --dif: 40s;
    --speed: calc(-10000px * var(--count));
    /* animation: movebg 60s linear; */
    width: fit-content;
    transform: translateX(var(--speed));
    transition: var(--dif);
    transition-timing-function: linear;
    touch-action: none;
    overflow: hidden;
}

.level{
    margin: 0;
    left: 0;
    top: 0;
    display: flex;
    touch-action: none;
    /* grid-template-columns: calc(7164px / 2) repeat(2, calc(7557px / 2)); */
    height: 834.5px;
    /* width: calc(7164px *0.6); */
    /* transform: translateX(0%); */
    /* animation: movebg 10s linear; */
}

.po{
    position: absolute;
    height: 10px;
    width: 10px;
    /* background-color: red; */
}

.loop{
    display: flex;
    /* width: calc(7557px * var(--count)); */
    /* transform: translateX(0%); */
    /* animation: movebg2 20s linear infinite; */
}

#level_1{
    width: calc(7166px / 2);
    height: 100%;
    background-image: url("BG/update-05.png");
    background-color: rgb(255, 0, 0, 0);
    background-size: cover;
    background-repeat: no-repeat;
    margin-right: -1px;
    touch-action: none;
    overflow: hidden;
    /* transform: translateX(0px); */
    /* animation: movebg 10s linear; */
}

#level_2{
    width: calc(7500px / 2);
    height: 100%;
    background-image: url("BG/lastupdate-03.png");
    background-color: rgb(255, 0, 0, 0);
    margin-right: -2px;
    background-size: cover;
    background-repeat: repeat-x;
    touch-action: none;
    /* transform: translateX(calc(7164px / 2)); */
    /* animation: movebg2 20s linear infinite; */
}


.player{
    --poy: 70%;
    --op: 1;
    /* --cor: green; */
    position: absolute;
    top: var(--poy);
    left: 5%;
    width: 500px;
    height: 200px;
    transform: scale(0.6);
    background-color: var(--cor);
    transition: top 2s linear;
    opacity: var(--op);
    touch-action: none;
}

.show{
    position: absolute;
    font-size: 1.8rem;
    transition: 0.3s;
}

.show1{
    --s1: 0;
    --ps1: 200%;
    color: #fff;
    opacity: var(--s1);
    transform: translateY(var(--ps1));
}

.show2{
    --s2: 0;
    --ps2: 0%;
    color: #f70000;
    opacity: var(--s2);
    transform: translateY(var(--ps2));
}

.p_body{
    position: absolute;
    background-image: url("Body/body.png");
    width: 167px;
    height: 121px;
    left: 195px;
    top: 25px;
    touch-action: none;
}

.p_head{
    position: absolute;
    background-image: url("Body/head.png");
    width: 158px;
    height: 163px;
    left: 231px;
    top: -38px;
    touch-action: none;
}

.p_arm_up{
    position: absolute;
    background-image: url("Body/arm_up.png");
    width: 154px;
    height: 80px;
    left: 350px;
    top: 26px;
    touch-action: none;
}

.p_arm_down{
    position: absolute;
    background-image: url("Body/arm_down.png");
    width: 174px;
    height: 139px;
    left: 299px;
    top: 104px;
    touch-action: none;
}

.p_leg_up{
    position: absolute;
    background-image: url("Body/full_leg_up.png");
    width: 411px;
    height: 231px;
    left: -159px;
    top: -104px;
    touch-action: none;
}

.p_leg_down{
    position: absolute;
    background-image: url("Body/full_leg_down.png");
    width: 509px;
    height: 116px;
    left: -267px;
    top: 51px;
    touch-action: none;
}

.rock{
    position: absolute;
    left: 0;
    top: 0;
    background-size: contain;
    /* background-color: red; */
    touch-action: none;
}

.rock1{
    background-image: url("Obj/rock1.png");
    width: 1752px;
    height: 670px;
    touch-action: none;
}


.rock2{
    background-image: url("Obj/rock2.png");
    width: 1305px;
    height: 407px;
    touch-action: none;
}

.rock3{
    background-image: url("Obj/rock3.png");
    width: 346px;
    height: 433px;
    touch-action: none;
}

.rock4{
    background-image: url("Obj/rock4.png");
    width: 832px;
    height: 684px;
    touch-action: none;
}

.rock5{
    background-image: url("Obj/rock5.png");
    width: 299px;
    height: 487px;
    touch-action: none;
}

.coral{
    position: absolute;
    transform: scale(0.6);
    left: 0;
    bottom: 0;
    /* background-color: red; */
    touch-action: none;
}

.coral1{
    background-image: url("asset/coral1.png");
    width: 1234px;
    height: 543px;
    touch-action: none;
}

.coral2{
    background-image: url("asset/coral2.png");
    width: 577px;
    height: 861px;
    touch-action: none;
}

.coral3{
    background-image: url("asset/coral3.png");
    width: 1204px;
    height: 606px;
    touch-action: none;
}

.coral4{
    background-image: url("asset/coral4.png");
    width: 675px;
    height: 371px;
    touch-action: none;
}

.coral5{
    background-image: url("asset/coral5.png");
    width: 945px;
    height: 693px;
    touch-action: none;
}

.coral6{
    background-image: url("asset/coral6.png");
    width: 612px;
    height: 610px;
    touch-action: none;
}


@keyframes movebg{
    0% {transform: translateX(0%);}
    100% {transform: translateX(-100000px);}
}

@keyframes movebg2{
    0% {transform: translateX(0%);}
    100% {transform: translateX(-100%);}
}

/* ui menu  */

.menu {
    padding-top: 1rem;
    top: 0;
    width: 100%;
    position: absolute;
    left: calc(50% - 125px);
    display: flex;
    align-items: center;
    padding-top: 1rem;
    margin: 0 2rem;
    visibility: hidden;
    touch-action: none;
}

.menu h1{
    font-size: 3rem;
    margin: 0.5rem;
    color: white;
    touch-action: none;
}

.bar {
    display: grid;
    grid-template-columns: 200px 1fr;
    place-items: center;
    touch-action: none;
}

.timer .outer {
    height: 90px;
    width: 170px;
    background-image: url("../GameFindItem/asset/time.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
}

.bar .outer { 
    height: 70px;
    width: 280px;
    background-image: url("../GameFindItem/asset/score.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
}

#game_over .outer, #tutorial .outer{
    display: flex;
    height: 90px;
    width: 250px;
    border-radius: 3rem;
    background:  linear-gradient(90deg, rgba(222,161,62,255) 0%, rgba(249,211,146,255) 50%, rgba(222,161,62,255) 100%);
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    touch-action: none;
}

.inner{
    display: flex;
    flex-direction: column;
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    background: linear-gradient(to bottom, #68B9B1, #446DB0, #3F509F);
    border-radius: 2.5rem;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    touch-action: none;
}

.bar h2 {
    color: #3F509F;
    font-size: 2.5rem;
    text-align: center;
    margin-left: 2.5rem;
    touch-action: none;
}

.inlist h1 {
    font-size: 1.7rem;
    margin: 0rem 0.5rem 0.5rem 0.5rem;
    color: #3c8b9e;
    touch-action: none;
}

.inlist img {
    width: 40px;
    height: 40px;
    padding-top: 3px;
    transform: translateY(5px);
    touch-action: none;
}

#game_over, #tutorial {
    position: absolute;
    height: 600px;
    width: 850px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    visibility: hidden;
    touch-action: none;
}

#game_over {
    height: 530px;
    width: 640px;
    touch-action: none;
}

#tutorial {
    top: 45%;
    touch-action: none;
}

#game_over .outer, #tutorial .outer {
    height: 100%;
    width: 100%;
    touch-action: none;
}

#game_over .inner , #tutorial .inner {
    height: calc(100% - 20px);
    width: calc(100% - 20px);
    background: linear-gradient(90deg, rgba(93,201,248,255)0%, rgba(156,250,244,255) 51%, rgba(93,201,248,255)100%);
    border-bottom: 5px solid #7dd0d4;
    touch-action: none;
}

#tutorial .inner .wrapper {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    touch-action: none;
}

#game_over .wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 410px;
    width: 440px;
    border-radius: 2rem; 
    touch-action: none;
}

.boxitem {
    width: 100%;
    height: 100%;
    background-image: url(../GameFindItem/asset/final.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: start;
    touch-action: none;
}

#tutorial .wrapper h1{
    color: #262262;
    background-color: #fff;
    padding: 0.25rem 2rem;
    border-radius: 4rem;
    font-size: 3rem;
    touch-action: none;
}

.wrapper h2 {
    font-size: 2rem;
    margin: 0;
    touch-action: none;
}

#score {
    position: absolute;
    top: 93%;
    left: 50%;
    color: #262262;
    font-size: 2.7rem;
    padding: 0;
    margin: 1rem;
    background-color: transparent;
    touch-action: none;
}

.grade {
    width: 100%;
    height: 100%;
    touch-action: none;
}

.grade .pic {
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    visibility: hidden;
    touch-action: none;
}

.pic .char {
    height: 300px;
    width: 300px;
    background-position: center center;
    background-repeat: no-repeat;
    touch-action: none;
}

.pic h1, h2 {
    width: 150%;
    text-align: center;
    color: #262262;
    padding: 0;
    margin: 0;
    touch-action: none;
}

.pic h1 {
    font-size: 4.5rem;
    touch-action: none;
}

.pic h2 {
    font-size: 2.5rem;
    transform: translateY(-10px);
    touch-action: none;
}

#content1 .char{
    background-image: url("./SVG/char1.svg");
    touch-action: none;
}
#content2 .char{
    background-image: url("./SVG/char2.svg");
    touch-action: none;
}
#content3 .char{
    background-image: url("./SVG/char3.svg");
    touch-action: none;
}

.guide {
    padding: 0rem 2rem;
    touch-action: none;
}

.guide .inlist{
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
    touch-action: none;
}

.guide .inlist span {
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
}

.button {
    display: flex;
    justify-content: space-around;
    margin-top: 1.5rem;
    touch-action: none;
}


button{
    width: fit-content;
    background: none;
    /* padding: .75rem 2rem; */
    /* border-radius: 60px; */
    align-items: center;
    border: none;
    cursor: pointer;
    z-index: 10;
    touch-action: none;
}

.outterbutton{
    position: relative;
    width: fit-content;
    background: linear-gradient(90deg, rgba(222,161,62,255) 0%, rgba(249,211,146,255) 50%, rgba(222,161,62,255) 100%);
    padding: .4rem .4rem;
    border-radius: 60px;
    align-items: center;
    cursor: pointer;
    z-index: 10;
    touch-action: none;
}

.innerbutton{
    width: fit-content;
    background: linear-gradient(90deg, rgba(93,201,248,255)0%, rgba(156,250,244,255) 51%, rgba(93,201,248,255)100%);
    padding: .65rem 1.8rem;
    border-radius: 60px;
    align-items: center;
    border-bottom: 5px solid #7dd0d4;
    cursor: pointer;
    z-index: 10;
    touch-action: none;
}

a {
    color: #3c8b9e;
    touch-action: none;
}

.innerbutton::after{
    content: "";
    left: 30%;
    top: 13%;
    width: 40%; 
    height: 4px;
    position: absolute; 
    background-color: white;
    border-radius: 100%;
    touch-action: none;
}

#tutorial .inner::after, #game_over .inner::after{
    content: "";
    left: 20%;
    top: 2.5%;
    width: 60%; 
    height: 6px;
    position: absolute; 
    background-color: white;
    border-radius: 100%;
    touch-action: none;
}

.star1{
    position: absolute;
    bottom: -6%;
    left: -1%;
    scale: 0.8;
    touch-action: none;
}
.star2{
    position: absolute;
    top: -7%;
    right: -3%;
    scale: 0.9;
    rotate: 45deg;
    touch-action: none;
}

h4{
    z-index: 100;
    font-size: 1.8rem; 
    line-height: 130%;
    margin: 0;
    touch-action: none;
}