.bg {
    background: rgb(167,123,202);
    background: radial-gradient(circle, rgba(167,123,202,1) 0%, rgb(112, 32, 130) 100%);
}

.bell {
    display: block;
    margin: auto;
    fill-opacity: 0;
    border: 15px solid black;
    border-radius: 30px;
    width: 20%;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: 0.2s;
}

.bell:hover {
    width: 25%;
}

.bing {
    animation-name: bong;
    animation-duration: 2s;
    transform-origin: 40% 5%;
}

.fake-bing {
    animation-name: fake-bong;
    animation-duration: 2s;
    transform-origin: 40% 5%;
}

@keyframes bong {
    0% {transform: rotate(0deg);}
    10% {transform: rotate(45deg);}
    20% {transform: rotate(45deg)}
    25% {transform: rotate(-10deg);}
    30% {transform: rotate(10deg);}
    35% {transform: rotate(-8deg);}
    42% {transform: rotate(8deg);}
    49% {transform: rotate(-6deg);}
    59% {transform: rotate(6deg);}
    65% {transform: rotate(-4deg);}
    77% {transform: rotate(2deg);}
    92% {transform: rotate(-1deg);}
}

@keyframes fake-bong {
    0% {transform: rotate(0deg);}
    10% {transform: rotate(45deg);}
    40% {transform: rotate(45deg)}
}