*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    text-align:center; 
    background-color: blue;
}
h1{
    color: #dbe2e2;
    font: size 40px;;
    font-family:  Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    text-align: center;
    margin-top: auto;
}

#fish2 {
animation: fish2 6s ease infinite;
transform-origin:left-center;
transform-box: fill-box;

}

@keyframes fish2{
    from{
        transform: rotateZ(0deg);
    }
    to{
        transform: rotateZ(360deg);
    }
}

#fish1 {
    animation: fish1 10s  infinite linear;
    transform-origin: center;
    transform-box: fill-box;
    
    }
    
    @keyframes fish1{
        from{
            transform: rotateY(-0deg);
        }
        to{
            transform: rotateY(-360deg);
        }
    }

    #phone {
        animation: fish1 1s ease infinite;
        transform-origin: center;
        transform-box: fill-box;
        
        }
        
        @keyframes phone{
            from{
                transform: rotateZ(0deg);
            }
            to{
                transform: rotateZ(-60deg);
            }
        }
        #wave1 {
            animation: wave1 3s ease infinite;
            transform-origin: center;
            transform-box: fill-box;
            
            }
            
            @keyframes wave1{
                from{
                    transform: rotateZ(0deg);
                }
                to{
                    transform: rotateZ(3deg);
                }
            }
            #wave2 {
                animation: wave1 5s ease infinite;
                transform-origin: center;
                transform-box: fill-box;
                
                }
                
                @keyframes wave2{
                    from{
                        transform: rotateZ(10deg);
                    }
                    to{
                        transform: rotateZ(23deg);
                    }
                }