body {
    background-color: lightgray;
}

.header-bar {
    height: 50px;
    background-color: darkgray;
}

.back-gradient {
    background-image: linear-gradient(to right, #706f6fd0 0%, black 100%);
}

.show-shadow-black {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}

.show-shadow-white {
    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.3), 0 6px 20px 0 rgba(255, 255, 255, 0.3);
}

.animate-text {
    text-transform: uppercase;
    background-image: linear-gradient(
        -225deg,
        #000000 0%,
        #44107a 33%,
        #ff1361 67%,
        #fff800 100%
    );

    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 7s linear infinite;
    display: inline-block;
    font-size: 200px;
}

@keyframes textclip {
    to {
        background-position: 200% center;
    }
}

.donation-bar {
    background-image: linear-gradient(to right, #444141d0 0%, black 100%);
}

.wiggle-btn {
    animation: wiggle 2s linear infinite;
}

/* Keyframes */
@keyframes wiggle {
    0%, 7% {
        transform: rotateZ(0);
    }
    15% {
        transform: rotateZ(-15deg);
    }
    20% {
        transform: rotateZ(10deg);
    }
    25% {
        transform: rotateZ(-10deg);
    }
    30% {
        transform: rotateZ(6deg);
    }
    35% {
        transform: rotateZ(-4deg);
    }
    40%, 100% {
        transform: rotateZ(0);
    }
}

.menuImg {
    height: 30px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.sm {
    height: 35px;
    margin: 5px;
}

.sm:hover {
    opacity: 0.5;
}

.lrg {
    height: 100px;
    margin: 5px;
}

.lrg:hover {
    opacity: 0.5;
}