°‧ 𓆝SHARK GIVEAWAY 𓆟 𓆞 ·｡

<style>



.ocean-dolls{
position:relative;
width:100%;
height:1px;
pointer-events:none;
z-index:2;
}



.ocean-bubbles{
position:fixed;
inset:0;
overflow:hidden;
pointer-events:none;
z-index:1;
}

.bubble{
position:absolute;
bottom:-80px;
border-radius:50%;
border:1px solid rgba(190,245,255,.38);
background:
radial-gradient(
circle at 30% 25%,
rgba(255,255,255,.65),
rgba(170,235,250,.12) 35%,
transparent 70%
);
box-shadow:
inset 2px 2px 5px rgba(255,255,255,.25),
0 0 10px rgba(100,220,255,.12);
animation:bubble-rise linear infinite;
}

.bubble::after{
content:"";
position:absolute;
width:25%;
height:25%;
top:18%;
left:20%;
border-radius:50%;
background:rgba(255,255,255,.65);
filter:blur(1px);
}

.b1{
width:18px;
height:18px;
left:8%;
animation-duration:13s;
}

.b2{
width:8px;
height:8px;
left:17%;
animation-duration:9s;
animation-delay:-3s;
}

.b3{
width:27px;
height:27px;
left:29%;
animation-duration:17s;
animation-delay:-8s;
}

.b4{
width:12px;
height:12px;
left:42%;
animation-duration:11s;
animation-delay:-2s;
}

.b5{
width:34px;
height:34px;
left:54%;
animation-duration:20s;
animation-delay:-12s;
}

.b6{
width:10px;
height:10px;
left:67%;
animation-duration:10s;
animation-delay:-5s;
}

.b7{
width:22px;
height:22px;
left:76%;
animation-duration:15s;
animation-delay:-7s;
}

.b8{
width:7px;
height:7px;
left:88%;
animation-duration:8s;
animation-delay:-1s;
}

.b9{
width:15px;
height:15px;
left:94%;
animation-duration:14s;
animation-delay:-9s;
}

@keyframes bubble-rise{

0%{
transform:translateY(0) translateX(0) scale(.7);
opacity:0;
}

10%{
opacity:.7;
}

50%{
transform:translateY(-50vh) translateX(18px) scale(1);
}

100%{
transform:translateY(-115vh) translateX(-20px) scale(1.15);
opacity:0;
}

}



.sea-creature{
position:fixed;
pointer-events:none;
z-index:3;
filter:
drop-shadow(0 8px 12px rgba(0,30,45,.28))
drop-shadow(0 0 12px rgba(90,210,235,.12));
}

.jelly-doll{
width:150px;
height:240px;
left:7%;
top:18%;
animation:creature-float-one 9s ease-in-out infinite;
}

.kraken-doll{
width:190px;
height:180px;
right:3%;
top:53%;
animation:creature-float-two 12s ease-in-out infinite;
}

.fish-doll{
width:170px;
height:100px;
right:8%;
top:17%;
animation:fish-swim 13s ease-in-out infinite;
}

.shark-doll{
width:230px;
height:120px;
left:2%;
top:70%;
animation:shark-swim 17s ease-in-out infinite;
}



.jelly-dome{
position:absolute;
top:0;
left:50%;
width:125px;
height:78px;
transform:translateX(-50%);
border-radius:
65px 65px 40px 40px /
70px 70px 30px 30px;

background:

radial-gradient(
ellipse at 35% 20%,
rgba(255,255,255,.85),
transparent 22%
),

radial-gradient(
ellipse at 70% 40%,
rgba(120,240,255,.55),
transparent 45%
),

linear-gradient(
180deg,
rgba(205,250,255,.65),
rgba(80,205,235,.35) 60%,
rgba(25,130,180,.22)
);

border:1px solid rgba(220,255,255,.7);

box-shadow:
inset 0 7px 15px rgba(255,255,255,.4),
inset 0 -12px 20px rgba(20,110,160,.25),
0 0 25px rgba(80,220,255,.25);

animation:jelly-breathe 4.5s ease-in-out infinite;
}

.jelly-dome::before{
content:"";
position:absolute;
width:65px;
height:45px;
left:30px;
top:8px;
border-radius:50%;
background:rgba(255,255,255,.12);
box-shadow:
-25px 20px 0 -18px rgba(255,255,255,.4),
30px 15px 0 -14px rgba(160,245,255,.35);
}

.jelly-rim{
position:absolute;
bottom:-6px;
left:50%;
width:124px;
height:24px;
transform:translateX(-50%);
border-radius:50%;
border-bottom:2px solid rgba(210,255,255,.65);
background:radial-gradient(
ellipse,
rgba(210,255,255,.35),
transparent 70%
);
}

.jelly-organ{
position:absolute;
width:48px;
height:38px;
left:50%;
top:38px;
transform:translateX(-50%);
border-radius:50%;
background:
radial-gradient(
ellipse at 50% 25%,
rgba(255,255,255,.4),
transparent 35%
),
linear-gradient(
180deg,
rgba(90,220,245,.4),
rgba(20,120,180,.15)
);
box-shadow:
inset 0 0 10px rgba(255,255,255,.3);
}

.jelly-organ::before,
.jelly-organ::after{
content:"";
position:absolute;
width:18px;
height:30px;
border-radius:50%;
border-left:2px solid rgba(225,255,255,.4);
}

.jelly-organ::before{
left:4px;
transform:rotate(12deg);
}

.jelly-organ::after{
right:4px;
transform:rotate(-12deg);
}

.jelly-tentacles{
position:absolute;
top:68px;
left:50%;
width:140px;
height:165px;
transform:translateX(-50%);
}

.jelly-arm{
position:absolute;
top:0;
width:20px;
height:155px;
border-radius:50%;
border-left:2px solid rgba(190,250,255,.48);
border-right:1px solid rgba(90,210,240,.2);
background:linear-gradient(
90deg,
transparent,
rgba(210,255,255,.2),
transparent
);
transform-origin:top center;
animation:tentacle-wave 4s ease-in-out infinite;
}

.jelly-arm:nth-child(1){
left:2px;
height:130px;
transform:rotate(16deg);
}

.jelly-arm:nth-child(2){
left:23px;
height:158px;
transform:rotate(9deg);
animation-delay:-.7s;
}

.jelly-arm:nth-child(3){
left:45px;
height:145px;
transform:rotate(3deg);
animation-delay:-1.4s;
}

.jelly-arm:nth-child(4){
left:66px;
height:165px;
transform:rotate(-3deg);
animation-delay:-2s;
}

.jelly-arm:nth-child(5){
left:88px;
height:150px;
transform:rotate(-9deg);
animation-delay:-2.7s;
}

.jelly-arm:nth-child(6){
left:110px;
height:125px;
transform:rotate(-16deg);
animation-delay:-3.2s;
}

.jelly-speck{
position:absolute;
width:8px;
height:8px;
border-radius:50%;
background:rgba(225,255,255,.55);
box-shadow:0 0 8px rgba(100,230,255,.45);
}

.js1{
left:20px;
top:27px;
}

.js2{
right:22px;
top:40px;
width:5px;
height:5px;
}

.js3{
left:52px;
top:15px;
width:6px;
height:6px;
}

@keyframes jelly-breathe{

0%,100%{
transform:translateX(-50%) scaleX(1) scaleY(1);
}

50%{
transform:translateX(-50%) scaleX(.94) scaleY(1.07);
}

}




.kraken-head{
position:absolute;
left:50%;
top:12px;
width:88px;
height:70px;
transform:translateX(-50%);
border-radius:
48% 52% 45% 55% /
55% 55% 45% 45%;

background:

radial-gradient(
circle at 30% 25%,
rgba(190,110,125,.8),
transparent 18%
),

radial-gradient(
circle at 70% 35%,
rgba(100,35,60,.8),
transparent 35%
),

linear-gradient(
145deg,
#9a5364,
#4c1f35 65%,
#281326
);

box-shadow:
inset 8px 8px 15px rgba(255,180,190,.2),
inset -10px -10px 18px rgba(20,0,15,.5);
}

.kraken-eye{
position:absolute;
top:25px;
width:17px;
height:23px;
border-radius:50%;
background:
radial-gradient(
circle at 45% 40%,
white 0 12%,
#b8efff 14% 30%,
#06131c 34% 60%,
#000 62%
);
box-shadow:0 0 8px rgba(130,230,255,.5);
}

.kraken-eye.left{
left:19px;
}

.kraken-eye.right{
right:19px;
}

.kraken-mouth{
position:absolute;
left:50%;
bottom:10px;
width:28px;
height:12px;
transform:translateX(-50%);
border-bottom:2px solid rgba(20,0,15,.7);
border-radius:50%;
}

.kraken-tentacles{
position:absolute;
top:60px;
left:50%;
width:185px;
height:115px;
transform:translateX(-50%);
}

.kraken-arm{
position:absolute;
top:0;
width:28px;
height:105px;
border-radius:
50% 50% 45% 55%;
background:
linear-gradient(
90deg,
#35172a,
#814153 45%,
#4c2038
);
box-shadow:
inset 3px 0 5px rgba(220,130,145,.2);
transform-origin:top center;
}

.kraken-arm::after{
content:"";
position:absolute;
bottom:8px;
left:50%;
width:10px;
height:10px;
transform:translateX(-50%);
border-radius:50%;
background:
radial-gradient(
circle,
#d88c9c 0 35%,
#572339 40% 100%
);
box-shadow:
0 -18px 0 -1px #c9768a,
0 -36px 0 -2px #bd687e,
0 -54px 0 -3px #ad5b72;
}

.ka1{
left:3px;
transform:rotate(27deg);
height:92px;
}

.ka2{
left:28px;
transform:rotate(15deg);
height:110px;
}

.ka3{
left:57px;
transform:rotate(5deg);
height:120px;
}

.ka4{
left:87px;
transform:rotate(-5deg);
height:120px;
}

.ka5{
left:115px;
transform:rotate(-16deg);
height:108px;
}

.ka6{
left:142px;
transform:rotate(-27deg);
height:90px;
}




.fish-body{
position:absolute;
left:30px;
top:22px;
width:105px;
height:58px;
border-radius:
65% 45% 45% 65% /
55% 55% 45% 45%;

background:

radial-gradient(
ellipse at 30% 25%,
rgba(255,255,255,.55),
transparent 20%
),

linear-gradient(
160deg,
#d5a86d,
#a76838 50%,
#603b29
);

border:1px solid rgba(255,220,170,.45);

box-shadow:
inset -12px -8px 15px rgba(50,20,10,.3),
inset 7px 4px 10px rgba(255,255,255,.15);
}

.fish-body::before{
content:"";
position:absolute;
inset:8px 18px;
border-radius:50%;
background:
repeating-linear-gradient(
105deg,
transparent 0 9px,
rgba(255,230,180,.15) 10px 12px
);
}

.fish-eye{
position:absolute;
right:12px;
top:17px;
width:13px;
height:13px;
border-radius:50%;
background:
radial-gradient(
circle at 35% 30%,
white 0 15%,
#151515 18% 60%,
#000 62%
);
box-shadow:0 0 5px rgba(255,255,255,.3);
}

.fish-tail{
position:absolute;
left:0;
top:16px;
width:48px;
height:70px;
clip-path:polygon(100% 50%,0 0,12% 50%,0 100%);
background:
linear-gradient(
135deg,
#9b5d36,
#4b3025
);
filter:drop-shadow(0 3px 3px rgba(0,0,0,.2));
}

.fish-fin{
position:absolute;
width:48px;
height:25px;
background:
linear-gradient(
145deg,
rgba(180,115,70,.9),
rgba(70,40,30,.7)
);
clip-path:polygon(0 100%,50% 0,100% 100%);
}

