.home{
    background: url('../assets/night.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right top;
    min-height:130vh;
    right:0;
    overflow:hidden;
    transition: ease-in 1s;
}
.dayImage{
    background: url('../assets/day.jpg');
    background-position: right top;
    background-size: cover;
    background-repeat: no-repeat;
    height:130vh;
    transition: ease-in 1s;
}
.opacity{
    position: absolute;
    bottom:0;
    height: 20%;
    width:100%;
    background-image: linear-gradient( rgba(0, 132, 255,0.11),rgba(0, 132, 255, 0.829),var(--up));
    z-index: 3;
    opacity:0.7;
}

#body{
    background: linear-gradient(to top,var(--down),var(--up));
    overflow: hidden;
    width:100%;
    position: relative;
    height:100vh;
    transition:all ease 1s;
}
/* Creating Bubble */
.seaBack{
    overflow: hidden;
    width:100%;
    position: absolute;
    height:100vh;
}
.seaBack span{
    position: absolute;
    bottom:-50px;
    background: rgba(255, 255, 255, 0);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: inset 0 0 10px rgba(255,255,255,0.5);
    animation: animate 7s linear infinite;
    z-index:10;
}
.seaBack span:before{
    content:"";
    position: absolute;
    width:100%;
    height:100%;
    transform: scale(0.2) translate(-70%,-70%);
    background: radial-gradient(#fff,transparent);
    border-radius: 50%;
}
@keyframes animate{
    0%
    {
        transform: translateY(0%);
        opacity:1;
    }
    80%{
        opacity:0.6;
    }
    95%
    {
        opacity:0.1;
    }
    100%{
        transform: translateY(-1800%);
        opacity:0;
    }
}

@media only screen and (max-width : 720px){
    @keyframes animate{
        0%
        {
            transform: translateY(0%);
            opacity:1;
        }
        80%{
            opacity:0.6;
        }
        95%
        {
            opacity:0.1;
        }
        100%{
            transform: translateY(-2200%);
            opacity:0;
        }
    }
}