.Button {
    background: rgb(251,250,250);
    background: radial-gradient(circle, rgba(251,250,250,1) 0%, rgba(255,40,40,1) 5%, rgba(255,255,255,1) 10%, rgba(252,1,1,1) 16%, rgba(255,255,255,1) 23%, rgba(249,0,0,1) 34%, rgba(251,80,80,1) 34%, rgba(255,255,255,1) 42%, rgba(255,0,0,1) 52%, rgba(255,255,255,1) 70%, rgba(255,0,0,1) 91%, rgba(255,0,0,1) 100%);
color:maroon;
}
.Button1{
    background: rgb(0,46,255);
    background: radial-gradient(circle, rgba(0,46,255,1) 0%, rgba(255,0,0,1) 10%, rgba(1,14,252,1) 20%, rgba(249,0,0,1) 30%, rgba(12,0,255,1) 30%, rgba(255,0,0,1) 40%, rgba(16,0,255,1) 50%, rgba(255,0,0,1) 60%, rgba(4,0,255,1) 70%, rgba(255,0,0,1) 80%, rgba(16,0,255,1) 90%, rgba(255,0,0,1) 100%);
    color:green;

}
.large{
    font-size:60px;
}
.small{
    font-size:-20px;
}
.extraLarge{
    font-size:100px;
}
.medium{
    font-size:40px;
}
.Button4{
    background: rgb(252,1,1);
background: radial-gradient(circle, rgba(252,1,1,0.8603816526610644) 0%, rgba(255,158,0,1) 10%, rgba(255,235,0,1) 20%, rgba(5,255,0,1) 30%, rgba(0,236,255,1) 40%, rgba(58,68,255,1) 50%, rgba(106,0,255,1) 60%, rgba(239,0,255,1) 70%, rgba(255,0,0,1) 80%, rgba(255,158,0,1) 90%, rgba(255,235,0,1) 100%);
}
.Button2{
    background: radial-gradient(circle, rgba(0,46,255,1) 0%, rgba(255,246,0,1) 10%, rgba(1,14,252,1) 20%, rgba(241,249,0,1) 30%, rgba(12,0,255,1) 30%, rgba(247,255,0,1) 40%, rgba(16,0,255,1) 50%, rgba(243,255,0,1) 60%, rgba(4,0,255,1) 70%, rgba(239,255,0,1) 80%, rgba(16,0,255,1) 90%, rgba(255,250,0,1) 100%);
color: cadetblue;
}

.Button3{
    background: rgb(255,0,0);
background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,151,0,1) 20%, rgba(245,255,0,1) 30%, rgba(0,255,25,1) 50%, rgba(12,255,220,1) 60%, rgba(4,0,255,1) 70%, rgba(94,0,255,1) 80%, rgba(255,0,245,1) 100%);
color:Khaki;
}

body {
    background: rgb(255,0,0);
    background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,151,0,1) 20%, rgba(245,255,0,1) 30%, rgba(0,255,25,1) 50%, rgba(12,255,220,1) 60%, rgba(4,0,255,1) 70%, rgba(94,0,255,1) 80%, rgba(255,0,245,1) 100%); 
}
.water{
    width:100vw;
    height: 850px;
    background:dodgerBlue
}
#fishPath{ 
    width:100vw;
    height: 200px;
}
.fish{
width:300px;
    animation: swim 10s;
    animation-iteration-count: infinite;
    position: absolute;
    transform:scaleX(-1);
}

.clownfish{ 
    width:300px;
    animation: swimReverse 10s;
    animation-iteration-count: infinite;
    position: absolute;
    transform:scaleX(1);
}
.goldfish{
    width:300px;
    animation: swim 10s;
    animation-iteration-count: infinite;
    position: absolute;
    transform:scaleX(-1); 
}
@keyframes swim
{
    0% {
        left: 0;
    }
    50% {
        transform:scaleX(-1);
        left: calc( 100% - 300px);
    }
    55% { 
        transform:scaleX(1);
        left: calc( 100% - 300px);
    }
    95% {
        left: 0;
        transform:scaleX(1);
    }
    100% {
        left: 0;
        transform:scaleX(-1);
    }
}

@keyframes swimReverse
{
    0% {
        left: 0;
    }
    50% {
        transform:scaleX(1);
        left: calc( 100% - 300px);
    }
    55% { 
        transform:scaleX(-1);
        left: calc( 100% - 300px);
    }
    95% {
        left: 0;
        transform:scaleX(-1);
    }
    100% {
        left: 0;
        transform:scaleX(1);
    }
}
.seafloor{
    background: burlywood;
    width: 100vw;
    height: 100px;
}
#coral1{
    left: 300px;
                        1`                                                                                                                                                                                                                                                                                                                                  `                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
 }
.coral{
    width: 400px;
    margin-top:480px;
}
#coral2{ 
    left: 600px;
}
#coral3{
    left: 900px;
}
#coral4{
    left: 1500px;
}
    #coral5{
        left: 1800px;
    }
    #coral6{
        left: 1200px;
    }