.fish-fin.top{
left:55px;
top:0;
transform:rotate(-12deg);
}

.fish-fin.bottom{
left:52px;
bottom:0;
transform:rotate(12deg);
}

.fish-gill{
position:absolute;
left:35px;
top:17px;
width:20px;
height:28px;
border-right:2px solid rgba(70,30,20,.35);
border-radius:50%;
}




.shark-body{
position:absolute;
left:25px;
top:30px;
width:170px;
height:62px;

border-radius:
65% 45% 45% 65% /
55% 55% 45% 45%;

background:

linear-gradient(
180deg,
#6e8790 0%,
#3c555f 48%,
#d6e2e2 50%,
#aebfc2 75%,
#71888e 100%
);

box-shadow:
inset -18px -8px 18px rgba(0,20,30,.25),
inset 8px 5px 12px rgba(255,255,255,.12);
}

.shark-snout{
position:absolute;
left:0;
top:13px;
width:45px;
height:36px;
background:
linear-gradient(
180deg,
#627b84,
#d2dede
);
clip-path:polygon(100% 0,100% 100%,0 62%,18% 48%,0 34%);
}

.shark-eye{
position:absolute;
left:43px;
top:17px;
width:9px;
height:9px;
border-radius:50%;
background:#050708;
box-shadow:
0 0 0 2px rgba(210,235,238,.35),
0 0 6px rgba(150,230,240,.3);
}

.shark-gill{
position:absolute;
left:57px;
top:17px;
width:20px;
height:28px;
border-left:2px solid rgba(15,35,42,.45);
border-radius:50%;
transform:rotate(-15deg);
}

.shark-fin-top{
position:absolute;
left:90px;
top:-30px;
width:45px;
height:42px;
background:
linear-gradient(
145deg,
#3b5159,
#6b858c
);
clip-path:polygon(0 100%,55% 0,100% 100%);
}

.shark-fin-bottom{
position:absolute;
left:94px;
bottom:-20px;
width:35px;
height:28px;
background:#536c73;
clip-path:polygon(0 0,70% 100%,100% 0);
}

.shark-tail{
position:absolute;
right:-30px;
top:-9px;
width:58px;
height:78px;
background:
linear-gradient(
145deg,
#4b626a,
#718a90
);
clip-path:polygon(
50% 50%,
100% 0,
85% 47%,
100% 100%
);
}

.shark-mouth{
position:absolute;
left:7px;
bottom:10px;
width:38px;
height:12px;
border-bottom:2px solid rgba(20,25,25,.65);
border-radius:50%;
}

.shark-teeth{
position:absolute;
left:9px;
bottom:5px;
width:33px;
height:8px;
display:flex;
gap:3px;
}

.shark-tooth{
width:4px;
height:7px;
background:#f1f3eb;
clip-path:polygon(0 0,100% 0,50% 100%);
}



.ocean-speck{
position:fixed;
width:4px;
height:4px;
border-radius:50%;
background:rgba(215,250,255,.65);
box-shadow:0 0 8px rgba(100,225,255,.5);
animation:speck-drift 6s ease-in-out infinite;
pointer-events:none;
z-index:2;
}

.s1{
left:12%;
top:35%;
}

.s2{
left:35%;
top:75%;
animation-delay:-2s;
}

.s3{
right:28%;
top:42%;
animation-delay:-4s;
}

.s4{
right:10%;
top:80%;
animation-delay:-1s;
}

.s5{
left:50%;
top:22%;
animation-delay:-3s;
}

@keyframes speck-drift{

0%,100%{
transform:translate(0,0);
opacity:.2;
}

50%{
transform:translate(10px,-18px);
opacity:.8;
}

}




@keyframes creature-float-one{

0%,100%{
transform:translate(0,0) rotate(-2deg);
}

25%{
transform:translate(18px,-22px) rotate(3deg);
}

50%{
transform:translate(-5px,-42px) rotate(-3deg);
}

75%{
transform:translate(-20px,-15px) rotate(2deg);
}

}

@keyframes creature-float-two{

0%,100%{
transform:translate(0,0) rotate(2deg);
}

30%{
transform:translate(-20px,-18px) rotate(-4deg);
}

60%{
transform:translate(15px,-35px) rotate(3deg);
}

80%{
transform:translate(25px,-10px) rotate(0deg);
}

}

@keyframes fish-swim{

0%{
transform:translateX(0) translateY(0) scaleX(1);
}

25%{
transform:translateX(-45px) translateY(-15px) scaleX(1);
}

49%{
transform:translateX(-110px) translateY(8px) scaleX(1);
}

50%{
transform:translateX(-110px) translateY(8px) scaleX(-1);
}

75%{
transform:translateX(-40px) translateY(-20px) scaleX(-1);
}

100%{
transform:translateX(0) translateY(0) scaleX(-1);
}

}

@keyframes shark-swim{

0%,100%{
transform:translateX(0) translateY(0) rotate(1deg);
}

25%{
transform:translateX(55px) translateY(-25px) rotate(-2deg);
}

50%{
transform:translateX(125px) translateY(10px) rotate(2deg);
}

75%{
transform:translateX(60px) translateY(25px) rotate(-1deg);
}

}




@media(max-width:600px){

.jelly-doll{
transform:scale(.65);
transform-origin:left top;
left:0;
top:16%;
}

.kraken-doll{
transform:scale(.6);
transform-origin:right top;
right:-35px;
top:58%;
}

.fish-doll{
transform:scale(.6);
transform-origin:right top;
right:-35px;
top:14%;
}

.shark-doll{
transform:scale(.55);
transform-origin:left top;
left:-35px;
top:78%;
}

}


@media(prefers-reduced-motion:reduce){

.sea-creature,
.bubble,
.ocean-speck,
.jelly-arm{
animation:none !important;
}

}

</style>




<div class="ocean-dolls">


<!-- BUBBLES -->

<div class="ocean-bubbles">

<div class="bubble b1"></div>
<div class="bubble b2"></div>
<div class="bubble b3"></div>
<div class="bubble b4"></div>
<div class="bubble b5"></div>
<div class="bubble b6"></div>
<div class="bubble b7"></div>
<div class="bubble b8"></div>
<div class="bubble b9"></div>

</div>




<div class="sea-creature jelly-doll">

<div class="jelly-dome">

<div class="jelly-speck js1"></div>
<div class="jelly-speck js2"></div>
<div class="jelly-speck js3"></div>

<div class="jelly-organ"></div>

<div class="jelly-rim"></div>

</div>


<div class="jelly-tentacles">

<i class="jelly-arm"></i>
<i class="jelly-arm"></i>
<i class="jelly-arm"></i>
<i class="jelly-arm"></i>
<i class="jelly-arm"></i>
<i class="jelly-arm"></i>

</div>

</div>



<div class="sea-creature kraken-doll">

<div class="kraken-head">

<div class="kraken-eye left"></div>
<div class="kraken-eye right"></div>
<div class="kraken-mouth"></div>

</div>


<div class="kraken-tentacles">

<i class="kraken-arm ka1"></i>
<i class="kraken-arm ka2"></i>
<i class="kraken-arm ka3"></i>
<i class="kraken-arm ka4"></i>
<i class="kraken-arm ka5"></i>
<i class="kraken-arm ka6"></i>

</div>

</div>




<div class="sea-creature fish-doll">

<div class="fish-tail"></div>

<div class="fish-body">

<div class="fish-eye"></div>
<div class="fish-gill"></div>

<div class="fish-fin top"></div>
<div class="fish-fin bottom"></div>

</div>

</div>




<div class="sea-creature shark-doll">

<div class="shark-body">

<div class="shark-snout"></div>

<div class="shark-eye"></div>

<div class="shark-gill"></div>

<div class="shark-fin-top"></div>

<div class="shark-fin-bottom"></div>

<div class="shark-tail"></div>

<div class="shark-mouth"></div>

<div class="shark-teeth">

<i class="shark-tooth"></i>
<i class="shark-tooth"></i>
<i class="shark-tooth"></i>
<i class="shark-tooth"></i>
<i class="shark-tooth"></i>
<i class="shark-tooth"></i>

</div>

</div>

</div>




<span class="ocean-speck s1"></span>
<span class="ocean-speck s2"></span>
<span class="ocean-speck s3"></span>
<span class="ocean-speck s4"></span>
<span class="ocean-speck s5"></span>


</div>

 <style>




@media (max-width:575px){




body {

    background-attachment:scroll!important;

    overflow-x:hidden!important;

}


.profile-page-flex {

    width:100%!important;

    padding:8px!important;

    display:flex!important;

    flex-direction:column!important;

}






.pp-uc-background,
.profile-uc-background-flex {


    width:100%!important;

    max-width:100%!important;

    margin:0 auto!important;

    border-radius:20px!important;

    padding:15px!important;

}






.profile-info-hstack {


    flex-direction:column!important;

    justify-content:center!important;

    align-items:center!important;


}


.profile-info-stack-inner {


    width:100%!important;

    text-align:center!important;

    align-items:center!important;


}



.pp-uc-avatar-container {


    width:120px!important;

    height:120px!important;

    margin:15px auto!important;


}


.pp-uc-title {


    font-size:22px!important;

    letter-spacing:1px!important;


}






.pp-uc-about-me {


    width:100%!important;

    padding:18px!important;

    margin:20px auto!important;

    border-radius:20px!important;


}


.pp-uc-about-me p {


    font-size:14px!important;

    line-height:1.6!important;


}







.pp-uc-about-me + div {


    flex-wrap:wrap!important;

    gap:10px!important;

}



.Btn {


    max-width:100%!important;

    padding:9px 18px!important;

}








.profile-top-bar-flex-outer,
.pp-top-bar-outer,
header {


    overflow:hidden!important;

}



.pp-top-bar,
.profile-top-bar {


    padding:5px!important;

}



.glow-logo,
.pp-top-bar-logo {


    border-radius:12px!important;


    transform:scale(.85);


}





.pp-top-bar-search,
.profile-top-bar-search,
.search-input {


    max-width:45vw!important;

    border-radius:20px!important;


}








.pp-cc-list-container {


    width:100%!important;

    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

    gap:20px!important;


}



.pp-cc-wrapper {


    width:95%!important;

    max-width:95%!important;

    height:auto!important;

    min-height:430px!important;

    border-radius:22px!important;


}








.css-1s5evre {


    display:grid!important;


    grid-template-columns:

    1fr!important;


    grid-template-rows:

    200px auto auto auto!important;


}





.css-1q7rmf0 {


    grid-area:1 / 1 / 2 / 2!important;


    height:200px!important;

    margin:10px!important;


}



.pp-cc-avatar {


    border-radius:18px!important;


}




.css-199gcrh {


    grid-area:2 / 1 / 3 / 2!important;


    max-height:120px!important;

    margin:10px!important;


}




.pp-cc-tags {


    grid-area:3 / 1 / 4 / 2!important;

    justify-content:center!important;


}





.css-nlxhw4 {


    grid-area:4 / 1 / 5 / 2!important;


    justify-content:center!important;


    padding:10px!important;


}




.pp-cc-name {


    font-size:18px!important;


}







.css-10cv7r2 {


    top:12px!important;

    right:12px!important;


}



.pp-cc-ribbon-wrap {


    padding:6px 12px!important;

    font-size:12px!important;


}







.pp-cc-creator-name {


    display:none!important;


}




}






@media(max-width:380px){


.pp-cc-wrapper {


    min-height:400px!important;


}


.pp-top-bar-search {


    display:none!important;


}



.pp-uc-title {


    font-size:20px!important;


}


}


