*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: cursive;
}
.container

{
    height: 100vh;
    width: 100%;
    background: linear-gradient(120deg, #06d1d5, #f6eb8a);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    
}
.container h1{
    position: absolute;
    display: flex;
    top: 10px;
    color: rgb(233, 10, 102);
    text-decoration: 2px solid underline #f0dd0c;
    transition: 0.4s all ease;
}
.container h1:hover{
    transform: translateX(20px);
    color: #f00cec;
    text-decoration: 2px solid underline black;
}
.Highseas-container{
    height: 400px;
    width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Highseas-container img{
    position: absolute;
    height: 200px;
    width: 280px;
    top: 100px;
    transition: 0.3s all ease;
}
.Highseas-container img:hover{
    transform: translateY(-10px);
    
}
.search{
    width: 80%;
    height: 50px;
    outline: none;
    border: none;
    border-radius: 30px  0  0 30px ;
    padding-left: 25px;
    transition: 0.2s all ease;
    font-size: 18px;
    font-style: italic;
    z-index: 2;
}

button{
    width: 60px;
    height: 50px;
    border: none;
    outline: none;
    z-index: 1;
    background: orange;
    border-radius: 0 30px 30px 0;
    transition: 0.3s all ease;
}
button i{
font-size: 26px;
color: #ffffff;
}

.search:hover{
    border: 2px solid #f00c5c;
    transform: translateX(10px);
}
.search:hover ~ button{
    border: 2px solid #f00c5c;
    transform: translateX(10px);

    
}
button:hover{
    transform: scale(1.2);

}
.credit{
    position: absolute;
    display: flex;
    text-align: center;
    font-size: 22px;
    font-style: italic;
    font-weight: 600;
    margin-top: 600px;
}

.background{
    position: absolute;
    width: 100vw;
    height: 100%;
    z-index: 0;
    animation: animation 10s  infinite;


}
.background img{
        animation: animate 10s  infinite;
        margin-left: 80px;

}
.background img:nth-child(1){
    height: 100px;
    width: 160px;
    animation-delay: 3s;
}
.background img:nth-child(2){
    height: 50px;
    width: 80px;
    animation-delay: 2s;
}

.background img:nth-child(3){
    height: 30px;
    width: 50px;
    animation-delay: 5s;
}

.background img:nth-child(4){
    height: 160px;
    width: 220px;
    animation-delay: 3s;
}
.background img:nth-child(5){
    height: 110px;
    width: 150px;
    animation-delay: 2s;
}

@keyframes animate {
    0%{
        opacity: 1;
    }
    10%{
        opacity: 1;
    }
    50%{
        transform: translateX(-20px);
    }
    80%{
        opacity: 1;
    }
    90%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
    
}
@keyframes animation {
    0%{
        bottom: 200px;
    }
    10%{
        bottom: 20px;
    }
    50%{
        bottom: 10px;
    }
   
    100%{
        bottom: -440px;
    }
    
}

audio{
    display: flex;
    position:absolute;
    margin-top: 200px;
    width:380px;
}

audio::-webkit-media-controls-panel
 {
    background: linear-gradient(45deg, #f6f396, #f00c5c);
 }
 audio::-webkit-media-controls-play-button{
    background-color: #ff7a55;
    border-radius: 50%;
 }
 
 audio::-webkit-media-controls-timeline-container
{
background: linear-gradient(120deg , red, white);
}