@font-face {
    font-family: 'mali-bold';
    src: url('img/font/Mali-SemiBold.ttf');
    font-weight: normal;
    font-style: normal;
}

html {
    scroll-behavior: smooth;
}

* {
    font-family: 'mali-bold';
}

:root {
    --wh: white;
    --org: hsl(24, 93%, 46%);
    --aqua: hsl(182, 60%, 39%);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.font-kanit {
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
}

body {
    background: #eee;
    /* height: 100vh; */
    /* height: fit-content; */
    margin: 0;
    color: hsl(8, 38%, 23%);
    overflow-x: hidden;
    font-family: "thonglor";
}

.part {
    overflow-x: hidden;
    width: 100vw;
    z-index: 2;
    position: absolute;
    transition: .25s;
}

#story-part>div,
#more-part>div {
    text-align: center;
}

body[data-mode="story"] {
    background: darkcyan;
    height: 100vh;
}

body[data-mode="more"] {
    background: url(img/bg/desktop/ฉากวงศ์ปลา\(เดสทอป\).jpg);
    height: 100vh;
}

body[data-mode="main"]>:where(#story-part,
#more-part) {
    display: none;
    z-index: 0;
}

body[data-mode="story"]>:where(#main-part,
#more-part) {
    display: none;
    z-index: 0;
}

body[data-mode="more"]>:where(#story-part,
#main-part) {
    display: none;
    z-index: 0;
}

* {
    box-sizing: border-box;
    font-size: 18px;
}

.container {
    width: 100%;
    height: 100%;
    max-width: 1280px;
    padding: 0 24px;
    margin: auto;
    overflow: hidden;
    text-align: center;
    position: relative;
}

.page {
    width: 100vw;
    min-height: 100vh;
    position: relative;
    /* border: 5px solid orange; */
}

#home {
    background: url(img/bg/desktop/main1.png);
    /* background-size: 100% 100%; */
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

#main-part>.page {
    overflow: hidden;
}

.page-content {
    text-align: center;
    z-index: 4;
}

.home-logo {
    margin: 50px;
}

.home-logo>img {
    width: 175px;
}

.small-ship {
    width: 250px;
    position: absolute;
    bottom: 20vh;
    right: 0;
    animation: ship-move 10s infinite linear, ship-idle .5s infinite linear alternate;
}

#main2 {
    background: url(img/bg/desktop/main2.png);
    /* background-size: 100% 100%; */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.img-page2 {
    width: 30vh;
    bottom: 0;
    position: absolute;
}

.img-page2:hover {
    cursor: pointer;
}

.click-main2 {
    position: absolute;
    width: 75px;
    left: calc(50% - 37.5px);
    top: calc(50% - 37.5px);
    animation: krapib .5s 5s infinite linear alternate;
    opacity: 0;
}
.click-main2[data-show="0"]{
    display: none;
}

.text-parrot-fish {
    color: var(--org);
    font-size: 36px;
    /* font-weight: bold; */
}

.text-white-16 {
    color: var(--wh);
    font-size: 16px;
}

.text-white-22 {
    color: var(--wh);
    font-size: 22px;
}

.text-white-28 {
    color: var(--wh);
    font-size: 28px;
}

.text-white-36 {
    color: var(--wh);
    font-size: 36px;
}

.text-org-22 {
    color: var(--org);
    font-size: 22px;
}

.text-org-36 {
    color: var(--org);
    font-size: 36px;
}

.div-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-home {
    margin-top: 20px;
}

button,
.btn-classics {
    border-style: none;
    padding: 20px 60px;
    margin: 10px 0;
    background: white;
    border-radius: 50px;
}

.parrot-ani {
    animation:  swim 8s linear infinite;
    animation-delay: -10s;
}

@keyframes dukdik {
    50% {
        transform: translateX(2px)rotate(4deg);
    }
    100% {
        transform: translateX(0px)rotate(0deg);
    }
}

@keyframes dukdik1 {
    50% {
        transform: translateX(2px)rotate(4deg)scaleX(-1);
    }
    100% {
        transform: translateX(0px)rotate(0deg)scaleX(-1);
    }
}

@keyframes swim {
    0% {
        left: calc(90vw - 30vh);
    }
    49% {
        transform: scaleX(1);
    }
    50% {
        left: 10vw;
        transform: scaleX(-1);
    }
    99% {
        transform: scaleX(-1);
    }
    100% {
        left: calc(90vw - 30vh);
        transform: scaleX(1);
    }
}

img {
    width: 100%;
}

button:hover {
    cursor: pointer;
    box-shadow: 0 0 4px hsl(0, 100%, 0%, .25);
}

.btn-sm {
    padding: 15px 30px;
    font-size: 15px;
}

.btn-fade {
    background: hsl(0, 100%, 100%, .75);
}

@keyframes ship-move {
    from {
        right: -25vw;
    }
    to {
        right: 125vw;
    }
}

@keyframes ship-idle {
    to {
        transform: translateY(10px);
    }
}

#main3 {
    padding: 200px 0;
    height: 100vh;
    overflow: visible!important;
    background: url(img/bg/desktop/main3.png);
    /* background-size: 100% 100%; */
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.img-main3[data-show="0"] {
    /* transform: translateX(125vw) scaleX(-1); */
    display: none;
    /* transition: opacity 1s; */
    /* animation: fish-swim-go 2s; */
}

.img-main3[data-show="1"] {
    animation: fish-swim 2s;
}

.img-main3 {
    --swY: 0;
    width: 100vw;
    text-align: center;
    z-index: 1;
    top: 45vh;
    /* position: fixed; */
    position: absolute;
    /* transform: translateX(0px) scaleX(-1); */
    transform: translate(0px, calc(var(--swY) * 1px)) scaleX(-1);
}

@keyframes fish-swim {
    from {
        /* transform: translateX(-75vw) scaleX(-1); */
        transform: translate(-75vw, 0) scaleX(-1);
    }
}

@keyframes fish-swim-go {
    from {
        /* transform: translateX(0px) scaleX(-1); */
        transform: translate(0px, 0) scaleX(-1);
    }
    to {
        /* transform: translateX(125vw) scaleX(-1); */
        transform: translate(125vw) scaleX(-1);
    }
}