body {
    background:
    linear-gradient(
        180deg,
        rgba(0,15,35,0.75),
        rgba(0,45,70,0.65)
    ),
    var(--profile-background-image);

    background-size: cover;
    background-attachment: fixed;
    color: #d9f7ff;
}




.profile-page-background::after {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;

    background:
    radial-gradient(
        circle at 50% 20%,
        rgba(0,220,255,.12),
        transparent 40%
    );

    z-index:-1;
}





.profile-page-flex {

    display:flex;
    flex-direction:column;

}




.profile-page-flex > div:first-child {

    order:1;

    width:100%;

    margin-bottom:40px;

}




.profile-page-flex > div:nth-child(2){

    order:2;

}






.pp-uc-background,
.profile-uc-background-flex {

    background:
    linear-gradient(
        145deg,
        rgba(0,30,55,.85),
        rgba(0,90,120,.55)
    ) !important;


    border:

    2px solid rgba(0,220,255,.35);


    border-radius:25px;


    box-shadow:

    0 0 35px rgba(0,200,255,.25),
    inset 0 0 30px rgba(0,120,180,.25);


    backdrop-filter:blur(12px);

}





.pp-uc-background::before {

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:25px;


    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(0,220,255,.8),
        transparent
    );


    opacity:.35;

    pointer-events:none;

}






.pp-uc-avatar-container {


    border-radius:50%;


    padding:8px;


    background:

    linear-gradient(
    135deg,
    #00d9ff,
    #003b55
    );


    box-shadow:

    0 0 35px rgba(0,220,255,.7);

}


.pp-uc-avatar {

    border-radius:50%;

}






.pp-uc-title {


    color:#e8fbff !important;


    text-shadow:

    0 0 10px #00d9ff,
    0 0 25px #008cff;


    letter-spacing:3px;


    text-transform:uppercase;

}






.pp-uc-about-me {


    background:

    rgba(0,25,45,.65);


    border:

    1px solid rgba(0,220,255,.25);


    border-radius:20px;


    padding:25px;


    box-shadow:

    inset 0 0 25px rgba(0,160,220,.2);


}




.pp-uc-about-me p {


    color:#d8f8ff;


    font-family:

    "Trebuchet MS",
    sans-serif;


    line-height:1.7;

}






.Btn {


    background:

    linear-gradient(
    135deg,
    #008fb8,
    #00334d
    ) !important;


    border:

    1px solid #00d9ff !important;


    color:white !important;


    box-shadow:

    0 0 15px rgba(0,220,255,.5);

}


.Btn:hover {


    transform:translateY(-3px);


    box-shadow:

    0 0 30px rgba(0,220,255,.9);

}






#profile-tabs {


    background:

    rgba(0,25,45,.75);


    border-radius:18px;


    border:

    1px solid rgba(0,220,255,.3);


}





.pp-tabs-button {


    color:#bdefff !important;


}


.pp-tabs-button[aria-selected="true"] {


    background:

    linear-gradient(
    90deg,
    #005577,
    #00cfff
    ) !important;


    box-shadow:

    0 0 20px #00d9ff;

}






.profile-filters-flex-inner {


    background:

    rgba(0,25,45,.65);


    padding:10px;


    border-radius:18px;


    border:

    1px solid rgba(0,220,255,.25);

}



.profile-character-search-input {


    background:

    rgba(0,10,25,.8)!important;


    border:

    1px solid #00cfff!important;


    color:white!important;

}









.profile-member-since-box {


    opacity:.55;

}





.profile-character-card-creator-name-box {


    color:#7deaff;

}





@media(max-width:575px){


.profile-page-flex {


    padding:10px;

}



.pp-uc-background {


    border-radius:18px;

}


.pp-uc-about-me {


    padding:15px;

}



.pp-uc-title {


    font-size:24px;

}


}







.profile-top-bar-flex-outer,
.pp-top-bar-outer,
header {


    background:

    linear-gradient(
        180deg,
        rgba(0,20,40,.92),
        rgba(0,60,85,.75)
    ) !important;


    border-bottom:

    1px solid rgba(0,220,255,.35);


    box-shadow:

    0 10px 35px rgba(0,180,255,.25);


    backdrop-filter:

    blur(15px);


}





.profile-top-bar-flex-outer::after {


    content:"";


    position:absolute;


    bottom:-2px;


    left:10%;


    width:80%;


    height:2px;


    background:


    linear-gradient(
    90deg,
    transparent,
    #00d9ff,
    transparent
    );


    box-shadow:

    0 0 20px #00d9ff;

}






.glow-logo,
.pp-top-bar-logo {


    background:


    linear-gradient(
    135deg,
    rgba(0,180,255,.25),
    rgba(0,40,70,.8)
    ) !important;


    border:


    1px solid rgba(0,220,255,.5);


    border-radius:18px;


    box-shadow:


    0 0 20px rgba(0,220,255,.4),
    inset 0 0 20px rgba(0,120,180,.3);


}



.glow-logo h2 {


    color:#e9fcff !important;


    text-shadow:


    0 0 10px #00d9ff;


    letter-spacing:3px;


}



.glow-logo p {


    color:#66eaff !important;


}







.pp-top-bar-search,
.profile-top-bar-search,
.search-input,
._inputContainer_1d69i_26 {


    background:


    rgba(0,20,35,.85) !important;


    border:


    1px solid rgba(0,210,255,.45)!important;


    border-radius:25px !important;


    box-shadow:


    inset 0 0 15px rgba(0,120,180,.3),
    0 0 15px rgba(0,220,255,.15);



}



#search-input {


    color:#dfffff!important;


}



#search-input::placeholder {


    color:#73cfe8!important;


    letter-spacing:1px;


}






.pp-top-bar-search:hover {


    border-color:#00eaff!important;


    box-shadow:


    0 0 25px rgba(0,220,255,.5);


}






.glow-on-hover {


    background:


    linear-gradient(
    135deg,
    #007da8,
    #002b45
    ) !important;


    border:


    1px solid #00d9ff!important;


    border-radius:18px!important;


    box-shadow:


    0 0 20px rgba(0,220,255,.4);


}



.glow-on-hover:hover {


    box-shadow:


    0 0 35px #00d9ff!important;


    transform:

    translateY(-2px);


}






[aria-label="Notifications"] {


    background:


    rgba(0,50,75,.8)!important;


    border-radius:50%;


    border:


    1px solid rgba(0,220,255,.35);


    box-shadow:


    0 0 15px rgba(0,220,255,.25);


}



[aria-label="Notifications"]:hover {


    box-shadow:


    0 0 30px #00d9ff;


}






.css-rvct59 {


    background:


    rgba(0,35,55,.8);


    border-radius:50%;


    border:


    1px solid rgba(0,220,255,.4);


}



.css-rvct59:hover {


    box-shadow:


    0 0 25px #00d9ff;


}






.css-mzi0gq {


    background:


    linear-gradient(
    180deg,
    rgba(0,25,45,.95),
    rgba(0,70,90,.9)
    )!important;


    border:


    1px solid rgba(0,220,255,.35);


    border-radius:20px!important;


    box-shadow:


    0 0 40px rgba(0,220,255,.3);



}


.css-15hrz07 a {


    color:#cfffff!important;


}



.css-15hrz07 a:hover {


    background:


    rgba(0,220,255,.15)!important;


    color:white!important;


}






@media(max-width:575px){


.pp-top-bar,
.profile-top-bar {


    background:


    rgba(0,30,50,.95)!important;


    border-bottom:

    1px solid #00d9ff;


}



.pp-top-bar-title {


    color:#dfffff!important;


    text-shadow:

    0 0 10px #00d9ff;


}


}







.profile-top-bar-flex-outer,
.pp-top-bar-outer,
header {


    background:

    linear-gradient(
        180deg,
        rgba(0,25,45,.95),
        rgba(0,70,95,.75)
    ) !important;


    backdrop-filter:blur(15px);


    border-bottom:

    2px solid rgba(0,220,255,.35);


    box-shadow:

    0 5px 30px rgba(0,200,255,.25);



}





header::after {


    content:"";


    position:absolute;


    bottom:-3px;


    left:10%;


    width:80%;


    height:3px;


    background:

    linear-gradient(
    90deg,
    transparent,
    #00d9ff,
    transparent
    );


    box-shadow:

    0 0 20px #00d9ff;


}






.glow-logo,
.pp-top-bar-logo {


    background:

    linear-gradient(
    145deg,
    rgba(0,80,110,.8),
    rgba(0,20,40,.9)
    ) !important;


    border:

    1px solid rgba(0,220,255,.4);


    border-radius:18px;


    box-shadow:

    0 0 20px rgba(0,220,255,.4),
    inset 0 0 15px rgba(0,150,200,.3);



}



.glow-logo h2 {


    color:#e9fbff !important;


    text-shadow:

    0 0 10px #00d9ff;


    letter-spacing:3px;


}



.glow-logo p {


    color:#57eaff !important;

}






.pp-top-bar-search,
.profile-top-bar-search,
.search-input {


    background:

    rgba(0,20,35,.85) !important;


    border:

    1px solid rgba(0,220,255,.45);


    border-radius:30px !important;


    color:#dffaff !important;


    box-shadow:

    inset 0 0 15px rgba(0,150,220,.25),
    0 0 15px rgba(0,220,255,.15);



}






.pp-top-bar-search:focus-within {


    border-color:#00eaff;


    box-shadow:

    0 0 25px #00d9ff,
    inset 0 0 20px rgba(0,220,255,.3);


}






