@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100&display=swap');

* {
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: #191717;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.logo img {
    width: 45px;
}

.logo span:nth-child(1) {
    color: white;
    font-size: 45px;
}

.logo span:nth-child(2) {
    color: #4478e3;
    font-size: 45px;
}

footer {
    width:100vw;
    position:fixed;
    bottom:0px
}
/*footer div {*/
/*    background-color:#4478e3;*/
/*    margin: -5px 0px 0px 0px;*/
/*    padding:5px;*/
/*    color: #fff;*/
/*    text-align:center;*/
/*}*/
svg {
    width:100%;
}
.arrow {
    stroke-width: .3px;
    stroke:yellow;
}
.topball {
    animation: ball 1.5s ease-in-out;
    animation-iteration-count:infinite;
    animation-direction: alternate;
    animation-delay: 0.3s;
    cursor:pointer;
}

.wave {
    animation: wave 3s linear;
    animation-iteration-count:infinite;
    fill: #4478e3;
}
.drop {
    fill: transparent;
    animation: drop 5s ease infinite normal;
    stroke: #4478e3;
    stroke-width:0.5;
    opacity:.6;
    transform: translateY(80%);
}
.drop1 {
    transform-origin: 20px 3px;
}
.drop2 {
    animation-delay: 3s;
    animation-duration:3s;
    transform-origin: 25px 3px;
}
.drop3 {
    animation-delay: -2s;
    animation-duration:3.4s;
    transform-origin: 16px 3px;
}
.gooeff {
    filter: url(#goo);
}
#wave2 {
    animation-duration:5s;
    animation-direction: reverse;
    opacity: .6
}
#wave3 {
    animation-duration: 7s;
    opacity:.3;
}
@keyframes drop {
    0% {
        transform: translateY(80%);
        opacity:.6;
    }
    80% {
        transform: translateY(80%);
        opacity:.6;
    }
    90% {
        transform: translateY(10%) ;
        opacity:.6;
    }
    100% {
        transform: translateY(0%) scale(1.5);
        stroke-width:0.2;
        opacity:0;
    }
}
@keyframes wave {
    to {transform: translateX(-100%);}
}
@keyframes ball {
    to {transform: translateY(20%);}
}