body {
    background-color: rgba(5,42,58,1);
}

.waves {
    position: fixed;
    bottom: 50px;
    left: 0;
    height: 50vh;
    width: 100%;
}

    .waves:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        bottom: -100px;
        height: 100px;
        background: #378BA5;
    }

    .waves svg {
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .waves use {
        animation: wavewave 10s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
        fill: #378BA5;
        opacity: 0.7;
    }

    .waves.back {
        z-index: -1;
    }

        .waves.back use:nth-child(2) {
            animation-delay: -4s;
            animation-duration: 13s;
        }

        .waves.back use:nth-child(3) {
            animation-delay: -5s;
            animation-duration: 20s;
        }

    .waves.front {
        z-index: -3;
    }

        .waves.front use:nth-child(2) {
            animation-delay: -2s;
            animation-duration: 7s;
        }

        .waves.front use:nth-child(3) {
            animation-delay: -3s;
            animation-duration: 10s;
        }

@keyframes wavewave {
    0% {
        transform: translateY();
    }

    50% {
        transform: translateY(5px);
    }

    100% {
        transform: translateY(0);
    }
}

@media (prefers-color-scheme: dark) {
    .waves:after {
        background: #378BA5;
    }

    .waves use {
        fill: #378BA5;
    }
}

@media (max-width: 768px) {
    .chart-legend {
        display: none;
    }
}