.img-main3>img {
    width: 350px;
    animation: dukdik 1s linear infinite;
}

#img-parrot-main[data-play="1"] {
    cursor: pointer;
}

#pic-click {
    bottom: 230px;
    left: calc( 55% - 10px);
    position: fixed;
    opacity: 0;
}

#pic-click[data-play="1"] {
    cursor: pointer;
    z-index: 2;
    animation: krapib .5s 4s linear infinite alternate;
}

#sh2 {
    width: 250px;
    border-style: none;
    padding: 20px 60px;
    margin: 10px 0;
    background: white;
    border-radius: 50px;
}

#pic-click>img {
    width: 120px;
}

@keyframes krapib {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.img-fish {
    display: inline-block !important;
    width: 90px;
    position: absolute;
}

.img-coral {
    display: inline-block !important;
    width: 100px;
    position: absolute;
}

.coral-orange-l {
    left: 60px;
    bottom: 150px;
    width: 190px !important;
    animation: dukdik 2s linear infinite;
    animation-delay: -10s;
}

.coral-orange-r {
    right: 200px;
    bottom: 60px;
    width: 160px !important;
    animation: dukdik 1.5s linear infinite;
    animation-delay: -10s;
}

.seaweeds-l {
    left: 220px;
    bottom: 160px;
    animation: dukdik 3s linear infinite;
    animation-delay: -10s;
}

.seaweeds-r {
    right: 10px;
    bottom: 0px;
    width: 200px !important;
    animation: dukdik 3s linear infinite;
    animation-delay: -10s;
}

.coral-pp-r {
    right: 330px;
    bottom: 60px;
    animation: dukdik 2s linear infinite;
    animation-delay: -10s;
}

.coral-pp-l {
    left: -30px;
    bottom: 120px;
    width: 180px !important;
    animation: dukdik 1.5s linear infinite;
    animation-delay: -10s;
}

.coral-pink-l {
    left: 380px;
    bottom: 130px;
    animation: dukdik 1.5s linear infinite;
    animation-delay: -10s;
}

.coral-pink-r {
    right: 10px;
    bottom: -20px;
    animation: dukdik 1s linear infinite;
    animation-delay: -10s;
}

.coral-pink {
    right: 180px;
    bottom: 10px;
    animation: dukdik 3s linear infinite;
    animation-delay: -10s;
}

.seaweeds {
    left: 320px;
    bottom: 70px;
    width: 100px !important;
    animation: dukdik 0.8s linear infinite;
    animation-delay: -10s;
}

.dory {
    left: 300px;
    bottom: 320px;
    animation: dukdik 0.7s linear infinite;
    animation-delay: -10s;
}

.mkfish {
    left: 370px;
    bottom: 250px;
    animation: dukdik 0.8s linear infinite;
    animation-delay: -10s;
}

.yellowfish {
    right: 300px;
    bottom: 300px;
    animation: dukdik 0.7s linear infinite;
    animation-delay: -10s;
}

.nemo {
    right: 250px;
    bottom: 150px;
    animation: dukdik 0.6s linear infinite, swim 9s linear infinite;
    animation-delay: -10s;
}

.star {
    left: 380px;
    bottom: 30px;
    animation: dukdik 2s linear infinite;
    animation-delay: -10s;
}

.shell-l {
    left: 80px;
    bottom: 30px;
}

.shell-r {
    transform: scaleX(-1);
    right: 300px;
    bottom: -5px;
}

#text2-in-main4 {
    width: 100vw;
    margin-top: 30vh;
}

#main4 {
    background: url(img/bg/desktop/main4.png);
    /* background-size: 100% 100%; */
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    overflow: hidden;
}

#story1 {
    background: url(img/bg/desktop/ตลาด1.jpg);
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
}

#story2 {
    background: url(img/bg/desktop/ตลาด2.jpg);
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
}

#story3 {
    background: url(img/bg/desktop/ตลาด3.jpg);
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
}

#story4 {
    background: url(img/bg/desktop/ตลาด4.jpg);
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.red {
    color: red;
    font-size: 16px;
}

.story1_text {
    color: black;
    font-size: 16px;
    position: absolute;
    top: 1vh;
    right: 42vw;
    z-index: 1;
}

.story2_text {
    color: white;
    font-size: 16px;
    position: absolute;
    top: 10vh;
    right: 20vw;
}

.story3_text {
    color: white;
    font-size: 16px;
}

.story4_text {
    color: white;
    font-size: 16px;
    position: absolute;
    bottom: 10vw;
    /* left: 40vw; */
}

.fishing-ship {
    width: 100vw;
    text-align: center;
    transform: translateY(15vh);
    position: absolute;
    z-index: 2;
}

.page[data-show="0"] {
    display: none;
}

.red {
    color: red;
    font-size: 22px;
}

.page[data-show="0"] {
    display: none;
}

.store {
    width: 100vw;
    position: absolute;
    bottom: 5vh;
}

.mid-store {
    width: 100vw;
    display: none;
}

.blue-boy {
    width: 25vw;
    position: absolute;
    bottom: 1vh;
    left: 35vw;
    z-index: 1;
}

.pa-orange {
    width: 25vw;
    position: absolute;
    bottom: 1vh;
    left: 45vw;
    z-index: 1;
}

.pink-girl {
    width: 25vw;
    position: absolute;
    bottom: 0vh;
    left: 42vw;
    z-index: 1;
}

.mid-store2 {
    width: 25vw;
    position: absolute;
    top: 0vh;
    left: 350px;
    z-index: 1;
}

.table {
    width: 22vw;
    position: absolute;
    bottom: 10vh;
    right: 10vw;
    z-index: 1;
}

.hand {
    width: 40vw;
    position: absolute;
    top: 10vh;
    left: 0vw;
    z-index: 1;
    transform: rotate(-20deg);
}

.toopla {
    width: 35vw;
    position: absolute;
    top: 30vh;
    left: 32vw;
}

.jumpfish {
    width: 20vw;
    position: absolute;
    top: 20vh;
    left: 40vw;
    z-index: 1;
}

.kon2 {
    width: 40vw;
    position: absolute;
    bottom: 10vh;
    left: 32vw;
    z-index: 1;
}

