.lubyWrapper {
    width: 51px;
    height: 1px;
    background: transparent;
    padding-bottom: 50px;
    margin: auto;
    margin-bottom: 50px;
    border-radius: 50%;
    animation: spin 15s linear infinite, height 5.67s ease-in-out infinite;
    animation-play-state: paused;
    transition: 1s linear;
}

.lubyWrapperSpin {
    animation-play-state: running;
}

.lubyWrapper:hover {
    animation-play-state: paused;
    cursor: pointer;
}

.highlightWrapper {
    background: radial-gradient(#008888 0%,transparent 75%);
}

@keyframes spin {
    0% {transform: rotate(0deg);}
    50% {transform: rotate(340deg);}
    100% {transform: rotate(720deg);}
}

@keyframes height {
    0% {padding-top: 12.5px; padding-bottom: 37.5px;}
    25% {padding-top: 37.5px; padding-bottom: 12.5px;}
    50% {padding-top: 0px; padding-bottom: 50px;}
    75% {padding-top: 50px; padding-bottom: 0;}
    100% {padding-top: 12.5px; padding-bottom: 37.5px;}
}

.luby {
    transform: scale(1);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    box-shadow: 0 0 7px 3px #008888, 0 0 2px 2px #00ffff, inset 0 0 2px #00ffff;
    transition: transform 1s ease-in 0.2s;
    animation: light 3.6s linear infinite, shaking 0.2s linear infinite;
}

@keyframes light {
    0% {box-shadow: 0 0 7px 3px #008888, 0 0 2px 2px #00ffff, inset 0 0 2px #00ffff;}
    33% {box-shadow: 0 0 11px 4px #ff00ff, 0 0 7px 3px #00ffff, inset 0 0 1px #ff00ff;}
    50% {box-shadow: 0 0 3px 0 #008888, 0 0 0 #00ffff, inset 0 0 4px 2px #ff00ff, inset 0 0 8px 4px #00ffff;}
    80% {box-shadow: 0 0 8px 2px #ff00ff, 0 0 5px 1px #00ffff, inset 0 0 3px #ff00ff;}
    95% {box-shadow: 0 0 11px 4px #008888, 0 0 7px 3px #00ffff, inset 0 0 1px #00ffff;}
}

@keyframes shaking {
    0% {margin-top: 0px; margin-left: 15.5px;}
    50% {margin-top: 2px; margin-left: 14.5px;}
    100% {margin-top: 0px; margin-left: 15px;}
}

.scared {
    transform: scale(0);
    transition: transform 1s ease-in;
}