.arrow-down, .arrow-up {

    width: 20px;

    height: 20px;

    margin-top: 6px;

    background-size: contain;

    background-repeat: no-repeat;

    animation: bounce 1.2s infinite;

}



.arrow-down {

    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><polygon points="50,70 30,40 70,40" fill="darkgreen"/></svg>');

}



.arrow-up {

    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><polygon points="50,70 30,40 70,40" fill="darkred"/></svg>');

}

canvas {

    width: 100% !important;

    min-height: 280px;

}



@media screen and (max-width: 600px) {

    canvas {

        min-height:320px;

    }

}