.waterfish {
    width: 18vw;
    position: absolute;
    bottom: 10vw;
    left: 42vw;
}

.jumpfish2 {
    width: 12vw;
    position: absolute;
    bottom: 21vh;
    left: 45vw;
    z-index: 1;
}

#main5 {
    background: url(img/bg/desktop/main5.png);
    /* background-size: 100% 100%; */
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    position: relative;
}

#main6 {
    background: url(img/bg/desktop/main6.png);
    /* background-size: 100% 100%; */
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: 225vh;
}


/* #main7 {
    background: url(img/bg/desktop/main6.png);
    background-size: 100% 100%;
    background-position: center bottom;
    background-repeat: no-repeat;
    height: fit-content;
} */

#main7-content-1 {
    position: absolute;
    top: 5vh;
    width: 100%;
}

#main7-content-2 {
    position: absolute;
    bottom: 80vh;
    width: 100%;
    z-index: 3;
    text-shadow: 2px 2px 8px black;
}

.btn-to-story {
    width: 100vw;
    display: flex;
    justify-content: center;
    position: absolute;
    /* margin-top: 18vh; */
    bottom: 5vh;
    z-index: 4;
}

.btn-to-story>button {
    color: var(--aqua);
}

#story5 {
    background: url(img/bg/desktop/ตลาด5.jpg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 200vh;
}

#story6 {
    background: url(img/bg/desktop/คืนสู่ทะเล1.jpg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 200vh;
}

#story7 {
    background: url(img/bg/desktop/คืนสู่ทะเล2.jpg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#story8 {
    background: url(img/bg/desktop/คืนสู่ทะเล3.jpg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#story9 {
    background: url(img/bg/desktop/save\ parrotfish.jpg);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#sharebt[data-show="0"] {
    display: none;
}

#sharebt {
    width: 100vw;
    bottom: 15vh;
    text-align: center;
    position: absolute;
}

.story7_text {
    color: 4BA4A0;
    font-size: 24;
}

.story9_text {
    color: white;
    font-size: 16px;
}

.orange-text {
    font-size: 32px;
    color: orange;
}

.story-content {
    position: absolute;
    width: 100vw;
    text-align: center;
    top: var(--b);
}

.nok {
    position: absolute;
    top: 50vh;
    width: 100vw;
    text-align: center;
    animation: nokbin 0.1s infinite alternate;
    z-index: 3;
}

.pla {
    --swY: -50;
    width: 25vh;
    top: 75vh;
    width: 100vw;
    text-align: center;
    position: absolute;
    transform: translate(0px, calc(var(--swY) * 1px)) scaleX(-1);
    z-index: 2;
    cursor: pointer;
    /* animation: dukdik1 1s infinite alternate linear; */
}

.pla2 {
    --swY: -50;
    /* top: 30vh; */
    width: 100vw;
    text-align: center;
    position: absolute;
    /* transform: translate(-10px, calc(var(--swY) * 1px)) scaleX(-1); */
    z-index: 2;
    animation: dukdik 1s infinite alternate linear;
}

.pla2>img{
    cursor: pointer;
}

.story5_text {
    font-size: 18px;
}

@keyframes nokbin {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(25px);
    }
}

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

.dead1 {
    bottom: var(--b);
    left: var(--l);
    width: 11vw;
    position: absolute;
    z-index: var(--z);
}

.dead2 {
    bottom: var(--b);
    left: var(--l);
    width: 5vw;
    position: absolute;
    z-index: var(--z);
}

.dead3 {
    bottom: var(--b);
    left: var(--l);
    width: 6vw;
    position: absolute;
    z-index: var(--z);
}

.dead4 {
    bottom: var(--b);
    left: var(--l);
    width: 10vw;
    position: absolute;
    z-index: var(--z);
}

.dead5 {
    bottom: var(--b);
    left: var(--l);
    width: 10vw;
    position: absolute;
    z-index: var(--z);
}

.dead6 {
    bottom: var(--b);
    left: var(--l);
    width: 5vw;
    position: absolute;
    z-index: var(--z);
}

.purple{
    left: -10px;
    bottom: -30px;
    width: 180px !important;
    position: absolute;
    z-index: 1;
    animation: dukdik 1.5s linear infinite;
    animation-delay: -10s;
}
.orange{
    left: 90px;
    bottom: -30px;
    width: 250px !important;
    position: absolute;
    animation: dukdik 1.5s .5s linear infinite;
    animation-delay: -18s;
}
.seaweed{
    left: 240px;
    bottom: -40px;
    width: 250px !important;
    position: absolute;
    z-index: -1 ;
    animation: dukdik 1.5s .3s linear infinite;
    animation-delay: -26s;
}
.pink{
    left: 470px;
    bottom: -40px;
    width: 250px !important;
    position: absolute;
    z-index: -1 ;
    animation: dukdik 1.5s .3s linear infinite;
    animation-delay: -12s;
}
.seaweed-a{
    left: 350px;
    bottom: -200px;
    width: 250px !important;
    position: absolute;
    z-index: -1 ;
    animation: dukdik 1.5s .3s linear infinite;
    animation-delay: -10s;
}
.purple-r{
    right: 400px;
    bottom: -30px;
    width: 250px !important;
    position: absolute;
    z-index: 1 ;
    animation: dukdik 1.5s .3s linear infinite;
    animation-delay: -10s;
}
.orange-r{
    right: 250px;
    bottom: -30px;
    width: 250px !important;
    z-index: -1 ;
    position: absolute;
    animation: dukdik 1.5s .5s linear infinite;
    animation-delay: -18s;
}
.seaweed-r{
    right: 70px;
    bottom: -30px;
    width: 250px !important;
    z-index: -2 ;
    position: absolute;
    animation: dukdik 1.5s .5s linear infinite;
    animation-delay: -17s;
}
.pink-r{
    right: 200px;
    bottom: -200px;
    width: 250px !important;
    z-index: -1 ;
    position: absolute;
    animation: dukdik 1.5s .5s linear infinite;
    animation-delay: -20s;
}
.seaweed-a-r{
    right: 0;
    bottom: -80px;
    width: 250px !important;
    z-index: -2 ;
    position: absolute;
    animation: dukdik 1.5s .5s linear infinite;
    animation-delay: -10s;
}
.fish-rainbow{
    top: 650px;
    left: 500px;
    /* width: 250px !important; */
    position: absolute;
    animation: dukdik1 1.5s .3s linear infinite;
    animation-delay: -10s;
}
.fish-head{
    top: 350px;
    right: 400;
    /* width: 250px !important; */
    position: absolute;
    animation: dukdik 1.5s .3s linear infinite;
    animation-delay: -15s;
}
.fish-ovi{
    top: 550px;
    left: 400px;
    width: 250px;
    position: absolute;
    animation: dukdik1 1.5s .3s linear infinite;
    animation-delay: -15s;
}

