html{
    background: rgb(7, 17, 150);
    background-repeat: no-repeat;
    height:100%;
    overflow-x: hidden;
}
.bubble{
    height: 30px;
}
.background{
    position: fixed;
    height:1025px;
    width: 2200px;
    bottom: -100px;
    left: -150px;
    z-index: 1;
}
.fish-1{
    position:relative;
    z-index: 3;
    height: 100px;
    animation-duration: 4.75s ;
    animation-name: fish-1;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes fish-1 {
    0%{transform:translate(-158px,200px)}
    100%{transform:translate(2046px,200px)}
}
.fish-2{
    position:relative;
    z-index: 2;
    height: 100px;
    animation-duration: 4.75s ;
    animation-name: fish-2;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes fish-2 {
    0%{transform:translate(-282px, 400px)}
    25%{transform:translate(-282px, 400px)}
    100%{transform:translate(1760px,400px)}
}
.bubble-1{
    height:30px;
    z-index: 4;
    position:relative;
    transform: translate(900px,-107px);
    animation-duration: 4.75s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name:bubble-1 ;
}
@keyframes bubble-1 {
    0%{
        transform: translate(900px,160px);
        opacity:0
    }
    54%{opacity:0}
    55%{
        transform: translate(900px,160px);
        opacity:100%;
    }
    100%{
        transform: translate(900px,-107px);
        opacity: 100%;
    }
}
.bubble-2{
    height:30px;
    z-index: 3;
    position:relative;
    animation-duration: 4.75s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name:bubble-2 ;
}
@keyframes bubble-2 {
    0%{
        transform: translate(30px, 350px);
        opacity:0
    }
    37%{opacity:0}
    38%{ 
        transform: translate(30px, 350px);
        opacity:100%
    }
    100%{
        transform: translate(30px,-107px);
        opacity: 100%;
    }
}
footer{
    background: rgba(0,0,0,60%);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 75px;
    z-index:6;
}