.pp-top-bar-search-icon svg {


    color:#00d9ff !important;


    filter:

    drop-shadow(0 0 5px #00d9ff);

}






.pp-top-bar-create-char,
.profile-top-bar-create-char {


    background:

    linear-gradient(
    135deg,
    #00b7d9,
    #00435c
    ) !important;


    border:

    1px solid #7ef4ff !important;


    border-radius:20px !important;


    color:white !important;


    text-transform:uppercase;


    letter-spacing:2px;


    box-shadow:

    0 0 20px rgba(0,220,255,.5);



}



.pp-top-bar-create-char:hover {


    transform:

    translateY(-2px);


    box-shadow:

    0 0 35px #00d9ff;


}






[aria-label="Notifications"] {


    background:

    rgba(0,35,55,.8);


    border-radius:50%;


    border:

    1px solid rgba(0,220,255,.35);


    box-shadow:

    0 0 15px rgba(0,220,255,.3);



}


[aria-label="Notifications"] svg {


    color:#7eefff !important;


}






[class*="notificationsBadge_"] {


    background:#00eaff !important;


    box-shadow:

    0 0 10px #00eaff;


}






.profile-top-bar-app-menu,
.pp-top-bar-app-menu {


    background:

    linear-gradient(
    145deg,
    rgba(0,50,75,.95),
    rgba(0,15,30,.95)
    );


    border:

    1px solid rgba(0,220,255,.4);


    border-radius:18px;


    box-shadow:

    0 0 30px rgba(0,200,255,.3);



}






.pp-top-bar-app-menu-list a {


    color:#d9faff !important;


    border-radius:12px;


}



.pp-top-bar-app-menu-list a:hover {


    background:

    rgba(0,220,255,.15);


    box-shadow:

    inset 0 0 15px rgba(0,220,255,.25);


}






@media(max-width:575px){


.pp-top-bar,
.profile-top-bar {


    background:

    rgba(0,25,45,.95)!important;


    border-bottom:

    1px solid #00d9ff;


}



}







.pp-cc-list-container {

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:35px;

}






.pp-cc-wrapper {


    flex:0 1 420px;


    width:420px;


    height:300px;


    background:

    linear-gradient(
        135deg,
        rgba(0,45,70,.85),
        rgba(0,15,30,.95)
    ) !important;


    border:

    1px solid rgba(0,220,255,.35);


    border-radius:25px;


    overflow:hidden;


    position:relative;


    transition:.35s ease;



    box-shadow:


    0 0 25px rgba(0,200,255,.25),
    inset 0 0 30px rgba(0,120,180,.25);



}






.pp-cc-wrapper:hover {


    transform:

    translateY(-10px)
    scale(1.03);


    border-color:#00eaff;


    box-shadow:


    0 0 45px rgba(0,220,255,.65),
    inset 0 0 40px rgba(0,220,255,.25);


}







.pp-cc-wrapper>*:not(.css-1s5evre){

    background:transparent!important;

}






.css-1s5evre {


    display:grid;


    grid-template-columns:

    45% 55%;


    grid-template-rows:

    55% 25% 20%;


    height:100%;


    gap:0;



}




.css-1s5evre a {


    display:contents;

}






.css-1q7rmf0 {


    grid-area:

    1 / 1 / 4 / 2;


    margin:12px;


    border-radius:20px;


    overflow:hidden;


    position:relative;



}






.css-1q7rmf0::after {


    content:"";


    position:absolute;


    inset:0;


    background:


    linear-gradient(
    120deg,
    transparent,
    rgba(0,220,255,.25),
    transparent
    );


}






.pp-cc-avatar {


    width:100%;

    height:100%;


    object-fit:cover;


    border-radius:18px;


}







.css-199gcrh {


    grid-area:

    1 / 2 / 2 / 3;


    padding:

    15px;


    margin:10px;


    overflow:auto;


    background:

    rgba(0,25,40,.55);



    border-radius:15px;


    border-left:

    2px solid rgba(0,220,255,.5);



}


.css-199gcrh p {


    color:#d8f8ff;


    font-size:13px;


    line-height:1.5;



}






.pp-cc-tags {


    grid-area:

    2 / 2 / 3 / 3;


    display:flex;


    flex-wrap:wrap;


    gap:6px;


    padding:10px;


    overflow:auto;



}



.pp-cc-tags span {


    background:


    rgba(0,180,220,.15);


    border:


    1px solid rgba(0,220,255,.45);


    border-radius:20px;


    padding:5px 12px;


    color:#bff5ff;



}







.css-nlxhw4 {


    grid-area:

    3 / 1 / 4 / 3;


    display:flex;


    align-items:center;


    padding-left:20px;


    z-index:3;



}



.pp-cc-name {


    color:white!important;


    font-size:22px!important;


    letter-spacing:2px;


    text-transform:uppercase;


    text-shadow:


    0 0 10px #00d9ff;



}







.pp-cc-star-line {


    display:none;

}







.pp-cc-creator-name {


    position:absolute;


    bottom:8px;


    right:20px;


    opacity:.6;


    color:#8befff!important;


}






.css-10cv7r2 {


    position:absolute;


    top:15px;


    right:15px;


    width:auto;



}



.pp-cc-ribbon {


    filter:none;


}



.pp-cc-ribbon-wrap {


    clip-path:none;


    padding:8px 15px;


    border-radius:20px;


    background:


    linear-gradient(
    135deg,
    #00d9ff,
    #00435c
    );


    box-shadow:


    0 0 20px rgba(0,220,255,.7);



}



.pp-cc-chats {


    color:white;

}






.css-1c9wmts {


    display:none;

}






@media(max-width:575px){


.pp-cc-wrapper {


    width:95%;

    height:280px;


}


.css-1s5evre {


    grid-template-columns:

    40% 60%;


}



}







.profile-page-flex > div:first-child {

    display:flex;

    justify-content:center;

}






.pp-uc-background,
.profile-uc-background-flex {


    max-width:900px!important;


    width:90%!important;


    margin:auto!important;


    text-align:center;



}






.profile-info-stack,
.profile-info-wrapper-box {


    display:flex!important;


    flex-direction:column;


    align-items:center;


    text-align:center;



}






.pp-uc-avatar-container {


    margin:

    20px auto!important;


    width:170px!important;


    height:170px!important;


}



.pp-uc-avatar {


    border-radius:50%;


    border:

    3px solid #00ddff;


    box-shadow:


    0 0 30px #00d9ff,
    0 0 80px rgba(0,220,255,.4);



}






.profile-info-hstack {


    justify-content:center!important;


    width:100%;


}



.pp-uc-title {


    text-align:center!important;


    font-size:34px!important;


}






.profile-info-stack-inner {


    align-items:center!important;


    text-align:center!important;


}






.pp-uc-about-me {


    margin:

    30px auto!important;


    width:

    min(750px,90%)!important;


    text-align:center!important;


    padding:35px!important;


    background:


    linear-gradient(

        145deg,

        rgba(0,55,80,.75),

        rgba(0,15,30,.85)

    )!important;



    border-radius:30px!important;


    border:

    1px solid rgba(0,220,255,.5)!important;



    box-shadow:


    0 0 35px rgba(0,220,255,.25),


    inset 0 0 40px rgba(0,130,180,.25);



    position:relative;


}






.pp-uc-about-me::before {


    content:"";


    position:absolute;


    top:12px;


    left:15%;


    width:70%;


    height:2px;


    background:


    linear-gradient(

    90deg,

    transparent,

    #00d9ff,

    transparent

    );


    box-shadow:

    0 0 15px #00d9ff;


}






.pp-uc-about-me::after {


    content:"";


    position:absolute;


    bottom:12px;


    left:15%;


    width:70%;


    height:2px;


    background:


    linear-gradient(

    90deg,

    transparent,

    #007fa8,

    transparent

    );


}






.pp-uc-about-me p {


    color:#dffaff!important;


    font-size:15px;


    line-height:1.8;


    letter-spacing:.5px;


}






.pp-uc-about-me p:first-letter {


    color:#00eaff;


    font-size:30px;


}






.pp-uc-about-me + div {


    justify-content:center!important;


}



.Btn {


    border-radius:25px!important;


    padding:

    10px 30px!important;


}






@media(max-width:575px){


.pp-uc-about-me {


    width:95%!important;


    padding:22px!important;


}


.pp-uc-title {


    font-size:26px!important;


}



}





 </style>

<div class="shark-mobile-container">

  <div class="shark-about">


<div class="ocean-decoration bubble one"></div>
<div class="ocean-decoration bubble two"></div>
<div class="ocean-decoration bubble three"></div>



<div class="shark-header">

<div class="shark-icon">

🦈

</div>


<h1>
ABOUT ME
</h1>


<div class="subtitle">

WELCOME TO MY OCEAN

</div>

</div>



<div class="glass-panel">


<div class="inner-frame">


<div class="seaweed left"></div>
<div class="seaweed right"></div>



<div class="about-scroll">


<p>
🌊 Hello and welcome!
</p>


<p>
Text
</p>


<p>
text
</p>


<p>
text
</p>


<p>
Text
</p>


<div class="ocean-quote">

"deep text..."

</div>



</div>


</div>


</div>



<img class="shark-sticker" src="YOUR_CHIBI_SHARK.png">


</div>







  <div class="shark-intel">


<div class="shark-header">

<div class="shark-fin">
𒅋
</div>

<h1>
𓆝 BOTS 𓆝
</h1>

<p>
cool text
</p>

</div>



<div class="intel-box">


<div class="intel-title">
🌊 ABOUT MY BOTS
</div>


<p>
insert some cool text here, lol
</p>


<p>
Dive in, explore and have fun!
</p>


</div>




<div class="rules-grid">



<div class="rule-box do-box">

<h2>
✓ DO
</h2>


<div class="scroll-text">

<p>
✦ Idk
</p>

<p>
✦ cool text
</p>

<p>
✦ cool text
</p>

<p>
✦ idk bro
</p>

<p>
✦ Respect other users
</p>


</div>


</div>





<div class="rule-box dont-box">


<h2>
✕ DON'T
</h2>


<div class="scroll-text">

<p>
✦ Don't steal my bots
</p>

<p>
✦ Don't repost my work
</p>

<p>
✦ Don't copy my CSS / designs
</p>

<p>
✦ Don't harass others
</p>

<p>
✦ Don't misuse characters
</p>


</div>


</div>



</div>





<div class="category-box">


<div class="category-title">

𓆟 Tags 𓆟

</div>




<div class="bubble-scroll">


<a href="YOUR_LINK" class="ocean-tag">
Tag
</a>


<a href="YOUR_LINK" class="ocean-tag">
Tag
</a>


<a href="YOUR-LINK" class="ocean-tag">
Tag
</a>


<a href="YOUR_LINK" class="ocean-tag">
Tag
</a>


<a href="YOUR_LINK" class="ocean-tag">
Tag
</a>


<a href="YOUR_LINK" class="ocean-tag">
Tag
</a>


</div>


</div>





<div class="shark-note">

<div class="bubble">

𓆝.°•

</div>


<p>

Random ass cool Text 67

</p>


<div class="shark-sticker">

<img src="YOUR_CHIBI_SHARK.png">

</div>


</div>




</div>







  <div class="shark-friends">


<div class="ocean-header">

<div class="shark-symbol">
🦈
</div>

<h1>
✦ FRIENDS OF THE OCEAN ✦
</h1>

<p>
deep sea companions
</p>

</div>



<div class="friend-scroll">





<a href="YOUR_LINK" class="friend-card">


<div class="bubble b1"></div>
<div class="bubble b2"></div>


<div class="friend-image">

<img src="FRIEND_IMAGE">

</div>


<div class="friend-info">

<h2>
Friend Name
</h2>

<span>
🌊 Ocean Buddy
</span>

</div>


</a>






<a href="YOUR_LINK" class="friend-card">


<div class="friend-image">

<img src="FRIEND_IMAGE">

</div>


<div class="friend-info">

<h2>
Friend Name
</h2>

<span>
🫧 Deep Sea Friend
</span>

</div>


</a>







<a href="YOUR_LINK" class="friend-card">


<div class="friend-image">

<img src="FRIEND_IMAGE">

</div>


<div class="friend-info">

<h2>
Friend Name
</h2>

<span>
🪸 Coral Crew
</span>

</div>


</a>





</div>


</div>






  <div class="creator-ocean">


<h1 class="creator-title">

✦ Creators I Like ✦

</h1>


<div class="shark-sub">

🫧 little creators I enjoy 🫧

</div>



<div class="creator-scroll">





<a href="https://janitorai.com/de/profiles/f45bb53c-a8b1-4e76-bb24-5272465c5ba8_profile-of-the-only-eclipse" class="creator-card">


<div class="bubble bubble-one"></div>
<div class="bubble bubble-two"></div>


<img class="creator-bg" src="https://file.garden/aiC60naSGigyN1kn/Gallery/Eclipse%20backround">


<img class="creator-avatar" src="https://ella.janitorai.com/avatars/hlYMg-U6JDE4WSxUYiMsn.webp?width=600">


<div class="creator-info">

<h2>
Eclipse
</h2>

<p>
@THEONLY_ECLIPSE
</p>

</div>


</a>






<a href="YOUR_LINK_HERE" class="creator-card">


<div class="bubble bubble-one"></div>
<div class="bubble bubble-two"></div>


<img class="creator-bg" src="YOUR_BACKGROUND_IMAGE">


<img class="creator-avatar" src="CREATOR_IMAGE">


<div class="creator-info">

<h2>
Creator Name
</h2>

<p>
@username
</p>

</div>


</a>







<a href="YOUR_LINK_HERE" class="creator-card">


<div class="bubble bubble-one"></div>
<div class="bubble bubble-two"></div>


<img class="creator-bg" src="YOUR_BACKGROUND_IMAGE">


<img class="creator-avatar" src="CREATOR_IMAGE">


<div class="creator-info">

<h2>
Creator Name
</h2>

<p>
@username
</p>

</div>


</a>




</div>


</div>







<div class="shark-status">


<details>

<summary>

<div class="status-header">

<div class="shark-icon">
🦈
</div>


<div>

<h2>
CURRENT STATUS
</h2>

<p>
tap to open
</p>

</div>

</div>

</summary>



<div class="status-content">


<div class="ocean-line">
〰 〰 〰
</div>


<h3>
✦ Deep Sea Update ✦
</h3>


<p>
🌊 Text
</p>


<p>
🦈 Smexy ass Text
</p>


<p>
🐚 Teeeext
</p>


<p>
⚓ Text
</p>


<div class="ocean-line">
〰 〰 〰
</div>


<span class="status-footer">
Status:  ♡
</span>


</div>


</details>

</div>








<div class="series-ocean">


<h1 class="ocean-title">

𓆝 𝑺𝒆𝒓𝒊𝒆𝒔 𓆝

</h1>

<div class="ocean-subtitle">
Explore the depths
</div>



<div class="bubble-scroll">



<div class="series-bubble">


<div class="bubble-inner">



<div class="bubble-front">

<div class="bubble-shine"></div>

<h2>
 ABC Series
</h2>

<div class="bubble-icon">
𓆟
</div>

</div>




<div class="bubble-back">


<h3>
ABC Series
</h3>


<div class="series-text">

scroll <br>
  scroll <br>
  scroll <br>
  scroll <br>
  scroll <br>
  scroll <br>
  scroll <br>
  scroll <br>
<br><br>



</div>


<a href="#">

DIVE

</a>


</div>


</div>


</div>



<div class="series-bubble">


<div class="bubble-inner">



<div class="bubble-front">

<div class="bubble-shine"></div>

<h2>
 ABCD Series
</h2>

<div class="bubble-icon">
𓆟
</div>

</div>






<div class="bubble-back">


<h3>
ABCD Series
</h3>


<div class="series-text">

scroll <br>
  scroll <br>
  scroll <br>
  scroll <br>
  scroll <br>
  scroll <br>
  scroll <br>
  scroll <br>
<br><br>



</div>


<a href="#">

DIVE

</a>


</div>


</div>


</div>



<div class="series-bubble">


<div class="bubble-inner">



<div class="bubble-front">

<div class="bubble-shine"></div>

<h2>
 ABCDE Series
</h2>

<div class="bubble-icon">
𓆟
</div>

</div>




<div class="bubble-back">


<h3>
ABCDE Series
</h3>


<div class="series-text">

scroll <br>
  scroll <br>
  scroll <br>
  scroll <br>
  scroll <br>
  scroll <br>
  scroll <br>
  scroll <br>
<br><br>



</div>


<a href="#">

DIVE

</a>


</div>


</div>


</div>



.




</div>


</div>



  <div class="ocean-gallery">


<div class="gallery-frame">


<div class="shark-header">

<div class="shark-icon">
🦈
</div>

<h1>
✦ Deep Sea Gallery ✦
</h1>

<p>
underwater memories
</p>

</div>



<div class="bubble bubble1"></div>
<div class="bubble bubble2"></div>
<div class="bubble bubble3"></div>



<img class="sea-sticker left-sticker" src="YOUR_SHARK_STICKER">

<img class="sea-sticker right-sticker" src="YOUR_SHARK_STICKER">



<div class="gallery-scroll">



<div class="sea-photo">

<img src="IMAGE_1">

<div class="specimen-tag">
 #001
</div>

</div>



<div class="sea-photo">

<img src="IMAGE_2">

<div class="specimen-tag">
 #002
</div>

</div>



<div class="sea-photo">

<img src="IMAGE_3">

<div class="specimen-tag">
 #003
</div>

</div>



<div class="sea-photo">

<img src="IMAGE_4">

<div class="specimen-tag">
 #004
</div>

</div>



<div class="sea-photo">

<img src="IMAGE_5">

<div class="specimen-tag">
 #005
</div>

</div>



<div class="sea-photo">

<img src="IMAGE_6">

<div class="specimen-tag">
#006
</div>

</div>



</div>


</div>

</div>




  <div class="shark-commission">


<div class="ocean-frame">


<div class="shark-header">

<div class="shark-icon">
🦈
</div>

<h1>
✦ COMMISSIONS ✦
</h1>

<p>
Deep Sea Requests • Open Slots
</p>

</div>



<div class="bubble bubble1"></div>
<div class="bubble bubble2"></div>
<div class="bubble bubble3"></div>



<div class="commission-scroll">



<a href="YOUR_LINK_HERE" class="commission-card">


<div class="file-corner">
*blub*
</div>


<img src="YOUR_IMAGE_HERE">


<div class="commission-info">

<h2>
 Commission
</h2>

<p>
Custom
</p>


<div class="status">

AVAILABLE

</div>


</div>


</a>





<a href="YOUR_LINK_HERE" class="commission-card">


<div class="file-corner">
*blub*
</div>


<img src="YOUR_IMAGE_HERE">


<div class="commission-info">

<h2>
Text
</h2>

<p>
Unique
</p>


<div class="status">

OPEN

</div>


</div>


</a>





<a href="YOUR_LINK_HERE" class="commission-card">


<div class="file-corner">
*Blub*
</div>


<img src="YOUR_IMAGE_HERE">


<div class="commission-info">

<h2>
Text
</h2>

<p>
Something
</p>


<div class="status">

CONTACT

</div>


</div>


</a>




</div>


</div>


</div>









</div>



<style>


.ocean-credit{
  position:relative;
  width:220px;
  height:330px;
  margin:35px auto;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  font-family:Georgia,serif;
  overflow:visible;
}




.ocean-credit::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(150,225,235,.10);
  border-radius:50% 50% 45% 45%;
  pointer-events:none;
}