.fish-spot{
    top: 420px;
    right: 400;
    width: 250px;
    position: absolute;
    animation: dukdik 1.5s .3s linear infinite;
    animation-delay: -15s;
}

.fish-red{
    top: 570px;
    left: 400px;
    width: 250px;
    position: absolute;
    animation: dukdik1 1.5s .3s linear infinite;
    animation-delay: -15s;
}

.fish-marbled{
    top: 420px;
    right: 400;
    width: 250px;
    position: absolute;
    animation: dukdik 1.5s .3s linear infinite;
    animation-delay: -15s;
}

.fish-blue{
    top: 580px;
    left: 400px;
    width: 250px;
    position: absolute;
    animation: dukdik1 1.5s .3s linear infinite;
    animation-delay: -15s;
}

.fish-indian{
    top: 460px;
    right: 400;
    width: 250px;
    position: absolute;
    animation: dukdik 1.5s .3s linear infinite;
    animation-delay: -15s;
}

.fish-chi{
    top: 580px;
    left: 400px;
    width: 250px;
    position: absolute;
    animation: dukdik1 1.5s .3s linear infinite;
    animation-delay: -15s;
}

.fish-bic{
    top: 420px;
    right: 400;
    width: 250px;
    position: absolute;
    animation: dukdik 1.5s .3s linear infinite;
    animation-delay: -15s;
}

.content{
    background: white;
    width: 500px;
    height: 200px;
    position: absolute;
    top: 430px;
    left: 380px;
    border-radius: 20px;
    padding: 20px;
}
.content-2{
    background: white;
    width: 500px;
    height: 200px;
    position: absolute;
    top: 100px;
    right: 100px;
    border-radius: 20px;
    padding: 20px
}

.content-3{
    background: white;
    width: 500px;
    height: 230px;
    position: absolute;
    top: 300px;
    left: 300px;
    border-radius: 20px;
    padding: 20px;
}

.content-4{
    background: white;
    width: 500px;
    height: 200px;
    position: absolute;
    top: 200px;
    right: 300;
    border-radius: 20px;
    padding: 20px
}

.content-5{
    background: white;
    width: 500px;
    height: 250px;
    position: absolute;
    top: 300px;
    left: 300px;
    border-radius: 20px;
    padding: 20px;
}

.content-6{
    background: white;
    width: 500px;
    height: 200px;
    position: absolute;
    top: 200px;
    right: 300;
    border-radius: 20px;
    padding: 20px
}

.content-7{
    background: white;
    width: 500px;
    height: 210px;
    position: absolute;
    top: 350px;
    left: 300px;
    border-radius: 20px;
    padding: 20px;
}

.content-8{
    background: white;
    width: 500px;
    height: 240px;
    position: absolute;
    top: 200px;
    right: 300;
    border-radius: 20px;
    padding: 20px
}

.content-9{
    background: white;
    width: 500px;
    height: 240px;
    position: absolute;
    top: 350px;
    left: 300px;
    border-radius: 20px;
    padding: 20px;
}

.content-10{
    background: white;
    width: 500px;
    height: 190px;
    position: absolute;
    top: 200px;
    right: 300;
    border-radius: 20px;
    padding: 20px
}

.next-lvl{
    width: 100vw;
    bottom: 80px;
    position: absolute;
    overflow: hidden;
}

.back-to-basic{
    width: 100vw;
    bottom: 10px;
    position: absolute;
    overflow: hidden; 
}
#popup-picture{
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: 6;
    display: flex;
    justify-content: center;
    align-items: center;
    background: hsl(0, 0%, 0%, .5);
}
#popup-picture[data-show="0"]{
    display: none;
}

#main-popup{
    width: 80%;
    height: 80%;
    background: white;
    border-radius: 25px;
    position: relative;
    box-shadow: 2px 2px 8px hsl(0, 0%, 0%, .5);
}

.popup-img{
    width: 100%;
    height: 100%;
    /* background: black; */
    padding: 50px;
}

.popup-img>img{
    width: 100%;
    height: 100%;
    border-radius: 25px;
}

.popup-img>img[data-show="0"]{
    display: none;
}

.close-btn{
    padding: 15px 20px;
    background: red;
    color: white;
    width: fit-content;
    height: fit-content;
    position: absolute;
    top: -20px;
    right: -20px;
    border-radius: 50%;
    box-shadow: 2px 2px 8px black;
}

.close-btn:hover{
    cursor: pointer;
}

a:link {
    text-decoration: none;
  }

.header-fish-ja{
    color: white;
    padding: 15px;
    overflow: hidden;
}
.text-n{
    margin-bottom: 100px;
}

:where(.content, .content-2, .content-3, .content-4, .content-5, .content-6, .content-7, .content-8, .content-9, .content-10)[data-show="0"]{
    display: none;
}

.fishname{
    font-size: 25px;
    color: hsl(174, 31%, 40%, 100);
    font-weight: bold;
}

.text-fish{
    margin-bottom: 20px;
    overflow-y: scroll; 
    text-align: left;
    color: hsl(174, 31%, 40%, 100);
    height: 75%;
}
.linkfish{
    text-align: right;
    margin-top: -10px;
    margin-left: -20px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: hsl(174, 31%, 40%, 100)
}
#more1{
    overflow: hidden;
}
#more-part{
    overflow: hidden;
}
.fish-l[data-show="0"]{
    display: none;
}
.fish-r[data-show="0"]{
    display: none;
}
.fish-l{
    transform: scaleX(-1);
}
:where(.content,
.content-2,
.content-3,
.content-4,
.content-5,
.content-6,
.content-7,
.content-8,
.content-9,
.content-10)[data-show="0"] {
    display: none;
}

