.p_head{
    animation: head_move 2s alternate infinite ease-in-out;
}

@keyframes head_move{
    100%{transform: rotate(5deg);};
}

.p_arm_up{
    animation: arm_up_move 2s alternate infinite ease-out;
}

@keyframes arm_up_move{
    0%{transform: translate(-10px) rotate(15deg);};
    100%{transform: translate(10px) rotate(15deg);};
}

.p_arm_down{
    animation: arm_down_move 2s alternate infinite ease-out;
}

@keyframes arm_down_move{
    0%{transform: rotateZ(-5deg) translateY(0px);}
    100%{transform: rotateZ(5deg) translateY(5px) translateX(-10px);}
}

.p_leg_up{
    animation: leg_up_move 1s alternate infinite ease-out;
}

@keyframes leg_up_move{
    0%{transform: rotateZ(0deg) translateX(-10px) translateY(10px);}
    100%{transform: rotateZ(10deg) translateX(10px) translateY(-10px);}
}

.p_leg_down{
    animation: leg_down_move 1s alternate infinite ease-out;
}

@keyframes leg_down_move{
    0%{transform: rotateZ(0deg) translateX(10px) translateY(-10px);}
    100%{transform: rotateZ(-3deg) translateX(-10px) translateY(10px);}
}

.fish{
    position: absolute;
    background-image: url("asset/Asset 2.png");
    width: 391px;
    height: 99px;
}


.f2{
    animation: f_swim_2 30s infinite linear;
    left: 2000px;
    top: 40%;
    opacity: 1;
}
@keyframes f_swim_2{
    0%{transform: translateX(500%) translateY(40%) scale(0.8);
        opacity: 0;}
    50%{transform: translateX(0%) translateY(40%) scale(0.8);
            opacity: 1;}
    100%{transform: translateX(-500%) translateY(40%) scale(0.8);
        opacity: 0;}
}

.f4{
    animation: f_swim_4 30s infinite linear;
    left: 6000px;
    top: 55%;
    opacity: 1;
}
@keyframes f_swim_4{
    0%{transform: translateX(200%) translateY(50%) scale(0.7);
        opacity: 0;}
    50%{transform: translateX(0%) translateY(25%) scale(0.7);
            opacity: 1;}
    100%{transform: translateX(-200%) translateY(0%) scale(0.7);
        opacity: 0;}
}

.f6{
    animation: f_swim_6 30s infinite linear;
    left: 4000px;
    top: 30%;
    opacity: 1;
}
@keyframes f_swim_6{
    0%{transform: translateX(500%) translateY(30%) scale(0.5);
        opacity: 0;}
    50%{transform: translateX(0%) translateY(30%) scale(0.5);
            opacity: 1;}
    100%{transform: translateX(-500%) translateY(30%) scale(0.5);
        opacity: 0;}
}


.f8{
    animation: f_swim_8 30s infinite linear;
    left: 8000px;
    top: 40%;
    opacity: 1;
}
@keyframes f_swim_8{
    0%{transform: translateX(500%) translateY(40%) scale(0.8);
        opacity: 0;}
    50%{transform: translateX(0%) translateY(40%) scale(0.8);
            opacity: 1;}
    100%{transform: translateX(-500%) translateY(40%) scale(0.8);
        opacity: 0;}
}

.f9{
    animation: f_swim_9 20s infinite linear;
    left: 9000px;
    top: 10%;
    opacity: 0.3;
}
@keyframes f_swim_9{
   0%{transform: translateX(100%) translateY(10%) scale(0.3);
        opacity: 0;}
    50%{transform: translateX(0%) translateY(50%) scale(0.3);
            opacity: 0.3;}
    100%{transform: translateX(-100%) translateY(10%) scale(0.3);
        opacity: 0;}
}


.f14{
    animation: f_swim_14 30s infinite linear;
    left: 14000px;
    top: 40%;
    opacity: 1;
}
@keyframes f_swim_14{
    0%{transform: translateX(500%) translateY(40%) scale(0.8);
        opacity: 0;}
    50%{transform: translateX(0%) translateY(40%) scale(0.8);
            opacity: 1;}
    100%{transform: translateX(-500%) translateY(40%) scale(0.8);
        opacity: 0;}
}

.f16{
    animation: f_swim_16 30s infinite linear;
    left: 18000px;
    top: 55%;
    opacity: 1;
}
@keyframes f_swim_16{
    0%{transform: translateX(200%) translateY(50%) scale(0.7);
        opacity: 0;}
    50%{transform: translateX(0%) translateY(25%) scale(0.7);
            opacity: 1;}
    100%{transform: translateX(-200%) translateY(0%) scale(0.7);
        opacity: 0;}
}


.f18{
    animation: f_swim_18 30s infinite linear;
    left: 16000px;
    top: 30%;
    opacity: 1;
}
@keyframes f_swim_18{
    0%{transform: translateX(500%) translateY(30%) scale(0.5);
        opacity: 0;}
    50%{transform: translateX(0%) translateY(30%) scale(0.5);
            opacity: 1;}
    100%{transform: translateX(-500%) translateY(30%) scale(0.5);
        opacity: 0;}
}