.ocean-credit::after{
  content:"";
  position:absolute;
  width:180px;
  height:250px;
  top:30px;
  left:20px;
  border-radius:50%;
  border:1px solid rgba(120,220,240,.06);
  pointer-events:none;
}




.credit-jelly{
  position:absolute;
  top:25px;
  left:50%;
  width:150px;
  height:275px;
  transform:translateX(-50%);
  animation:jelly-float 6s ease-in-out infinite;
  filter:
    drop-shadow(0 0 8px rgba(80,210,240,.35))
    drop-shadow(0 0 25px rgba(70,180,220,.18));
}




.jelly-bell{
  position:absolute;
  top:0;
  left:50%;
  width:130px;
  height:88px;
  transform:translateX(-50%);
  border-radius:
    65px 65px 42px 42px /
    72px 72px 35px 35px;

  background:

    radial-gradient(
      ellipse at 50% 15%,
      rgba(255,255,255,.82) 0%,
      rgba(220,250,255,.35) 9%,
      transparent 30%
    ),

    radial-gradient(
      ellipse at 30% 45%,
      rgba(180,245,255,.48),
      transparent 45%
    ),

    radial-gradient(
      ellipse at 75% 55%,
      rgba(80,210,240,.38),
      transparent 50%
    ),

    linear-gradient(
      180deg,
      rgba(190,250,255,.68),
      rgba(70,200,235,.38) 55%,
      rgba(20,125,180,.22)
    );

  border:
    1px solid rgba(205,250,255,.65);

  box-shadow:

    inset 0 7px 15px rgba(255,255,255,.35),

    inset 0 -12px 18px rgba(10,100,160,.25),

    0 0 18px rgba(80,220,255,.25);

  overflow:hidden;

  animation:
    bell-breathe 4.8s ease-in-out infinite;
}




.jelly-bell::before{
  content:"";
  position:absolute;

  width:70px;
  height:55px;

  left:30px;
  top:8px;

  border-radius:50%;

  background:
    radial-gradient(
      ellipse,
      rgba(255,255,255,.35),
      transparent 70%
    );

  box-shadow:

    -35px 12px 0 -17px rgba(255,255,255,.32),

    35px 18px 0 -15px rgba(160,240,255,.30),

    0 30px 0 -12px rgba(90,220,250,.28);
}




.jelly-rim{
  position:absolute;

  left:50%;
  bottom:-4px;

  width:128px;
  height:24px;

  transform:translateX(-50%);

  border-radius:50%;

  background:

    radial-gradient(
      ellipse at center,
      rgba(200,250,255,.5),
      rgba(70,200,235,.3) 50%,
      transparent 72%
    );

  border-bottom:
    2px solid rgba(190,250,255,.55);

  box-shadow:
    0 5px 12px rgba(40,180,230,.18);
}




.jelly-dot{
  position:absolute;
  border-radius:50%;

  background:
    radial-gradient(
      circle at 30% 25%,
      rgba(255,255,255,.8),
      rgba(130,235,255,.38) 35%,
      transparent 72%
    );

  box-shadow:
    0 0 5px rgba(130,230,255,.25);
}

.dot-1{
  width:13px;
  height:13px;
  left:23px;
  top:30px;
}

.dot-2{
  width:8px;
  height:8px;
  left:43px;
  top:51px;
}

.dot-3{
  width:17px;
  height:17px;
  right:20px;
  top:25px;
}

.dot-4{
  width:9px;
  height:9px;
  right:40px;
  top:48px;
}

.dot-5{
  width:6px;
  height:6px;
  left:62px;
  top:18px;
}

.dot-6{
  width:11px;
  height:11px;
  right:58px;
  top:62px;
}




.jelly-organ{
  position:absolute;
  left:50%;
  top:42px;

  width:48px;
  height:43px;

  transform:translateX(-50%);

  border-radius:
    50% 50% 45% 45%;

  background:

    radial-gradient(
      ellipse at 50% 30%,
      rgba(255,255,255,.35),
      transparent 40%
    ),

    linear-gradient(
      180deg,
      rgba(100,225,245,.32),
      rgba(30,140,190,.18)
    );

  box-shadow:

    inset 0 0 10px rgba(255,255,255,.22),

    0 0 7px rgba(80,210,240,.18);
}




.jelly-organ::before,
.jelly-organ::after{
  content:"";
  position:absolute;

  width:24px;
  height:34px;

  border-radius:50%;

  border-left:
    2px solid rgba(220,250,255,.30);

  border-bottom:
    1px solid rgba(180,240,255,.25);
}

.jelly-organ::before{
  left:3px;
  top:4px;
  transform:rotate(15deg);
}

.jelly-organ::after{
  right:3px;
  top:4px;
  transform:rotate(-15deg);
}




.jelly-frills{
  position:absolute;
  top:70px;
  left:50%;
  width:105px;
  height:60px;
  transform:translateX(-50%);
}

.frill{
  position:absolute;

  width:18px;
  height:45px;

  border-left:
    3px solid rgba(180,245,255,.40);

  border-radius:
    50%;

  transform-origin:top center;

  animation:
    frill-wave 3.8s ease-in-out infinite;
}

.frill:nth-child(1){
  left:5px;
  transform:rotate(18deg);
}

.frill:nth-child(2){
  left:25px;
  transform:rotate(8deg);
  animation-delay:-.7s;
}

.frill:nth-child(3){
  left:44px;
  transform:rotate(-3deg);
  animation-delay:-1.3s;
}

.frill:nth-child(4){
  left:64px;
  transform:rotate(-10deg);
  animation-delay:-2s;
}

.frill:nth-child(5){
  left:82px;
  transform:rotate(-18deg);
  animation-delay:-2.6s;
}




.jelly-tentacles{
  position:absolute;

  top:78px;
  left:50%;

  width:145px;
  height:195px;

  transform:translateX(-50%);
}