.fishname {
    font-size: 25px;
}

.text-fish {
    margin-bottom: 20px;
    overflow-y: scroll;
    text-align: left;
}

.link-fish {
    font-size: 25px;
    text-align: right;
    margin-top: -10px;
    margin-left: -20px;
}

#more1 {
    overflow: hidden;
}

#more-part {
    overflow: hidden;
}

.fish-l[data-show="0"] {
    display: none;
}

.fish-r[data-show="0"] {
    display: none;
}

.fishes{
    z-index: 3;
}
.fishes:hover{
    cursor: pointer;
}

.fish-l{
    left: 10vw;
    top: 100vw;
    width: 250px;
}
.fish-r{
    right: 10vw;
    top: 45vw;
    width: 250px;
}

.content-2,
.content-4,
.content-6,
.content-8,
.content-10{
    right: 10vw;
    top: 15vw;
}

.content,
.content-3,
.content-5,
.content-7,
.content-9{
    left: 10vw;
    top: 65vw;
}

.btn-more{
    z-index: 5;
}



@media (min-width: 1200px) {
    #home {
        background: url(img/bg/desktop/main1.png);
        background-size: 100% 100%;
        background-position: center bottom;
        background-repeat: no-repeat;
    }
    #main2 {
        background: url(img/bg/desktop/main2.png);
        background-size: 100% 100%;
        background-position: center bottom;
        background-repeat: no-repeat;
    }
    #main3 {
        background: url(img/bg/desktop/main3.png);
        background-size: 100% 100%;
        background-position: center bottom;
        background-repeat: no-repeat;
    }
    #main4 {
        background: url(img/bg/desktop/main4.png);
        background-size: 100% 100%;
        background-position: center bottom;
        background-repeat: no-repeat;
    }
    #main5 {
        background: url(img/bg/desktop/main5.png);
        background-size: 100% 100%;
        background-position: center bottom;
        background-repeat: no-repeat;
    }
    #main6 {
        background: url(img/bg/desktop/main6.png);
        background-size: 300% 100%;
        background-position: center bottom;
        background-repeat: no-repeat;
    }
    #story1 {
        background: url(img/bg/desktop/ตลาด1.jpg);
        background-size: 100% 100%;
        background-position: center bottom;
        background-repeat: no-repeat;
        width: 100%;
    }
    #story2 {
        background: url(img/bg/desktop/ตลาด2.jpg);
        background-size: 100% 100%;
        background-position: center bottom;
        background-repeat: no-repeat;
        width: 100%;
    }
    #story3 {
        background: url(img/bg/desktop/ตลาด3.jpg);
        background-size: 100% 100%;
        background-position: center bottom;
        background-repeat: no-repeat;
        width: 100%;
    }
    #story4 {
        background: url(img/bg/desktop/ตลาด4.jpg);
        background-size: 100% 100%;
        background-position: center bottom;
        background-repeat: no-repeat;
        width: 100%;
    }
    .story4_text {
        color: white;
        font-size: 22px;
        position: absolute;
        bottom: 0vh;
        /* left: 38vw; */
    }
    #story5 {
        background: url(img/bg/desktop/ตลาด5.jpg);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        /* background-size: 100% 100%; */
        height: 200vh;
    }
    #story6 {
        background: url(img/bg/desktop/คืนสู่ทะเล1.jpg);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        /* background-size: 100% 100%; */
        height: 200vh;
    }
    #story7 {
        background: url(img/bg/desktop/คืนสู่ทะเล2.jpg);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        /* background-size: 100% 100%; */
    }
    #story8 {
        background: url(img/bg/desktop/คืนสู่ทะเล3.jpg);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        /* background-size: 100% 100%; */
    }
    .fishing-ship {
        width: 85%;
        left: calc(50vw - (65% / 2));
    }
    .story5_text {
        font-size: 18px;
    }
    .coral-pink-r {
        right: -30px;
        bottom: -10px;
        animation: dukdik 1s linear infinite;
        width: 160px!important;
        animation-delay: -10s;
    }
    .coral-pp-r {
        right: 330px;
        bottom: 55px;
        width: 140px !important;
        animation: dukdik 2s linear infinite;
        animation-delay: -10s;
    }
    .coral-pink {
        right: 170px;
        bottom: 10px;
        animation: dukdik 3s linear infinite;
        animation-delay: -10s;
        width: 150px!important;
    }
    .seaweeds-l {
        left: 220px;
        bottom: 160px;
        width: 150px !important;
        animation: dukdik 3s linear infinite;
        animation-delay: -10s;
    }
    #pic-click {
        bottom: 280px;
        left: calc( 55% - 10px);
        position: fixed;
        opacity: 0;
    }
    #pic-click>img {
        width: 110px;
    }
    .img-fish {
        width: 110px;
    }
    .dory {
        left: 250px;
        bottom: 370px;
        animation: dukdik 0.7s linear infinite;
        animation-delay: -10s;
    }
    .mkfish {
        left: 350px;
        bottom: 240px;
        animation: dukdik 0.8s linear infinite;
        animation-delay: -10s;
    }
    .yellowfish {
        right: 250px;
        bottom: 300px;
        animation: dukdik 0.7s linear infinite;
        animation-delay: -10s;
    }
    .nemo {
        right: 250px;
        bottom: 150px;
        animation: dukdik 0.6s linear infinite, swim 9s linear infinite;
        animation-delay: -10s;
    }
    .star {
        left: 250px;
        bottom: 50px;
        animation: dukdik 2s linear infinite;
        animation-delay: -10s;
    }
    .shell-l {
        left: 150px;
        bottom: 90px;
        animation: dukdik 2s linear infinite;
        animation-delay: -10s;
    }
    .shell-r {
        transform: scaleX(-1);
        right: 400px;
        bottom: 0px;
    }
    .story5_text{
        font-size: 18px;
    }
    .purple{
        width: 200px!important;
        left: -40px;
    }
    .orange{
        width: 200px!important;
        left: 90px;
    }
    .seaweed{
        width: 200px!important;
        left: 170px;
    }
    .pink{
        width: 200px!important;
        bottom: -50px;
        left: 350px;
    }
    .seaweed-a{
        width: 200px!important;
        bottom: -180px;
        left: 260px;
    }
    .purple-r{
        width: 200px!important;
        right: 350px;
        bottom: -50px;
        z-index: -1;
    }
    .orange-r{
        width: 200px!important;
        right: 240px;
        z-index: -2;
        top: 590px;
    }
    .seaweed-r{
        width: 200px!important;
        right: 120px;
        z-index: -3;
    }
    .pink-r{
        width: 200px!important;
        right: 70px;
    }
    .seaweed-a-r{
        width: 200px!important;
        right: -60px;
    }
    .fish-rainbow{
        width: 15vw;
        /* left: 300px; */
        top: 450px;
    }
    .fish-head{
        width: 15vw;
        /* left: 850px; */
        top: 350px;
    }

    .content{
        height: 18vw;
        width: 32vw;
        left: 200px;
        top: 200px;
    }

    .content-2{
        height: 18vw;
        width: 35vw;
        /* left: 730px; */
        top: 110px;
    }

    .fish-ovi{
        top: 450px;
        /* left: 350px; */
        width: 15vw;
        position: absolute;
        transform: scaleX(-1);
    }
    
    .fish-spot{
        top: 350px;
        right: 200px;
        width: 15vw;
        position: absolute;
    }

    .content-3{
        height: 18vw;
        width: 35vw;
        /* left: 200px; */
        top: 200px;
    }
    
    .content-4{
        height: 18vw;
        width: 35vw;
        /* left: 730px; */
        top: 110px;
    }
    
    .fish-red{
        top: 470px;
        /* left: 340px; */
        width: 15vw;
        position: absolute;
        transform: scaleX(-1);
    }
    
    .fish-marbled{
        top: 330px;
        right: 230px;
        width: 15vw;
        position: absolute;
    }

    .content-5{
        height: 20vw;
        width: 35vw;
        left: 200px;
        top: 200px;
    }
    
    .content-6{
        height: 16vw;
        width: 35vw;
        /* left: 730px; */
        top: 110px;
    }
    
    .fish-blue{
        top: 450px;
        /* left: 340px; */
        width: 15vw;
        position: absolute;
        transform: scaleX(-1);
    }
    
    .fish-indian{
        top: 330px;
        right: 200px;
        width: 15vw;
        position: absolute;
    }

    .content-7{
        height: 18vw;
        width: 35vw;
        left: 200px;
        top: 200px;
    }
    
    .content-8{
        height: 16vw;
        width: 40vw;
        /* left: 730px; */
        top: 110px;
    }
    
    .fish-chi{
        top: 420px;
        /* left: 340px; */
        width: 15vw;
        position: absolute;
        transform: scaleX(-1);
    }
    
    .fish-bic{
        top: 310px;
        right: 200px;
        width: 15vw;
        position: absolute;
    }

    .content-9{
        height: 16vw;
        width: 35vw;
        left: 200px;
        top: 200px;
    }
    
    .content-10{
        height: 14vw;
        width: 40vw;
        /* left: 730px; */
        top: 110px;
    }
    .next-lvl{
        bottom: 75px;
        position: absolute;
    }
    .back-to-basic{
        bottom: 5px;
        position: absolute;
    }

    .fish-contents{
        width: 35vw;
        height: 200px;
    }
}

