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

}
@font-face {
    font-family: FC-Orbit;
    src: url('../../GameFindItem/asset/font/FC_OrbitRounded.ttf');
    font-weight: bold;
}
html {
    scroll-behavior: smooth;
  }
body{
    position: absolute;
    overflow: hidden;
    width: 100%;

    --greenH1: #336666;
    --lightGreenH1: #339693;
    --greenH4: #4CA6C1;

    -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
    -webkit-tap-highlight-color: transparent;
}
.container{
    width: 100%;
    max-width: 1194px;
    height: 834px;
    margin: auto;

    overflow: hidden;

    background-position: center;
    background-size: cover;
    overflow-x: hidden;
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.container.five{
    height: max-content;
}

h1{font-size: 5.5rem; line-height: 130%;}
h2{font-size: 2.5rem; line-height: 130%;}
h3{font-size: 1.7rem; line-height: 130%;}
h4{font-size: 1.5rem; line-height: 130%;}

.content{
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: flex;
    /* แนวตั้ง */
    justify-content: center;
    /* deafualt ชิดซ้าย */
    align-items: start;
    flex-direction: column;
    z-index: 2;
}

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

button:active{
    background: 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;
    transition: all .5s;
}

.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;
    transition: all .5s;
    color: #3c8b9e;
}

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

.innerbutton > h4{
    color: #3c8b9e;
}

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

.center{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.scene2front{
    width: 100%;
    height: 100%;
    background-image: url('../asset/scene2_front.png');
}
.grain{
    width: 100%;
    height: 100%;
    opacity: .7;
    background-image: url('../asset/grain.png');
}
.scene3mid{
    width: 100%;
    height: 100%;
    background-image: url('../asset/scene3_mid.png');
}
.scene3front{
    width: 100%;
    height: 100%;
    background-image: url('../asset/scene3_front.png');
}
.scene3back{
    width: 100%;
    height: 100%;
    background-image: url('../asset/scene3_back.png');
}




/* ของเจมี่เจม */
.scene-6{
    background-image: url('../content3_Jaimes/1x/Artboard 6.png');
    width: 100%;
    height: 100%;
    position: relative;
}

.scene-7{
    background-image: url('../content3_Jaimes/1x/Artboard 2.png');
    width: 100%;
    height: 100%;
    position: relative;
}

.scene-8{
    background-image: url('../content3_Jaimes/1x/Artboard 1.png');
    width: 100%;
    height: 100%;
    position: relative;
}

.item{
    position: absolute;
    width: 100%;
    
}

.front_dirty{
    bottom: 0px;
    transition: .5s;
}

.sand{
    bottom: -150px;
    transition: 3s;
}

.back_kelp_1{
    width: 15%;
    bottom: -150px;
    left: 250px;
    transition: 6s;
}

.back_kelp_2{
    width: 15%;
    bottom: -100px;
    left: 450px;
    transition: 5.5s;
}

.back_kelp_3{
    width: 15%;
    bottom: -100px;
    right: 100px;
    transition: 6s;
}

.back_coral_1{
    width: 20%;
    bottom: 120px;
    right: -350px;
    transition: 5s;
}

.back_coral_2{
    width: 15%;
    bottom: -100px;
    right: 170px;
    transition: 5s;
}

.back_coral_3{
    width: 20%;
    bottom: -425px;
    left: 0px;
    transition: 4s;
}

.back_fish_1{
    width: 25%;
    opacity: 0.2;
    top: 120px;
    left: 120px;

}

.back_fish_2{
    width: 25%;
    opacity: 0.2;
    top: 100px;
    right: 200px;

}

.front{
    left: 0;
    bottom: 0;
    position: absolute;
}

.tube{
    bottom: 50px;
    right: 0;
    width: 15%;
}


.rightleg{
    top: 200px;
    width: 50%;
}
.body{
    top: 320px;
    left: 450px;
    width: 25%;
}

.handright{
    top: 400px;
    left: 550px;
    width: 25%;
}

.handleft{
    top: -50px;
}
.namha{
    left: 610px;
    top: 335px;
    width: 15%; 
}
.hair{
    left: 555px;
    top: 300px;
    width: 15%; 
}

.boulder{
    right: 0;
    bottom: -300px;
    transition: 2s;
}

.frontback{
    bottom: -250px;
    transition: 2s;
}

.mountain{
    top: 100px;
}

.something2{
    width: 125%;
    left: -150px;
    top: -200px;
    
}
.something3{
    top: -100px;
    width: 125%;
    left: -150px;
}
.line{
    right: 0;
    top: 600px;
}

.fishback1{
    right: 100px;
    top: 400px;
    width: 20%;
    opacity: 0.3;
}

.fishback2{
    right: 400px;
    top: 100px;
    width: 20%;
}

.fishback3{
    left: 100px;
    top: 250px;
    width: 20%;
}

.fishback3-1{
    right: 150px;
    top: 650px;
    width: 20%;
}

.fishback3-2{
    right: 80px;
    top: 580px;
    width: 20%;
}

.coralll{
    right: 0;
    bottom: 50px;
    width: 15%;
}
.turtleeiktua{
    bottom: 50px;
    left: 300px;
}

.wavepage6{
    background-image: url('../asset/wavepage6.png');
}
/* .bubblebubjai{
    
} */

/* ของเจมี่เจม */