.long-tentacle{
  position:absolute;

  top:0;

  width:22px;
  height:185px;

  transform-origin:top center;

  border-radius:50%;

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(170,245,255,.17) 35%,
      rgba(225,255,255,.35) 50%,
      rgba(100,215,245,.16) 65%,
      transparent
    );

  border-left:
    1px solid rgba(170,245,255,.38);

  border-right:
    1px solid rgba(70,190,235,.22);

  filter:
    drop-shadow(0 0 3px rgba(100,220,255,.18));

  animation:
    tentacle-drift 5s ease-in-out infinite;
}




.long-tentacle:nth-child(1){
  left:5px;
  height:165px;
  transform:rotate(13deg);
}

.long-tentacle:nth-child(2){
  left:23px;
  height:195px;
  transform:rotate(7deg);
  animation-delay:-1.1s;
}

.long-tentacle:nth-child(3){
  left:42px;
  height:180px;
  transform:rotate(3deg);
  animation-delay:-2s;
}

.long-tentacle:nth-child(4){
  left:60px;
  height:205px;
  transform:rotate(-2deg);
  animation-delay:-2.8s;
}

.long-tentacle:nth-child(5){
  left:78px;
  height:188px;
  transform:rotate(-7deg);
  animation-delay:-3.5s;
}

.long-tentacle:nth-child(6){
  left:98px;
  height:165px;
  transform:rotate(-14deg);
  animation-delay:-4.2s;
}




.long-tentacle::after{
  content:"";

  position:absolute;

  left:50%;
  top:40px;

  width:4px;
  height:150px;

  border-radius:50%;

  border-left:
    1px solid rgba(220,250,255,.28);

  transform:
    translateX(-50%)
    rotate(7deg);
}




.ocean-speck{
  position:absolute;

  width:4px;
  height:4px;

  border-radius:50%;

  background:rgba(210,250,255,.55);

  box-shadow:
    0 0 7px rgba(120,230,255,.45);

  animation:
    speck-float 5s ease-in-out infinite;
}

.speck-1{
  left:15px;
  top:120px;
}

.speck-2{
  right:12px;
  top:155px;
  animation-delay:-2s;
}

.speck-3{
  left:28px;
  top:215px;
  animation-delay:-3s;
}

.speck-4{
  right:30px;
  top:240px;
  animation-delay:-1s;
}




.eclipse-credit{
  position:absolute;

  left:50%;
  bottom:3px;

  transform:translateX(-50%);

  text-decoration:none;

  color:rgba(190,235,242,.55);

  font-size:12px;

  letter-spacing:3px;

  text-transform:uppercase;

  opacity:.65;

  transition:
    opacity .3s ease,
    transform .3s ease,
    color .3s ease;

  z-index:20;

  white-space:nowrap;
}

.eclipse-credit:hover{
  opacity:1;

  color:#d9fbff;

  transform:
    translateX(-50%)
    translateY(-3px);

  text-shadow:
    0 0 8px rgba(100,220,240,.55);
}




.eclipse-credit::before{
  content:"CREDIT • ";

  opacity:.45;

  font-size:8px;

  letter-spacing:2px;
}




@keyframes jelly-float{

  0%,100%{
    transform:
      translateX(-50%)
      translateY(0)
      rotate(-1deg);
  }

  30%{
    transform:
      translateX(-50%)
      translateY(-10px)
      rotate(2deg);
  }

  60%{
    transform:
      translateX(-50%)
      translateY(5px)
      rotate(-2deg);
  }

  80%{
    transform:
      translateX(-50%)
      translateY(-6px)
      rotate(1deg);
  }

}


@keyframes bell-breathe{

  0%,100%{
    transform:
      translateX(-50%)
      scaleX(1)
      scaleY(1);
  }

  45%{
    transform:
      translateX(-50%)
      scaleX(.94)
      scaleY(1.06);
  }

  75%{
    transform:
      translateX(-50%)
      scaleX(1.04)
      scaleY(.97);
  }

}


@keyframes tentacle-drift{

  0%,100%{
    margin-left:0;
    transform:rotate(0deg);
  }

  35%{
    margin-left:7px;
    transform:rotate(3deg);
  }

  70%{
    margin-left:-6px;
    transform:rotate(-4deg);
  }

}


@keyframes frill-wave{

  0%,100%{
    margin-left:0;
  }

  50%{
    margin-left:5px;
  }

}


@keyframes speck-float{

  0%,100%{
    transform:translate(0,0);
    opacity:.25;
  }

  50%{
    transform:translate(8px,-15px);
    opacity:.8;
  }

}




@media(max-width:600px){

  .ocean-credit{
    transform:scale(.85);
    transform-origin:top center;
    margin-bottom:-35px;
  }

}

</style>


<div class="ocean-credit">

<div class="credit-jelly">



<div class="jelly-bell">

<div class="jelly-dot dot-1"></div>
<div class="jelly-dot dot-2"></div>
<div class="jelly-dot dot-3"></div>
<div class="jelly-dot dot-4"></div>
<div class="jelly-dot dot-5"></div>
<div class="jelly-dot dot-6"></div>

<div class="jelly-organ"></div>

<div class="jelly-rim"></div>

</div>



<div class="jelly-frills">

<i class="frill"></i>
<i class="frill"></i>
<i class="frill"></i>
<i class="frill"></i>
<i class="frill"></i>

</div>




<div class="jelly-tentacles">

<i class="long-tentacle"></i>
<i class="long-tentacle"></i>
<i class="long-tentacle"></i>
<i class="long-tentacle"></i>
<i class="long-tentacle"></i>
<i class="long-tentacle"></i>

</div>

</div>




<span class="ocean-speck speck-1"></span>
<span class="ocean-speck speck-2"></span>
<span class="ocean-speck speck-3"></span>
<span class="ocean-speck speck-4"></span>



<a href="https://janitorai.com/de/profiles/f45bb53c-a8b1-4e76-bb24-5272465c5ba8_profile-of-the-only-eclipse#profile-tabs" class="eclipse-credit" rel="noopener">
    Eclipse
  </a>

</div>


<style>






.shark-commission{

width:520px;

padding:25px;

position:relative;

overflow:hidden;

background:

linear-gradient(

180deg,

#031522,

#052c42,

#010b14

);

border-radius:30px;

box-shadow:

0 0 50px rgba(0,180,255,.25);

}




.shark-commission::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle at 20% 20%,
rgba(0,220,255,.15),
transparent 30%),

radial-gradient(circle at 80% 70%,
rgba(0,100,160,.2),
transparent 35%);

pointer-events:none;

}





.ocean-frame{

position:relative;

border:2px solid rgba(120,220,255,.35);

border-radius:25px;

padding:25px;

box-shadow:

inset 0 0 30px rgba(0,200,255,.15);

}







.ocean-frame::before{

content:"";

position:absolute;

inset:12px;

border:1px solid rgba(255,255,255,.15);

border-radius:18px;

pointer-events:none;

}




.shark-header{

text-align:center;

color:white;

position:relative;

z-index:2;

}