@media (max-width: 1120px) {
    .img-main3 {
        top: 30vh;
    }
    /* .img-main3>img{
        width: 50vw;
    } */
    .fishing-ship {
        top: 15vh;
    }
    .fishing-ship>img {
        width: 125vh;
    }
    
    .navbar-item-text{
        display: none;
    }

    .btnOpen{
        display: flex!important;
    }

    .navbar{
        display: none!important;
    }

    .navbar-mobile{
        display: block!important;
    }
}

@media (max-width: 500px) {
    #home {
        background: url(img/bg/mobile/main1.png);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
    }
    #main2 {
        background: url(img/bg/mobile/main2.png);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
    }
    #main3 {
        background: url(img/bg/mobile/main3.png);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
    }
    #main4 {
        background: url(img/bg/mobile/main4.png);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
    }
    #main5 {
        background: url(img/bg/mobile/main5.png);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
    }
    #main6 {
        background: url(img/bg/mobile/main6.png);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        height: 100vh;
    }
    #story1 {
        background: url(img/bg/mobile/ในตลาด1.jpg);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        height: 100vh;
    }
    .store {
        display: none;
    }
    .mid-store {
        width: 80vw;
        right: 10vw;
        bottom: 10vh;
        position: absolute;
        display: block;
    }
    .fishtank1 {
        width: 60vw;
        left: 20vw;
        bottom: 30vh;
    }
    .Rstore {
        opacity: 0;
    }
    .Lstore {
        opacity: 0;
    }
    .fishtank2 {
        opacity: 0;
    }
    .blue-boy {
        width: 80vw;
        left: -10vw;
    }
    .pink-girl {
        width: 80vw;
        left: 20vw;
    }
    .pa-orange {
        width: 80vw;
        left: 35vw;
    }
    .story1_text {
        width: 100vw;
        color: black;
        font-size: 16px;
        position: absolute;
        /*top: 1vh;
        right: 42vw;*/
        left: 0vw;
        top: 5vh;
        z-index: 1;
    }
    .red {
        font-size: 16px;
    }
    #story2 {
        background: url(img/bg/mobile/ในตลาด2.jpg);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        height: 100vh;
    }
    .mid-store2 {
        width: 45vw;
        left: 10vw;
        top: 20vh
    }
    .fishtank3 {
        width: 20vw;
        left: 18vw;
        top: 20vh;
    }
    .hand {
        width: 55vw;
        top: 42vh;
        left: 5vw;
        z-index: 1;
    }
    .table {
        width: 45vw;
        bottom: 10vh;
        right: 10vw;
        z-index: 2;
    }
    .story2_text {
        color: white;
        font-size: 16px;
        position: absolute;
        top: 10vh;
    }
    .story2_text2{
        width: 100vw;
        position: absolute;
        bottom: -75vh;
        left: -20vw;
    }
    #story3 {
        background: url(img/bg/mobile/ในตลาด3.jpg);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        height: 100vh;
    }
    .toopla {
        width: 60vw;
        position: absolute;
        top: 35vh;
        left: 20vw;
    }
    .jumpfish {
        width: 40vw;
        position: absolute;
        top: 25vh;
        left: 32vw;
        z-index: 1;
    }
    #story4 {
        background: url(img/bg/mobile/ในตลาด4.jpg);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        height: 100vh;
    }
    .kon2 {
        width: 120vw;
        position: absolute;
        top: 25vh;
        left: -10vw;
    }
    .waterfish {
        width: 60vw;
        position: absolute;
        bottom: 15vh;
        left: 20vw;
    }
    .jumpfish2 {
        width: 40vw;
        position: absolute;
        bottom: 20vh;
        left: 30vw;
    }
    .story4_text {
        width: 100vw;
        position: absolute;
        bottom: 3vh;
        left: 3vw;
    }
    #sh2 {
        width: 200px;
    }
    #story5 {
        background: url(img/bg/mobile/ในตลาด5.jpg);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        height: 200vh;
    }
    #story6 {
        background: url(img/bg/mobile/คืนทะเล1.jpg);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
        height: 200vh;
    }
    #story7 {
        background: url(img/bg/mobile/คืนทะเล2.jpg);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
    }
    #story8 {
        background: url(img/bg/mobile/คืนทะเล3.jpg);
        background-size: cover;
        background-position: center bottom;
        background-repeat: no-repeat;
    }
    .dead1 {
        bottom: calc(var(--b)*2);
        left: var(--l);
        width: 22vw;
        position: absolute;
        z-index: var(--z);
    }
    .story5_text {
        font-size: 18px;
    }
    .dead2 {
        bottom: calc(var(--b)*2);
        left: var(--l);
        width: 10vw;
        position: absolute;
        z-index: var(--z);
    }
    .dead3 {
        bottom: calc(var(--b)*2);
        left: var(--l);
        width: 12vw;
        position: absolute;
        z-index: var(--z);
    }
    .dead4 {
        bottom: calc(var(--b)*2);
        left: var(--l);
        width: 20vw;
        position: absolute;
        z-index: var(--z);
    }
    .dead5 {
        bottom: calc(var(--b)*2);
        left: var(--l);
        width: 20vw;
        position: absolute;
        z-index: var(--z);
    }
    .dead6 {
        bottom: calc(var(--b)*2);
        left: var(--l);
        width: 10vw;
        position: absolute;
        z-index: var(--z);
    }
    .mb-fs-24,
    .btn-sm {
        font-size: 3vw!important;
    }
    .mb-fs-30,
    .btn-classics {
        font-size: 5vw;
    }
    .mb-fs-48 {
        font-size: 6vw;
    }
    .img-main3 {
        top: 55vh;
    }
    .img-main3>img {
        width: 50%;
    }
    .fishing-ship {
        top: -5vh;
    }
    .fishing-ship>img {
        width: 110%;
    }
    .small-ship {
        bottom: 30vh;
    }
    #main7-content-2 {
        bottom: 50vh;
    }
    .text-fish {
        font-size: 13px;
    }
    .purple{
        width: 125px!important;
        left: 0px;
        z-index: -5;
    }
    .orange{
        width: 125px!important;
        left: -10px;
    }
    .seaweed{
        width: 125px!important;
        left: 30px;
    }
    .pink{
        width: 125px!important;
        bottom: -50px;
        left: 100px;
    }
    .seaweed-a{
        width: 125px!important;
        bottom: -120px;
        left: 70px;
    }
    .purple-r{
        width: 125px!important;
        right: 20px;
        z-index: -5;
    }
    .orange-r{
        width: 125px!important;
        right: -10px;
    }
    .seaweed-r{
        width: 125px!important;
        right: -20px;
    }
    .pink-r{
        width: 125px!important;
        right: -20px;
    }
    .seaweed-a-r{
        width: 125px!important;
        right: -20px;
    }
    .fish-rainbow{
        width: 30vw;
        left: 110px;
        top: 300px;
    }
    .fish-head{
        width: 30vw;
        left: 170px;
        top: 550px;

    }
    .content{
        height: 180px;
        width: 79vw;
        left: 20px;
        top: 90px;
    }
    .content-2{
        height: 170px;
        width: 79vw;
        left: 70px;
        top: 370px;
    }
    .fish-ovi{
        width: 30vw;
        left: 110px;
        top: 280px;
    }
    .fish-spot{
        width: 35vw;
        left: 170px;
        top: 550px;
    }
    .content-3{
        height: 180px;
        width: 79vw;
        left: 20px;
        top: 90px;
    }
    .content-4{
        height: 170px;
        width: 79vw;
        left: 70px;
        top: 370px;
    }
    .fish-red{
        width: 30vw;
        left: 110px;
        top: 300px;
    }
    
    .fish-marbled{
        width: 35vw;
        left: 170px;
        top: 550px;
    }

    .content-5{
        height: 200px;
        width: 79vw;
        left: 20px;
        top: 90px;
    }
    
    .content-6{
        height: 170px;
        width: 79vw;
        left: 70px;
        top: 370px;
    }
    .fish-blue{
        width: 35vw;
        left: 110px;
        top: 270px;
    }
    
    .fish-indian{
        width: 35vw;
        left: 170px;
        top: 550px;
    }

    .content-7{
        height: 170px;
        width: 79vw;
        left: 20px;
        top: 90px;
    }
    
    .content-8{
        height: 190px;
        width: 79vw;
        left: 70px;
        top: 350px;
    }
    
    .fish-chi{
        width: 35vw;
        left: 110px;
        top: 270px;
    }
    
    .fish-bic{
        width: 35vw;
        left: 170px;
        top: 520px;
    }

    .content-9{
        height: 160px;
        width: 79vw;
        left: 20px;
        top: 90px;
    }
    
    .content-10{
        height: 150px;
        width: 79vw;
        left: 70px;
        top: 350px;
    }

    .next-lvl{
        bottom: 75px;
        position: absolute;
    }

    .back-to-basic{
        bottom: 5px;
        position: absolute;
    }

    #main-popup{
        height: 30vh;
    }
    .popup-img{
        padding: 20px;
    }
}