.f20{
    animation: f_swim_20 30s infinite linear;
    left: 20000px;
    top: 40%;
    opacity: 1;
}
@keyframes f_swim_20{
    0%{transform: translateX(500%) translateY(40%) scale(0.8);
        opacity: 0;}
    50%{transform: translateX(0%) translateY(40%) scale(0.8);
            opacity: 1;}
    100%{transform: translateX(-500%) translateY(40%) scale(0.8);
        opacity: 0;}
}

.f23{
    animation: f_swim_23 40s infinite linear;
    left: 30000px;
    top: 40%;
    opacity: 1;
}
@keyframes f_swim_23{
    0%{transform: translateX(500%) translateY(40%) scale(0.6);
        opacity: 0;}
    50%{transform: translateX(0%) translateY(40%) scale(0.6);
            opacity: 1;}
    100%{transform: translateX(-500%) translateY(40%) scale(0.6);
        opacity: 0;}
}

.f27{
    animation: f_swim_27 20s infinite linear;
    left: 27000px;
    top: 10%;
    opacity: 0.3;
}
@keyframes f_swim_27{
   0%{transform: translateX(100%) translateY(10%) scale(0.3);
        opacity: 0;}
    50%{transform: translateX(0%) translateY(50%) scale(0.3);
            opacity: 0.3;}
    100%{transform: translateX(-100%) translateY(10%) scale(0.3);
        opacity: 0;}
}

.f30{
    animation: f_swim_30 30s infinite linear;
    left: 28000px;
    top: 30%;
    opacity: 1;
}
@keyframes f_swim_30{
    0%{transform: translateX(500%) translateY(30%) scale(0.5);
        opacity: 0;}
    50%{transform: translateX(0%) translateY(30%) scale(0.5);
            opacity: 1;}
    100%{transform: translateX(-500%) translateY(30%) scale(0.5);
        opacity: 0;}
}



.ble{
    position: absolute;
    background-image: url("asset/Asset 4.png");
    width: 218px;
    height: 324px;
}

.b2{
    animation: b_2 10s infinite linear;
    left: 500px;
    top: 0%;
    opacity: 1;
}
@keyframes b_2{
    0%{transform: translateX(0%) translateY(80%) scale(0.2);
        opacity: 0;}
    50%{transform: translateX(0%) translateY(40%) scale(0.2);
            opacity: 0.8;}
    100%{transform: translateX(0%) translateY(0%) scale(0.2);
        opacity: 0;}
}

.b3{
    animation: b_3 20s infinite linear;
    left: 1500px;
    top: 0%;
    opacity: 1;
}
@keyframes b_3{
    0%{transform: translateX(0%) translateY(100%) scale(0.2);
        opacity: 0;}
    50%{transform: translateX(0%) translateY(50%) scale(0.2);
            opacity: 0.6;}
    100%{transform: translateX(0%) translateY(0%) scale(0.2);
        opacity: 0;}
}

.b4{
    animation: b_4 40s infinite linear;
    left: 2000px;
    top: 0%;
    opacity: 1;
}
@keyframes b_4{
    0%{transform: translateX(0%) translateY(100%) scale(0.2);
        opacity: 0;}
    50%{transform: translateX(0%) translateY(80%) scale(0.2);
            opacity: 0.5;}
    100%{transform: translateX(0%) translateY(60%) scale(0.2);
        opacity: 0;}
}


.b5{
    animation: b_4 20s infinite linear;
    left: 3500px;
    top: 10%;
    opacity: 1;
}
.b6{
    animation: b_4 30s infinite linear;
    left: 4500px;
    top: 20%;
    opacity: 1;
}

.light1{
    position: absolute;
    background-image: url("asset/Asset 7.png");
    width: 2534px;
    height: 2812px;
}

.light2{
    position: absolute;
    background-image: url("asset/Asset 8.png");
    width: 3122px;
    height: 2685px;
}

.l1{
    animation: l_1 20s infinite linear;
    left: -500px;
    top: -100%;
    opacity: 1;
}
@keyframes l_1{
    0%{transform: translateX(0%) translateY(0%) scale(0.6);
        opacity: 1;}
    50%{transform: translateX(0%) translateY(0%) scale(0.6);
            opacity: 0;}
    100%{transform: translateX(0%) translateY(0%) scale(0.6);
        opacity: 1;}
}

.l2{
    animation: l_2 40s infinite linear;
    left: 1000px;
    top: -100%;
    opacity: 1;
}
@keyframes l_2{
    0%{transform: translateX(0%) translateY(0%) scale(0.6);
        opacity: 0;}
    50%{transform: translateX(0%) translateY(0%) scale(0.6);
            opacity: 1;}
    100%{transform: translateX(0%) translateY(0%) scale(0.6);
        opacity: 0;}
}