.shark-icon{

font-size:45px;

filter:

drop-shadow(0 0 12px #00d9ff);

}



.shark-header h1{

font-family:'Cinzel',serif;

letter-spacing:4px;

font-size:30px;

color:#d9f7ff;

margin:5px;

}



.shark-header p{

color:#7ccfe8;

font-size:12px;

letter-spacing:3px;

}





.commission-scroll{

display:flex;

gap:25px;

overflow-x:auto;

padding:35px 10px;

}



.commission-scroll::-webkit-scrollbar{

height:7px;

}


.commission-scroll::-webkit-scrollbar-thumb{

background:#00aacc;

border-radius:20px;

}




.commission-card{

flex:0 0 210px;

height:330px;

position:relative;

text-decoration:none;

color:white;

background:

linear-gradient(

180deg,

#092638,

#031018

);

border-radius:18px;

overflow:hidden;

border:1px solid rgba(130,220,255,.4);

box-shadow:

0 15px 30px rgba(0,0,0,.5);

transition:.35s;

}




.commission-card:hover{

transform:

translateY(-10px);

box-shadow:

0 0 35px rgba(0,220,255,.45);

}




.commission-card img{

width:100%;

height:180px;

object-fit:cover;

}





.file-corner{

position:absolute;

top:12px;

right:-35px;

background:#007c9b;

color:white;

padding:5px 40px;

font-size:10px;

letter-spacing:2px;

transform:rotate(45deg);

z-index:2;

}





.commission-info{

padding:15px;

text-align:center;

}



.commission-info h2{

font-size:18px;

margin:0;

color:#d9f7ff;

}



.commission-info p{

font-size:13px;

color:#9bc5d4;

line-height:1.5;

}





.status{

display:inline-block;

margin-top:15px;

padding:6px 18px;

border-radius:20px;

background:

rgba(0,200,255,.15);

border:1px solid #00bde8;

font-size:11px;

letter-spacing:2px;

}







.bubble{

position:absolute;

border-radius:50%;

border:2px solid rgba(255,255,255,.3);

}



.bubble1{

width:25px;

height:25px;

top:100px;

left:40px;

}



.bubble2{

width:12px;

height:12px;

top:180px;

right:50px;

}



.bubble3{

width:35px;

height:35px;

bottom:40px;

left:30px;

}



</style>

<style>






.ocean-gallery{

width:520px;

padding:25px;

position:relative;

background:

linear-gradient(

180deg,

#02131f,

#032b3d,

#01131d

);

border-radius:30px;

border:3px solid #0b6685;

box-shadow:

0 0 40px rgba(0,150,200,.35);

overflow:hidden;

}





.gallery-frame{

position:relative;

padding:20px;

border-radius:22px;

border:2px solid rgba(160,240,255,.35);

box-shadow:

inset 0 0 30px rgba(0,200,255,.15);

}





.shark-header{

text-align:center;

color:#d9f7ff;

position:relative;

z-index:3;

}



.shark-icon{

font-size:40px;

}



.shark-header h1{

font-family:'Cinzel',serif;

letter-spacing:3px;

font-size:30px;

margin:5px;

}



.shark-header p{

font-size:13px;

color:#89cddd;

letter-spacing:2px;

}







.bubble{

position:absolute;

border-radius:50%;

background:

rgba(255,255,255,.18);

animation:float 5s infinite;

}



.bubble1{

width:20px;

height:20px;

left:40px;

top:80px;

}



.bubble2{

width:12px;

height:12px;

right:80px;

top:130px;

animation-delay:1s;

}



.bubble3{

width:25px;

height:25px;

right:30px;

bottom:50px;

animation-delay:2s;

}



@keyframes float{

0%{

transform:translateY(20px);

opacity:.2;

}

50%{

opacity:.8;

}

100%{

transform:translateY(-80px);

opacity:0;

}

}




.gallery-scroll{

display:flex;

gap:25px;

overflow-x:auto;

padding:35px 15px;

}



.gallery-scroll::-webkit-scrollbar{

height:8px;

}



.gallery-scroll::-webkit-scrollbar-thumb{

background:#0b789c;

border-radius:20px;

}





.sea-photo{

flex:0 0 auto;

width:190px;

height:260px;

background:

linear-gradient(

180deg,

#dff7ff,

#b6dce8

);

padding:10px;

border-radius:8px;

position:relative;

transform:rotate(-3deg);

box-shadow:

0 15px 25px rgba(0,0,0,.5);

transition:.35s;

}



.sea-photo:nth-child(even){

transform:rotate(4deg);

}



.sea-photo:hover{

transform:

translateY(-10px)

rotate(0deg)

scale(1.08);

z-index:5;

}




.sea-photo img{

width:100%;

height:210px;

object-fit:cover;

border-radius:5px;

}





.specimen-tag{

position:absolute;

bottom:12px;

left:50%;

transform:translateX(-50%);

background:#06202b;

color:#c8f5ff;

padding:5px 12px;

border-radius:20px;

font-size:11px;

letter-spacing:1px;

white-space:nowrap;

}






.sea-sticker{

position:absolute;

width:80px;

z-index:5;

filter:

drop-shadow(0 8px 10px rgba(0,0,0,.5));

}



.left-sticker{

left:-20px;

bottom:20px;

transform:rotate(-15deg);

}



.right-sticker{

right:-15px;

top:80px;

transform:rotate(15deg);

}







@media(max-width:768px){

.ocean-gallery{

width:95%;

margin:auto;

}



.gallery-scroll{

padding-left:20px;

}



.sea-photo{

width:160px;

height:230px;

}



.sea-photo img{

height:180px;

}


.shark-header h1{

font-size:24px;

}

}


</style>

<style>




@media(max-width:575px){




.pp-cc-list-container{

    display:flex!important;

    flex-direction:row!important;

    flex-wrap:nowrap!important;

    overflow-x:auto!important;

    justify-content:flex-start!important;

    align-items:stretch!important;

    gap:18px!important;

    padding:15px!important;

    width:100%!important;



}


.pp-cc-list-container::-webkit-scrollbar{

    display:none!important;

}





.pp-cc-wrapper{


    flex:0 0 280px!important;

    width:280px!important;

    height:260px!important;

    min-height:260px!important;

    border-radius:22px!important;


}





.css-1s5evre{


    display:grid!important;


    grid-template-columns:

    42% 58%!important;


    grid-template-rows:

    55% 25% 20%!important;


}





.css-1q7rmf0{


    grid-area:

    1 / 1 / 4 / 2!important;


    margin:10px!important;

}



.pp-cc-avatar{


    object-fit:cover!important;

    width:100%!important;

    height:100%!important;


}





.css-199gcrh{


    grid-area:

    1 / 2 / 2 / 3!important;


    font-size:11px!important;

    padding:8px!important;

    overflow:hidden!important;


}





.pp-cc-tags{


    grid-area:

    2 / 2 / 3 / 3!important;


    overflow:hidden!important;

    justify-content:flex-start!important;


}






.css-nlxhw4{


    grid-area:

    3 / 1 / 4 / 3!important;


    padding-left:12px!important;


}


.pp-cc-name{


    font-size:17px!important;


}





.pp-cc-creator-name{


    display:none!important;


}




}




@media(max-width:380px){


.pp-cc-wrapper{


    flex-basis:250px!important;

    width:250px!important;


}


}


</style>

<style>



@media (max-width:768px){


html,
body{

overflow-x:hidden !important;

width:100%;

}



.scroll-box,
.quest-scroll,
.film-scroll,
.scrap-scroll,
.operator-scroll{

max-width:100vw;

overflow-x:auto !important;

overflow-y:hidden !important;



touch-action:pan-x;



}





.scroll-box > *,
.quest-scroll > *,
.film-scroll > *,
.scrap-scroll > *,
.operator-scroll > *{

max-width:none;

}



}




@media (min-width:769px) and (max-width:1100px){


html,
body{

overflow-x:hidden !important;

}



}

</style>

<style>






*{
    box-sizing:border-box;
}


body{

    overflow-x:hidden!important;

}



.profile-page-flex{

    width:100%!important;

    display:flex!important;

    flex-direction:column!important;

    align-items:center!important;

}







.shark-mobile-container,
.shark-friends,
.creator-ocean,
.shark-status,
.series-ocean,
.gallery-section,
.rules-card,
.newsletter-frame,
.scrap-wall,
.camo-field,
.film-gallery{


    position:relative!important;

    left:auto!important;

    right:auto!important;

    margin-left:auto!important;

    margin-right:auto!important;


}







.shark-mobile-container{


    width:min(100%,1100px)!important;

    margin:auto!important;

    align-items:center!important;


}







.shark-mobile-container > div,
.creator-ocean,
.shark-friends,
.series-ocean,
.shark-status{


    max-width:100%!important;


}







@media(max-width:900px){


.shark-mobile-container{


    width:95%!important;

}


.camo-field,
.scrap-wall,
.film-gallery,
.rules-card,
.newsletter-frame{


    transform:scale(.92);

    transform-origin:center top;


}



}








@media(max-width:575px){



.profile-page-flex{


    padding:0!important;

}





.shark-mobile-container{


    width:100%!important;

    max-width:100%!important;

    padding:0 8px!important;

    gap:20px!important;

    overflow:hidden!important;


}





.shark-mobile-container > div{


    width:100%!important;

    max-width:360px!important;

    margin-left:auto!important;

    margin-right:auto!important;


}








.camo-field,
.scrap-wall,
.film-gallery,
.rules-card,
.newsletter-frame{


    width:100%!important;

    max-width:350px!important;

    transform:none!important;


}






.scroll-box,
.film-scroll,
.scrap-scroll,
.creator-scroll,
.friend-scroll,
.bubble-scroll{


    max-width:100%!important;

    overflow-x:auto!important;


}







.shark-mobile-container img{


    max-width:100%!important;

    height:auto;


}








.shark-mobile-container h1{


    font-size:26px!important;


}



.shark-mobile-container h2{


    font-size:20px!important;


}





}





@media(max-width:380px){



.shark-mobile-container{


    padding:0 5px!important;


}


.shark-mobile-container > div{


    max-width:330px!important;


}


}

.shark-mobile-container{

width:100%;

display:flex;

flex-direction:column;

align-items:center;

gap:30px;

}




@media (max-width:768px){

.shark-mobile-container{

width:100%;

max-width:100%;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

margin:0 auto;

padding-left:10px;

padding-right:10px;

overflow-x:hidden;

}




.shark-mobile-container > div{

margin-left:auto !important;

margin-right:auto !important;

max-width:95%;

}





.shark-mobile-container img{

max-width:100%;

height:auto;

}





.shark-mobile-container .scroll-box,
.shark-mobile-container .gallery-scroll,
.shark-mobile-container .quest-scroll,
.shark-mobile-container .film-scroll{

max-width:100vw;

}





.shark-mobile-container p,
.shark-mobile-container h1,
.shark-mobile-container h2,
.shark-mobile-container h3{

word-break:break-word;

}





.shark-mobile-container{

transform:none !important;

left:0 !important;

right:0 !important;

position:relative;

}


}


</style>

<style>





.shark-about{

position:relative;

width:430px;

padding:30px;

background:

linear-gradient(

180deg,

#001d35,

#003b52,

#001521

);

border-radius:30px;

border:3px solid #168aa8;

box-shadow:

0 0 40px rgba(0,180,220,.35),

inset 0 0 40px rgba(0,0,0,.6);

overflow:hidden;

}






.shark-about::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle at 20% 20%,

rgba(255,255,255,.15),

transparent 20%),

radial-gradient(circle at 80% 70%,

rgba(0,200,255,.15),

transparent 30%);

pointer-events:none;

}




.shark-header{

position:relative;

text-align:center;

color:white;

z-index:2;

}



.shark-icon{

font-size:45px;

filter:

drop-shadow(0 0 12px #00cfff);

}



.shark-header h1{

font-family:'Cinzel',serif;

letter-spacing:5px;

font-size:32px;

margin:8px;

}



.subtitle{

font-size:12px;

letter-spacing:4px;

color:#8bd7e8;

}





.glass-panel{

margin-top:25px;

padding:14px;

background:

rgba(255,255,255,.08);

border-radius:20px;

border:1px solid rgba(255,255,255,.25);

box-shadow:

inset 0 0 20px rgba(255,255,255,.08);

}





.inner-frame{

position:relative;

height:260px;

border-radius:16px;

padding:20px;

border:2px solid rgba(0,220,255,.4);

background:

rgba(0,10,20,.55);

overflow:hidden;

}





.about-scroll{

height:100%;

overflow-y:auto;

padding-right:10px;

color:#d9f8ff;

line-height:1.7;

font-family:Georgia,serif;

}




.about-scroll::-webkit-scrollbar{

width:6px;

}


.about-scroll::-webkit-scrollbar-thumb{

background:#00a8c8;

border-radius:20px;

}





.ocean-quote{

margin-top:20px;

padding:15px;

border-radius:15px;

background:

rgba(0,150,200,.18);

text-align:center;

font-style:italic;

color:#b7efff;

}








.shark-sticker{

position:absolute;

width:90px;

right:-18px;

bottom:-15px;

transform:rotate(8deg);

filter:

drop-shadow(0 8px 10px rgba(0,0,0,.5));

transition:.3s;

}



.shark-sticker:hover{

transform:

rotate(0deg)

scale(1.1);

}








.bubble{

position:absolute;

border-radius:50%;

background:

rgba(255,255,255,.12);

border:1px solid rgba(255,255,255,.3);

}



.one{

width:35px;

height:35px;

top:50px;

left:20px;

}


.two{

width:18px;

height:18px;

top:120px;

right:35px;

}


.three{

width:25px;

height:25px;

bottom:80px;

left:40px;

}







.seaweed{

position:absolute;

bottom:0;

width:35px;

height:80px;

background:

linear-gradient(

90deg,

transparent,

#087c69,

transparent

);

opacity:.5;

}



.left{

left:10px;

}


.right{

right:10px;

}



</style>

<style>






.shark-intel{

width:480px;

padding:25px;

background:

linear-gradient(

180deg,

#001d2d,

#003b52,

#00131f

);

border-radius:28px;

border:2px solid #087b9c;

box-shadow:

0 0 35px rgba(0,180,220,.25);

color:#d9f7ff;

font-family:Georgia,serif;

position:relative;

overflow:hidden;

}





.shark-intel::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle at 20% 20%,
rgba(255,255,255,.15),
transparent 20%),

radial-gradient(circle at 80% 60%,
rgba(0,200,255,.15),
transparent 25%);

pointer-events:none;

}





.shark-header{

text-align:center;

position:relative;

}



.shark-header h1{

font-family:Cinzel,serif;

letter-spacing:4px;

font-size:30px;

color:#e7fbff;

text-shadow:

0 0 15px #00bcd4;

}



.shark-header p{

font-size:11px;

letter-spacing:3px;

color:#83cddd;

}





.shark-fin{

font-size:45px;

color:#78d8ed;

}




.intel-box,
.category-box,
.shark-note{


background:

rgba(0,20,35,.65);

border:1px solid rgba(120,220,240,.3);

border-radius:18px;

padding:18px;

margin-top:20px;

box-shadow:

inset 0 0 20px rgba(0,0,0,.4);

}





.intel-title,
.category-title{

text-align:center;

font-size:20px;

letter-spacing:2px;

color:#a9edff;

margin-bottom:12px;

}





.rules-grid{

display:flex;

gap:15px;

margin-top:20px;

}





.rule-box{

width:50%;

background:

rgba(0,10,20,.7);

border-radius:18px;

padding:15px;

border:1px solid #245b6b;

}





.rule-box h2{

text-align:center;

font-size:20px;

}



.do-box h2{

color:#7dffbc;

}



.dont-box h2{

color:#ff8d9b;

}




.scroll-text{

height:150px;

overflow-y:auto;

font-size:13px;

line-height:1.7;

}



.scroll-text::-webkit-scrollbar{

width:5px;

}


.scroll-text::-webkit-scrollbar-thumb{

background:#00a8c6;

border-radius:10px;

}





.bubble-scroll{

display:flex;

gap:12px;

overflow-x:auto;

}



.ocean-tag{

flex:0 0 auto;

padding:10px 18px;

border-radius:30px;

background:

linear-gradient(

135deg,

#07506b,

#002735

);

border:1px solid #54cde8;

color:white;

}





.shark-note{

text-align:center;

position:relative;

}



.bubble{

font-size:35px;

color:#8be9ff;

}




.shark-sticker img{

width:70px;

position:absolute;

right:-15px;

bottom:-25px;

transform:rotate(10deg);

}