/* FOR Destop 1280*720 */

/* @media (max-width: 1280px) {
    .purple {
        width: 200px!important;
        left: -40px;
    }
    .orange {
        width: 200px!important;
        left: 40px;
    }
    .seaweed {
        width: 200px!important;
        left: 140px;
    }
    .pink {
        width: 200px!important;
        bottom: -50px;
        left: 290px;
    }
    .seaweed-a {
        width: 200px!important;
        bottom: -180px;
        left: 200px;
    }
    .purple-r {
        width: 200px!important;
        right: 270px;
        bottom: -50px;
    }
    .orange-r {
        width: 200px!important;
        right: 170px;
    }
    .seaweed-r {
        width: 200px!important;
        right: 100px;
    }
    .pink-r {
        width: 200px!important;
        right: 40px;
    }
    .seaweed-a-r {
        width: 200px!important;
        right: -60px;
    }
    .fish-rainbow {
        width: 15vw;
        left: 300px;
        top: 450px;
    }
    .fish-head {
        width: 15vw!important;
        left: 850px;
        top: 350px;
    }
    .content {
        height: 18vw;
        width: 32vw;
        left: 200px;
        top: 200px;
    }
    .content-2 {
        height: 18vw;
        width: 35vw;
        left: 730px;
        top: 110px;
    }
    .fish-ovi {
        top: 450px;
        left: 350px;
        width: 15vw;
        position: absolute;
        transform: scaleX(-1);
    }
    .fish-spot {
        top: 350px;
        right: 200px;
        width: 15vw;
        position: absolute;
    }
    .content-3 {
        height: 18vw;
        width: 35vw;
        left: 200px;
        top: 200px;
    }
    .content-4 {
        height: 18vw;
        width: 35vw;
        left: 730px;
        top: 110px;
    }
    .fish-red {
        top: 470px;
        left: 340px;
        width: 15vw;
        position: absolute;
        transform: scaleX(-1);
    }
    .fish-marbled {
        top: 350px;
        right: 230px;
        width: 15vw;
        position: absolute;
    }
    .content-5 {
        height: 20vw;
        width: 35vw;
        left: 200px;
        top: 200px;
    }
    .content-6 {
        height: 16vw;
        width: 35vw;
        left: 730px;
        top: 110px;
    }
    .fish-blue {
        top: 450px;
        left: 340px;
        width: 15vw;
        position: absolute;
        transform: scaleX(-1);
    }
    .fish-indian {
        top: 360px;
        right: 200px;
        width: 15vw;
        position: absolute;
    }
    .content-7 {
        height: 18vw;
        width: 35vw;
        left: 200px;
        top: 200px;
    }
    .content-8 {
        height: 20w;
        width: 40vw;
        left: 730px;
        top: 110px;
    }
    .fish-chi {
        top: 420px;
        left: 340px;
        width: 15vw;
        position: absolute;
        transform: scaleX(-1);
    }
    .fish-bic {
        top: 310px;
        right: 200px;
        width: 15vw;
        position: absolute;
    }
    .content-9 {
        height: 16vw;
        width: 35vw;
        left: 200px;
        top: 200px;
    }
    .content-10 {
        height: 20w;
        width: 40vw;
        left: 730px;
        top: 110px;
    }
    .next-lvl {
        bottom: 75px;
        position: absolute;
    }
    .back-to-basic {
        bottom: 5px;
        position: absolute;
    }
} */


