style.css

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

html {
    height    : 100%;
    background: rgb(2, 0, 36);
    background: linear-gradient(150deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 55%, rgba(48, 64, 186, 1) 100%);
}

body {
    margin-top : 3rem;
    text-align : center;
    font-family: 'Poppins', sans-serif;
    color      : #fff;
}

#incidence {
    font-size  : large;
    font-weight: 700;
}

#incidence_date {
    font-size : small;
    font-style: italic;
}

#incidence_icon {
    margin-left: 0.4rem;
}

sup #incidence-source {
    vertical-align: super;
    font-size     : 0.2rem;
    margin-left   : 12px;
}



.wave {
    animation-name           : wave-animation;
    animation-duration       : 1.5s;
    animation-iteration-count: infinite;
    transform-origin         : 70% 70%;
    display                  : inline-block;
}

@keyframes wave-animation {
    0% {
        transform: rotate(0.0deg)
    }
    10% {
        transform: rotate(27.0deg)
    }
    /* The following five values can be played with to make the waving more or less extreme */
    20% {
        transform: rotate(-8.0deg)
    }
    30% {
        transform: rotate(22.0deg)
    }
    40% {
        transform: rotate(-4.0deg)
    }
    50% {
        transform: rotate(10.0deg)
    }
    60% {
        transform: rotate(0.0deg)
    }
    100% {
        transform: rotate(0.0deg)
    }
}


.bounce {
    display                  : inline-block;
    animation                : bounce 2s ease-in-out;
    animation-delay          : 1s;
    animation-iteration-count: infinite;
}

@keyframes bounce {

    0%,
    25%,
    50%,
    75%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-16px);
    }

    60% {
        transform: translateY(-7px);
    }
}