@media(max-width:600px){

.shark-intel{

width:92%;

}


.rules-grid{

flex-direction:column;

}


.rule-box{

width:100%;

}

}

</style>

<style>






.shark-friends{

width:520px;

padding:30px;

position:relative;

overflow:hidden;

border-radius:30px;


background:

linear-gradient(

180deg,

#002b45,

#00131f

);


border:3px solid #126080;


box-shadow:

0 0 40px rgba(0,120,170,.45),

inset 0 0 40px rgba(0,0,0,.7);

}





.shark-friends::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(

circle at top,

rgba(255,255,255,.18),

transparent 40%

);


pointer-events:none;

}





.shark-friends::after{

content:"";

position:absolute;

inset:0;

background-image:

radial-gradient(circle,#fff 2px,transparent 3px);

background-size:80px 120px;

opacity:.12;

animation:bubbles 8s linear infinite;

}



@keyframes bubbles{

from{



}

to{



}

}




.ocean-header{

position:relative;

z-index:2;

text-align:center;

color:white;

}



.shark-symbol{

font-size:45px;

}



.ocean-header h1{

font-family:'Cormorant Garamond',serif;

font-size:34px;

letter-spacing:3px;

margin:5px;

}



.ocean-header p{

color:#9eeaff;

letter-spacing:4px;

font-size:12px;

}




.friend-scroll{

position:relative;

z-index:2;

display:flex;

gap:25px;

overflow-x:auto;

padding:35px 10px;




}



.friend-scroll::-webkit-scrollbar{

height:7px;

}



.friend-scroll::-webkit-scrollbar-thumb{

background:#36b9d8;

border-radius:20px;

}




.friend-card{

position:relative;

flex:0 0 190px;

height:270px;

padding:12px;

text-decoration:none;

color:white;


background:

linear-gradient(

180deg,

rgba(255,255,255,.15),

rgba(255,255,255,.04)

);


border:2px solid rgba(130,220,255,.5);

border-radius:22px;


backdrop-filter:blur(8px);


transition:.4s;


box-shadow:

0 15px 30px rgba(0,0,0,.4);

}





.friend-card:hover{

transform:

translateY(-15px);

box-shadow:

0 25px 45px rgba(0,170,220,.5);

}





.friend-image{

height:190px;

overflow:hidden;

border-radius:15px;

}



.friend-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}



.friend-card:hover img{

transform:scale(1.08);

}





.friend-info{

text-align:center;

padding-top:12px;

}



.friend-info h2{

font-size:20px;

margin:0;

font-family:'Cormorant Garamond',serif;

}



.friend-info span{

display:inline-block;

margin-top:8px;

font-size:11px;

padding:5px 12px;

border-radius:20px;

background:

rgba(0,180,220,.25);

color:#b9f4ff;

}







.bubble{

position:absolute;

border-radius:50%;

background:

rgba(255,255,255,.35);

}



.b1{

width:15px;

height:15px;

right:20px;

top:30px;

}



.b2{

width:8px;

height:8px;

right:45px;

top:60px;

}




@media(max-width:600px){

.shark-friends{

width:90%;

padding:20px;

}



.friend-card{

flex-basis:170px;

}

}



</style>

<style>






.creator-ocean{

width:520px;

padding:25px;

position:relative;

overflow:hidden;

border-radius:28px;

background:

linear-gradient(

180deg,

#082433,

#03131c

);

border:2px solid #17627a;

box-shadow:

0 0 40px rgba(0,0,0,.5);

}







.creator-ocean::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle at 20% 20%,
rgba(255,255,255,.12),
transparent 10%),

radial-gradient(circle at 80% 70%,
rgba(0,180,220,.15),
transparent 15%);

pointer-events:none;

}





.creator-title{

position:relative;

text-align:center;

font-family:'Caveat',cursive;

font-size:42px;

color:#d8f7ff;

margin:0;

text-shadow:

0 0 15px #168aa8;

}



.shark-sub{

text-align:center;

color:#8fdbea;

font-size:13px;

letter-spacing:3px;

margin-bottom:25px;

}





.creator-scroll{

display:flex;

gap:25px;

overflow-x:auto;

padding:15px;

}



.creator-scroll::-webkit-scrollbar{

height:7px;

}


.creator-scroll::-webkit-scrollbar-thumb{

background:#1c7891;

border-radius:20px;

}








.creator-card{

position:relative;

flex:0 0 360px;

height:130px;

border-radius:70px;

overflow:hidden;

text-decoration:none;

display:flex;

align-items:center;

border:2px solid rgba(180,240,255,.35);

background:#061923;

box-shadow:

0 10px 25px rgba(0,0,0,.5);

transition:.35s;

}





.creator-card:hover{

transform:

translateY(-8px)

scale(1.03);

border-color:#8eeaff;

}







.creator-bg{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

opacity:.55;

filter:

brightness(.65);

}








.creator-avatar{

position:relative;

z-index:2;

width:105px;

height:105px;

margin-left:18px;

border-radius:50%;

object-fit:cover;

border:

4px solid #d8f7ff;

box-shadow:

0 0 20px rgba(100,220,255,.8);

}





.creator-info{

position:relative;

z-index:3;

margin-left:18px;

color:white;

text-shadow:

0 2px 5px black;

}



.creator-info h2{

font-family:'Caveat',cursive;

font-size:32px;

margin:0;

}



.creator-info p{

margin:5px 0;

color:#bdeefa;

font-size:14px;

}







.bubble{

position:absolute;

border-radius:50%;

border:2px solid rgba(255,255,255,.5);

background:

rgba(255,255,255,.15);

z-index:4;

}



.bubble-one{

width:22px;

height:22px;

right:30px;

top:20px;

}



.bubble-two{

width:12px;

height:12px;

right:60px;

bottom:25px;

}








.creator-ocean::after{

content:"𓂃𓂁𓂃";

position:absolute;

right:20px;

top:15px;

font-size:45px;

color:rgba(255,255,255,.12);

transform:rotate(-20deg);

}



</style>

<style>


.shark-status{

width:360px;

margin:20px auto;

background:

linear-gradient(

180deg,

#062b3d,

#03151f

);

border-radius:22px;

border:2px solid #18718b;

box-shadow:

0 0 30px rgba(0,150,190,.35),

inset 0 0 25px rgba(0,0,0,.5);

overflow:hidden;

position:relative;

}





.shark-status::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle at 20% 20%,
rgba(255,255,255,.15) 0 4px,
transparent 5px),

radial-gradient(circle at 80% 30%,
rgba(255,255,255,.1) 0 6px,
transparent 7px),

radial-gradient(circle at 40% 80%,
rgba(255,255,255,.12) 0 5px,
transparent 6px);

pointer-events:none;

}





summary{

list-style:none;

cursor:pointer;

}



summary::-webkit-details-marker{

display:none;

}



.status-header{

padding:18px;

display:flex;

align-items:center;

gap:15px;

position:relative;

z-index:2;

}



.shark-icon{

width:55px;

height:55px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:

linear-gradient(

135deg,

#1b9bb8,

#075066

);

font-size:28px;

box-shadow:

0 0 15px rgba(0,200,255,.4);

}



.status-header h2{

margin:0;

font-size:18px;

letter-spacing:3px;

color:#d9f8ff;

font-family:Georgia,serif;

}



.status-header p{

margin:5px 0 0;

font-size:12px;

color:#8cc8d6;

}





.status-content{

margin:0 18px 18px;

padding:18px;

max-height:250px;

overflow-y:auto;

background:

rgba(0,20,30,.55);

border-radius:16px;

border:1px solid rgba(150,230,255,.25);

color:#d9f7ff;

line-height:1.7;

position:relative;

}





.status-content::before{

content:"";

position:absolute;

inset:8px;

border:1px solid rgba(255,255,255,.12);

border-radius:12px;

pointer-events:none;

}




.status-content h3{

text-align:center;

color:#8eeaff;

letter-spacing:2px;

}



.ocean-line{

text-align:center;

color:#4fb7cf;

margin:8px;

}



.status-footer{

display:block;

text-align:center;

font-size:13px;

color:#7ed9e8;

font-style:italic;

}



.status-content::-webkit-scrollbar{

width:5px;

}


.status-content::-webkit-scrollbar-thumb{

background:#16809b;

border-radius:20px;

}



</style>

<style>






.series-ocean{

width:520px;

padding:35px;

position:relative;

overflow:hidden;

border-radius:30px;

background:

linear-gradient(

180deg,

#002b3d,

#00131d

);

border:2px solid rgba(150,230,255,.35);

box-shadow:

0 0 50px rgba(0,150,200,.35);

}





.series-ocean::before{

content:"";

position:absolute;

inset:15px;

border-radius:22px;

border:1px solid rgba(255,255,255,.18);

pointer-events:none;

}





.series-ocean::after{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle at 20% 30%,
rgba(255,255,255,.15) 0 2px,
transparent 3px),

radial-gradient(circle at 80% 70%,
rgba(255,255,255,.12) 0 3px,
transparent 4px);

background-size:90px 90px;

}



.ocean-title{

position:relative;

z-index:2;

text-align:center;

font-family:Cinzel,serif;

color:#d9f8ff;

letter-spacing:4px;

font-size:35px;

margin:0;

}



.ocean-subtitle{

position:relative;

z-index:2;

text-align:center;

color:#80cbdc;

letter-spacing:3px;

font-size:12px;

margin-bottom:30px;

}




.bubble-scroll{

position:relative;

z-index:2;

display:flex;

gap:35px;

overflow-x:auto;

padding:20px;

}



.bubble-scroll::-webkit-scrollbar{

height:7px;

}


.bubble-scroll::-webkit-scrollbar-thumb{

background:#6ed5e8;

border-radius:20px;

}




.series-bubble{

flex:0 0 210px;

height:210px;

perspective:1000px;

}




.bubble-inner{

width:100%;

height:100%;

position:relative;

transform-style:preserve-3d;

transition:.8s;

}



.series-bubble:hover .bubble-inner{

transform:rotateY(180deg);

}





.bubble-front,
.bubble-back{

position:absolute;

inset:0;

border-radius:50%;

backface-visibility:hidden;

overflow:hidden;

}




.bubble-front{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

background:

radial-gradient(circle at 30% 25%,

rgba(255,255,255,.45),

rgba(100,220,255,.12) 30%,

rgba(0,80,120,.3));

border:2px solid rgba(180,240,255,.6);

box-shadow:

inset 0 0 30px rgba(255,255,255,.25),

0 0 25px rgba(80,200,255,.4);

}




.bubble-front h2{

font-family:Cinzel,serif;

color:white;

text-align:center;

font-size:20px;

}



.bubble-icon{

font-size:40px;

}




.bubble-shine{

position:absolute;

top:30px;

left:45px;

width:35px;

height:20px;

background:white;

opacity:.35;

border-radius:50%;

transform:rotate(-25deg);

}





.bubble-back{

transform:rotateY(180deg);

background:

linear-gradient(

180deg,

#082c3b,

#03151c

);

border:2px solid #72cfe3;

padding:20px;

box-sizing:border-box;

color:white;

}



.bubble-back h3{

text-align:center;

margin-top:0;

font-family:Cinzel,serif;

}



.series-text{

height:85px;

overflow-y:auto;

font-size:12px;

line-height:1.5;

color:#d6edf2;

padding-right:5px;

}



.series-text::-webkit-scrollbar{

width:4px;

}


.series-text::-webkit-scrollbar-thumb{

background:#6ed5e8;

border-radius:10px;

}





.bubble-back a{

display:block;

margin-top:12px;

text-align:center;

padding:7px;

background:#08758d;

border-radius:20px;

color:white;

text-decoration:none;

font-size:11px;

letter-spacing:2px;

}



</style>