/* รอลบได้เลย */

.coming-soon {
    font-size: 24px;
    margin-bottom: 40px;
}

.text-coming-soon {
    font-size: 50px;
}

.test-goto {
    right: 15px;
    position: absolute;
    z-index: 5;
}

#loading {
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: 5;
    background: #8cd1ca;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#loading[data-show="0"] {
    display: none;
}

.loading-logo {
    animation: dukdik 0.5s linear infinite, swim 8s linear infinite;
    width: 250px;
}

.loading-text {
    margin-top: 25px;
    font-size: 50px;
}

.loading-text>span {
    font-size: 50px;
}

#loading-point1 {
    animation: loading-appear 1s infinite alternate linear;
}

#loading-point2 {
    animation: loading-appear 1s .33s infinite alternate linear;
}

#loading-point3 {
    animation: loading-appear 1s .66s infinite alternate linear;
}

@keyframes loading-appear {
    from {
        opacity: 0;
    }
}

.navbar, .navbar-mobile{
    position: fixed;
    z-index: 4;
    right: -40px;
    top: calc(50vh - 130px);
    transition: .5s;
}

.navbar-mobile{
    display: none;
}

.navbar-item{
    transition: .5s;
    display: flex;
    justify-content: right;
    align-items: center;
    column-gap: 10px
}

.navbar-item > div{
    display: inline-block;
}

.navbar-item-text{
    width: 130px;
    border: 2px solid var(--aqua);
    border-radius: 20px;
    background: white;
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
}

.navbar-item-text[data-show="0"]{
    display: none;
    opacity: 0;
}

.navbar-item-icon{
    width: 80px;
    height: 80px;
    border: 4px solid var(--aqua);
    border-radius: 50%;
    background: var(--url);
    background-size: cover;
}

.navbar .navbar-item:hover{
    cursor: pointer;
    transform: translateX(-60px);
}

.navbar-space{
    height: 10px;
}

.btnOpen{
    align-items: center;
    justify-content: left;
    width: 100%;
    height: 100%;
    position: absolute;
    left: -70px;
    display: none;
    transition: .5s;
}

.navbar-mobile[data-open="0"]{
    transform: translateX(75px);
}
.navbar-mobile[data-open="1"]{
    transform: translateX(-40px);
}

.btnOpen:hover{
    cursor: pointer;
}

.btnOpen > div{
    padding: 10px 17px;
    color: black;
    background-color: white;
    border-radius: 100%;
}

.btnOpen > div:hover{
    box-shadow: 0 0 8px hsl(0, 100%, 0%, .25);
}